目录
1. 简介
JavaScript 是一种轻量级的编程语言，是 Web 的基本编程语言，所有的现代的 HTML 页面都使用 JavaScript，文件以 .js 为后缀。
- 一个完整的JavaScript 实现由下列三个部分组成：
- 语言核心（ECAMScript）
- 基于文档对象模型编程（DOM）
- 基于浏览器对象模型编程（BOM）
2. JavaScript在HTML中的使用
-
2.1JavaScript的引入
- 2.1.1 使用script标签
- <script>和</script>会告诉浏览器 JavaScript 在何处开始和结束。
- 2.1.2 引入方式
- 直接在页面中嵌入JavaScript代码
- 缺点：js脚本代码和html标签混合使用，不利用后期的管理
- 使用包含外部JavaScript文件
- 优点：便于维护、可缓存
- 使用<script src="外部文件的地址"></script> 必须是有开始有结束,否则导入失败!
- 注： 带有 src 属性的<script>元素不应该在其<script>与</script>标签之间包含额外的 JavaScript 代码。如果包含了了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。
- 直接在页面中嵌入JavaScript代码
- 2.1.1 使用script标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript的引入方式</title>
<!--直接在页面中嵌入JavaScript代码-->
<script type="text/javascript"></script>
<!--引入外部js文件-->
<script src="js/01.js"></script>
</head>
<body>
</body>
</html>-
2.2 script标签的位置
<script> 标签可被放置在 HTML ⻚页⾯面的 <body> 和 <head> 部分中，或者同时存在于两个部分中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>script标签的位置</title>
<script>
function firstJs(){
document.write("head中的JavaScript<br/>");
}
firstJs();
</script>
</head>
<body>
<script>
function secondJs(){
document.write("body中的JavaScript");
}
secondJs();
</script>
</body>
</html>3. JavaScript基本概念
JavaScript是一种弱类型脚本语言，不同于强类型语言Java，其都是使用 var 定义变量。
-
3.1 变量
定义变量时使用 var 操作符（var 是一个关键字），后跟变量名（即一个标识符）。
- 未经过初始化的变量，会保存一个特殊的值——undefined。
- 初始化的过程就是给变量赋一个值，并不标记类型。
- 如果在函数中使用 var 定义一个变量，那么这个变量在函数退出后就会被销毁。
- 若想创建一个全局变量，则省略var操作符。
- JavaScript 变量量均为对象。
-
3.2 数据类型
- 3.2.1 分类
- 5 种简单数据类型（基本数据类型）
- Undefined（未赋值）、Null（空）、 Boolean（布尔）、Number （数字）和 String（字符串）
- 1 种复杂数据类型
- Object（对象），Object 本质上是由一组无序的名值对组成的。
- 5 种简单数据类型（基本数据类型）
- 3.2.2 typeof 操作符
- 对一个值使用 typeof 操作符可能返回下列某个字符串
- "undefined"——值未定义，或定义后未赋值，或为 undefined
- "boolean"——值是布尔值;
- "string"——值是字符串、字符
- "number"—值是数值（整数、小数）
- "object"——值是对象或 null（null 值表示一个空对象指针）
- "function"——值是函数
- 对一个值使用 typeof 操作符可能返回下列某个字符串
- 3.2.1 分类
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js的变量和数据类型</title> <script> var a=10; //相当于var a=new Number(10); number->Number js内置对象 //var a=20; //a=10会被a=20覆盖 var b=3.14; var c='c'; var s="bonjour";//相当于var s=new String("hello"); var e=true; var f=new Object(); document.write("a的值是:"+a+" 数据类型是："+typeof(a)+"<br/>"); document.write("b的值是:"+b+" 数据类型是："+typeof(b)+"<br/>"); document.write("c的值是:"+c+" 数据类型是："+typeof(c)+"<br/>"); document.write("d的值是:"+d+" 数据类型是："+typeof(d)+"<br/>"); document.write("e的值是:"+e+" 数据类型是："+typeof(e)+"<br/>"); document.write("f的值是:"+f+" 数据类型是："+typeof(f)+"<br/>"); </script> </head> <body> </body> </html>- 3.2.3 NaN
- 非数值(Not a Number)是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况。
- 任何涉及 NaN 的操作（例如 NaN/10）都会返回 NaN。
- NaN 与任何值都不相等，包括 NaN 本身。
- isNaN()函数，任何不能被转换为数值的值都会导致函数返回 true。
- 3.2.4 数值转换
- Number()：可用于任何数据类型
- 如果是数字值，只是简单的传入和返回。
- 如果是 Boolean 值，true 和 false 将分别被转换为 1 和 0。
- 如果是 null 值，返回 0。
- 如果是 undefined，返回 NaN。
- 如果字符串中只包含数字(包括前面带正号或负号的情况)，则将其转换为十进制数值(前导的零被忽略);
- 如果字符串中包含有效的浮点格式，如"1.1"，则将其转换为对应的浮点数值(忽略前导零);
- 如果字符串是有效的十六进制格式，例如"0xf"，则将其转换为相同大小的十进制整数值;
- 如果字符串是空的(不包含任何字符)，则将其转换为 0;
- 如果字符串串中包含除上述格式之外的字符，则将其转换为 NaN。
- 如果是对象，则调用对象的 valueOf() 方法，然后依照前面的规则转换返回的值。如果转换的结果是 NaN，则调用对象的 toString() 方法，然后再次依照前面的规则转换返回的字符串值。
- parseInt()：专门用于字符串转换成数值
- 忽略字符串前面的空格，直至找到第一个非空格字符；
- 如果第一个字符不是数字字符或者负号，parseInt() 就会返回 NaN;
- 如果第一个字符是数字字符，parseInt() 会继续解析第二个字符，直到解析完所有后续字符或者遇到了一个非数字字符。
- parseFloat()：：专门用于字符串转换成数值
- 从第一个字符(位置 0)开始解析每个字符；
- 一直解析到字符串末尾，或者解析到遇见一个无效的浮点数字字符为止。
- 字符串中的第一个小数点是有效的，而第二个小数点就是无效的了。
- 始终忽略前导的零。parseFloat() 只解析十进制值，没有通过第二个参数指定基数的用法。十六进制格式的字符串则始终会被转换成 0。
- 如果字符串包含的是一个可解析为整数的数(没有小数点，或者小数点后都是零)，parseFloat()会返回整数。
- Number()：可用于任何数据类型
- 3.2.3 NaN
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js类型转换函数</title> <script> var a="10"; var a="10abc"; var a="a10bc"; document.write("a的值是："+a+" 类型："+typeof(a)+"<br/>"); a=parseInt(a); document.write("转换后的a："+a+" 类型："+typeof(a)+"<br/>"); </script> </head> <body> </body> </html>- 3.2.5 String类型
- 把一个值转换为一个字符串方式
- 使用几乎每个值都有的 toString()方法（null 和 undefined 值没有这个方法）
- 使用转型函数 String()，这个函数能够将任何类型的值转换为字符串
- 如果值有 toString()⽅方法，则调用该方法并返回相应的结果
- 如果值是 null，则返回"null"
- 如果值是 undefined，则返回"undefined"
- 把一个值转换为一个字符串方式
- 3.2.6 Object类型
- 是一组数据和功能的集合，对象可以通过执行 new 操作符后跟要创建的对象类型的名称来创建。
- Object 的每个实例都具有下列属性和方法
- constructor：保存着用于创建当前对象的函数。
- hasOwnProperty(propertyName)：用于检查给定的属性在当前对象实例中是否存在。其中，作为参数的属性名(propertyName)必须以字符串形式指定。例： o.hasOwnProperty("name")
- isPrototypeOf(object)：用于检查传入的对象是否是传入对象的原型。
- propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用 for-in 语句来枚举。 与 hasOwnProperty() 方法一样，作为参数的属性名必须以字符串形式指定。
- toLocaleString()：返回对象的字符串表示，该字符串与执行环境的地区对应。
- toString()：返回对象的字符串表示。
- valueOf()：返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。
- 3.2.5 String类型
-
3.3 常见操作符
- 3.3.1 一元操作符
自加、自减、一元加和减
- 3.3.2 布尔操作符
与（AND）、或（OR）、非（NOT）
- 逻辑非：！表示
- 逻辑与：&&（属于短路操作）
- 逻辑或：||（属于短路操作）
- 3.3.3 乘性操作符
乘法、除法及求模。JavaScript中的5/2返回值为2.5。
- 3.3.4 加性操作符
加法与减法
- 3.3.5 关系操作符
小于（<）、大于（>）、小于等于（<=）、大于等于（>=）
- 任何操作数与NaN进行关系比较，结果为false
- 3.3.6 相等操作符
- 相等（==）与不相等（!=）
- null 和 undefined 是相等的
- 如果两个操作数都是对象，则比较它们是不是同一个对象
- 如果有一个操作数是 NaN，则相等操作符返回 false，不相等操作符返回 true
- 全等与不全等
- 只有在两个操作数相等且类型相同的情况下，才全等。
- 相等（==）与不相等（!=）
- 3.3.7 条件操作符
即三目运算符
-
3.3.8 赋值操作符
加/赋值(+=)、 减/赋值(-=)、乘/赋值(*=)、除/赋值(/=)、模/赋值(%=)
-
3.3.9 逗号操作符
使用逗号操作符可以在一条语句中执行多个操作（可声明多个变量）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作符</title>
<script>
var a=10;
var b=true;
var b=15;
document.write(a+b+"<br />");
document.write(a>b+"<br />");
document.write(true&&false+"<br />");
document.write(true||false+"<br />");
var age=12;
document.write((age>=18)?"成年":"未成年");
</script>
</head>
<body>
</body>
</html>
-
3.4 逻辑语句
- 3.4.1 if语句
-
if（表达式）{ 语句1; }else{ 语句2; }- 如果表达式是number类型，非零的数值条件成立；零条件不成立
- 表达式是string类型，非空字符串条件成立，否则不成立
- 表达式中如果是对象类型，若是null不成立，否则成立
- 表达式是boolean类型，true成立，false不成立
- 3.4.2 do-while语句
do {
语句
} while (expression); // expression不成立时跳出循环- 3.4.3 while语句
while(expression) {
语句
}
- 3.4.4 for语句
for (initialization; expression; post-loop-expression) {
语句
}- 3.4.5 for-in语句
类似于Java中的foreach，用于遍历数组或对象的使用
在使用 for-in 循环之前，先检测确认该对象的值不是 null 或 undefined
for (var 变量名 in 数组名称/具体的对象名称) {
语句
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for-in语句</title>
<script>
//定义一个数组
var arr = [10,20,30,40] ;
//普通for循环
for(var i = 0 ; i <arr.length ;i++){
document.write(arr[i]+" ") ;
}
document.write("<hr />") ;
for(var i in arr){
alert(arr[i]) ;
}
//js中要创建自定义对象，先去定义对象
//定义对象: 使用function 对象(形式参数){}
function Person(name,age){//this:代表当前Person对象地址值的引用
this.name = name ;
this.age = age ;
}
//var 定义对象
var p = new Person("张三",20) ;
//遍历当前Person中的所有属性
for(var j in p){
document.write(p[j]+"<br />") ;
}
</script>
</head>
<body>
</body>
</html>- 3.4.6 break和continue语句
break跳出整个循环；continue跳出本次循环。
- 3.4.7 switch语句
java中的swtich（表达式），表达式数据类型可以是字符串，case后的值只能是常量
js中的case后既可以是常量，也可以是变量（js是弱类型语言），也可以是表达式
switch (expression) {
case value: statement
break;
case value: statement
break;
case value: statement
break;
case value: statement
break;
default: statement
} <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流程控制语句</title>
<script>
/**
* if...else...语句
*/
if(10){
alter("成立");
}else{
alert("不成立");
}
/**
* switch语句
*/
var i="b";
switch(i){
case "a":
document.write("a<br />");
break;
case "c":
document.write("b<br />");
break;
case i:
document.write("c<br />");
break;
}
document.write("<hr />")
/**
* 循环语句：for，while，do-while循环
* for-in语句（类似于java中的foreach
* with语句
*/
/**
* with语句
* with(document){
* }
*
*/
/**
* for循环
*/
for(var i=1;i<5;i++){
document.write("vie ");
}
document.write("<hr />")
/**
* var 变量名=值;
* while(条件表达式){
* 循环体语句;
* 步长语句;
* }
*/
var i=1;
while(i<4){
document.write("amour<br />");
i++;
}
document.write("<hr />")
var j=1;
do{
document.write("coissant<br/>");
j++;
}while(j<4);
</script>
</head>
<body>
</body>
</html>-
3.5 函数
使用function关键字来声明，后跟一组参数以及函数体。
function functionName(arg0, arg1,...,argN) {
statements
}- 3.5.1 函数的返回值
- 函数会在执行完return语句之后停止并立即退出。
- 位于return语句之后的任何代码都永远不会执行。
- 一个函数中可以没有return语句，也可以包含多个return语句。
- 3.5.2 函数的参数
- ECMAScript中的参数在内部使用一个数组arguments来表示的。
- arguments数组：将实际参数和形式参数绑定，对其进行赋值操作
- 不要求传递的参数的个数及数据类型，因此不需要写参数类型，直接写参数名称
- 可以使用length属性来确定传递进来的参数个数。
- 所有参数传递的都是值，而不是通过引用传递参数
- 实际参数个数小于形式参数个数，结果NaN；实际参数个数大于形式参数个数，多余的被移除
- ECMAScript中的参数在内部使用一个数组arguments来表示的。
- 3.5.3 不存在函数重载
- 由于ECMAScript是弱类型，因此不存在方法重载的概念。若出现两个重名函数，之后定义的函数会覆盖掉之前定义的
- 练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>月份查询</title>
<script>
//输入月份的值，查询对应的天数
/**
* 事件编程3要素：
* 1)事件源（点击按钮）
* 2)事件监听器(执行某个逻辑函数)
* 3)注册事件(事件源和函数进行绑定)
*/
//事件监听器
function checkMonth(){
//1.获取到input标签对象：通过id属性值获取
//document.getElementById("id属性值");
var monthInput=document.getElementById("monthInput");
//2.通过当前标签对象获取里面的内容
//value属性
monthInput=monthInput.value; //String类型
//3.使用呢流程控制语句进行判断
//当String类型的整数进行比较时，会自动转换成number类型
if(monthInput==1||monthInput==3||monthInput==5||monthInput==7||monthInput==8||monthInput==10||monthInput==12){
alert("31天");
}else if(monthInput==4||monthInput==6||monthInput==9||monthInput==11){
alert("30天");
}else if(monthInput==2){
alert("28天");
}else{
alert("没有该月份");
}
}
</script>
</head>
<body>
请输入月份的值：<input type="text" id="monthInput"/><br />
<!--事件源-->
<input type="button" value="查询" onclick="checkMonth()"/><!--单击点击事件：onclick-->
</body>
</html>