共计 3357 个字符,预计需要花费 9 分钟才能阅读完成。
—–JS
JS 介绍
由 NetScape(网景)公司提供,嵌入在浏览器中执行的脚本语言,负责实现网页中的动画成果,或者是实现表单校验等性能。
JS 特点和劣势
1、特点:
(1)JS 是一门直译式的语言(边解释边执行,没有编译的过程)java--> 编写时 xx.java ---> 编译成 xx.class --> 运行 class 文件
js ---> 编写时 html, 编写时 js 文件, 间接运行, 没有编译过程
(2)JS 是一门基于对象的语言(JS 中没有类的概念, 也没有编译的过程)
JS 中是有对象的(内置对象、自定义对象)
(3)JS 是一门弱类型的语言(Java: 强类型)
// 在 java 中: 变量一旦申明, 就属于固定的数据类型, 不能被扭转
String str = "abc";
int number = 100;
// 在 JS 中: 变量是不辨别类型的, 能够指向任意的数据类型
var s = 100; //number(数值类型)
s = "abc"; //string(字符串类型)
s = true; //boolean(布尔类型)
s = []; //object(对象类型)
s = function(){} //function(对象类型)
2、劣势:
(1)JS 具备良好的交互性
(2)JS 具备肯定的安全性(只能在浏览器外部运行, 不能拜访浏览器以外的资源)
(3)JS 具备跨平台性(JS 浏览器)
(JS 语言是跨平台的,是因为有浏览器,但浏览器不跨平台
Java 语言是跨平台的,是因为有虚拟机,但虚拟主机不跨平台 )
在 HTML 书写 JS 的形式
1、在 script 标签外部能够书写 JS 代码:
在 head 或者 body 标签外部能够增加一个 script 标签,在 script 标签外部能够间接书
写 JS 代码!
<!-- 在 script 标签外部能够书写 JS 正文和 JS 代码 -->
<script type="text/javascript">
//JS 的单行正文
/* JS 的多行正文 */
alert("在 html 中引入 JS 的第一种形式...");
</script>
2、通过 script 标签引入内部的 JS 文件
能够通过 script 标签引入内部的 JS 文件。
<script src="demo.js"></script>
(1)在引入 js 文件的 script 标签外部不要书写 JS 代码
<script src="demo.js">
alert(111); // 这里的代码不会执行
</script>
(2)不要将引入 JS 文件的 script 标签自闭,因为可能会导致文件引入失败:
<script src="demo.js" />
能够间接在元素上书写 JS 代码:
<!-- 间接在元素上书写 JS 代码:onclick 属性用于给以后元素绑定点击事件:点击元素就会触发事件,执行相应函数
-->
<input type="button" value="点我~" onclick="alert('Hello!!!')"/>
<input type="button" value="别点我" onclick="console.log( new
Date())"/>
JavaScript 语法
JS 的正文符号和 Java 的正文符号雷同
// 单行正文内容
/* 多行正文内容 */
数据类型
1、根本数据类型
(1) 数值类型 (number)
在 JS 中,所有的数值在底层都是浮点型,然而在解决和显示的过程中会主动的和
整型进行转换。
例如:2.4+3.6=6
非凡值:Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)
(2)字符串类型 (string)
在 JS 中,字符串类型属于根本数据类型,字符串常量能够应用单引号或者应用双
引号引起来。
JS 中字符串类型有对应的包装对象(String),在须要时会主动的和包装
对象进行转换。
var s1 = "Hello JS"; // 根本数据类型, string
console.log(typeof s1); //string
var s2 = new String("Hello JS"); // 简单数据类型, object
console.log(typeof s2); //object
// 不论是根本数据类型 s1, 还是对象类型 s2, 都能够当作对象来用
console.log(s1.valueOf() ); //s1 是根本数据类型, 会转成对象, 调用
valueOf 函数
console.log(s2.valueOf() );
(3)布尔类型 (boolean)
布尔类型的值有两个,别离为 true 和 false。
(4)undefined 类型
undefined 类型的值只有一个,就是 undefined,示意变量未定义(但不是指变量没
有申明)。
指申明了变量,但没有为变量赋值,该变量的值就是 undefined。
/* 1.undefined 类型 */
var x;
alert(x); //undefined
alert(y); // 抛异样
(5)null 类型
null 类型的值也只有一个,就是 null,示意空值。
能够作为函数的返回值,示意函数返回的是一个空的对象。留神:null 和 undefined 类型的变量是不能调用函数或属性的,会抛异样!
2、简单数据类型
次要指对象 (JS 的内置对象、自定义的对象、函数、数组)
变量申明
JS 中是通过 var 关键字申明变量,申明的变量是不辨别类型,能够指向任意的
数据。
var x = 100;
x = "abc";
x = true;
x = [];
x = function(){}
x = new Object();
x = {};
JS 中屡次申明同名的变量不会呈现语法错误, 后申明的变量值会笼罩前一个的值。
/* 2. 变量的定义 */
var s = "Hello"; // var s; s="Hello";
var s = 123; // var s; s=123; 第二次申明变量 x 没有失效
alert(s); //123
JS 运算符
算术运算符: +,-,*,/,%,++,--
赋值运算符: =,+=,-=,*=,/=,%=
比拟运算符: ==,!=,>,>=,<,<=
位运算符: &,|
逻辑运算符: &&,|| (false && 表达式, true || 表达式)
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式。。。
JS 语句
1、if 分支构造
if (条件 1){当条件 1 为 true 时执行的代码}else if (条件 2){当条件 2 为 true 时执行的代码}else{当条件 1 和 条件 2 都不为 true 时执行的代码}
2、switch 语句
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
...
default:
与 case 1 和 case 2 不同时执行的代码
}
3、for 循环语句 — 循环代码块肯定的次数
for (语句 1; 语句 2; 语句 3){被执行的代码块}
4、while 循环,do while 循环 — 在指定条件为真时循环执行代码块
while (条件){须要执行的代码}
do{要执行的代码}
while(条件){要执行的代码}
JS 数组
JS 数组的申明形式一:
// 申明一个空数组, 长度为零
var arr1 = [];
// 申明一个数组,并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];
JS 数组的申明形式二:
// 申明一个空数组,长度为零
var arr3 = new Array();
// 申明一个数组,并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());
1)JS 中的数组能够存储任意类型的数据
2)JS 中的数组长度是能够被任意扭转的
var arr1 = [];
console.log("此处数组的长度为:"+arr1.length); // 0
arr1.length = 5;
console.log("此处数组的长度为:"+arr1.length); // 5
arr1[9] = "a";
console.log("此处数组的长度为:"+arr1.length); // 10
arr1[99] = "b";
console.log("此处数组的长度为:"+arr1.length); // 100
JS 函数
JS 中申明函数的形式:
function 函数名称([参数列表]){函数体}
or
var 变量名 / 函数名 = function([参数列表]){函数体}
DOM 操作
DOM: Document Object Model,文档对象模型,其实就是 JS 专门为拜访 html 元素
提供的一套 API。
dom 中的罕用 API