JavaScript的组成：
完整的JavaScript是由ECMAScript（语法）
Browser Object（DOM、BOM）特性组成。
学习目标：
1.JS的注释与分号
// 单行注释
/**/ 多行注释
语句结束使用分号
2.JavaScript的语法
ECMAScript中的一切（变量，函数名以及操作符）都是区分大小写的。
3.认识标识符
函数、变量、属性的名字、或者函数的参数都叫标识符
命名规则:由字母、数字、下划线_或者美元符号$组成
且不能以数字开头。
不能使用关键字，保留字来命名
4.变量
ECMAScript的变量是松散类型
松散类型：可以用来保存任何类型的数据
5.变量的声明与赋值
变量声明：变量的声明需要使用var操作符
语法：var 变量名
实例
<!DOCTYPE html> <html> <head> <title>变量</title> </head> <body> <script> var name_01; //声明 name_01 = "marry" //赋值 //-同时进行声明和赋值 var age = 18; //声明的同时赋值 //-一次声明多个变量 var name ="marry",age=18,email = “marry.qq.com” </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
认识JavaScript的数据类型
基本类型：undefined、unll、Boolean、Number、String
引用类型：object、function、Array
认识typeof操作符
typefo：检测变量的类型
语法：typeof变量 或 typeof(变量)
（变量本身是没有类型的，它的类型取决于它的值）
实例
<!DOCTYPE html> <html> <head> <title>数据类型</title> </head> <body> <script> // typeof var name = "marry"; alert(typeof(name)); //string </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
理解undefined、null
undefined 即为 未定义
实例
<!DOCTYPE html> <html> <head> <title>数据类型</title> </head> <body> <script> var age; alert(age); //undefined //声明未赋值 </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
null：表示一个空的对象指针。
-如果需要某个变量来保存将来的值，那么最好的做法就是将该变量初始化为null
认识Number
number：表示整数和浮点数
理解isNaN()
NaN：即非数值（Not a Number）是一个特殊的数值
实例
<!DOCTYPE html> <html> <head> <title>数据类型</title> </head> <body> <script> var age = 18; alert(age -3); //15 alert(age - "abc") //NaN //打印它的类型却是number alert(typeof age - "abc") //number </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
说明：
任何涉及NaN的操作（NaN+10）都会返回NaN
NaN不与任何值相等，包括NaN本身
isNaN()语法： isNaN(n) - 检测n是否为 “非数值”
说明：
isNaN()对接收到的数值，会先尝试转换为数值，在检测是否为非数值
实例
<!DOCTYPE html> <html> <head> <title>数据类型</title> </head> <body> <script> var age = 18; alert(isNaN(age)) //false </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
掌握数值转换
（1）- Number()
当转换的值是string类型时，返回的则是NaN，因为无法得知string值转换过来是多少
parseInt() 和 parseFloat()则是用来把字符串转换成数值的
实例
<!DOCTYPE html> <html> <head> <title>数据类型</title> </head> <body> <script> var age = "18"; alert(Number(name)) //18 </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
（2）- parseInt()
说明：
会忽略字符串前面的空格，直至找到第一个非空格字符（以数字开头，否则返回NaN）
1、parseInt():转换空字符返回NaN
2、parseInt()这个函数提供两个参数：转换时使用的基数（即多少进制）
实例
<!DOCTYPE html>
<html>
<head>
<title>数据类型</title>
</head>
<body>
<script>
var breadth = parseInt("50px");
alert(breadth) //50
var a = "a5";
alert(parseInt(a)); //NaN
alert(parseInt("0xf",16)); //转换为16进制
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3）- parseFloat()
说明： 从第一个字符开始解析每个字符，直至遇见一个无效的浮点数字符为止（以数字开头，否则返回NaN）
1、除了第一个小数点有效外，其余都无效
实例
<!DOCTYPE html>
<html>
<head>
<title>数据类型</title>
</head>
<body>
<script>
var b = parseFloat("12.2px");
alert(b) //12.2";
var c = parseFloat("0.54aa");
alert(c) //0.54
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
JS中的string和boolean类型：
string类型用于表示由零或多个16为Unicode字符组成的字符序列，简单的说就是字符串。需要用双引号 (“Some ”)或单引号(‘Some ’) 来表示。
既然Number可以利用内置方法进行转换，那字符串固然也是可以的
toString()与String()：
toString：
语法：str.toString()，将str转换为字符串。
说明： 在不清楚值是否为null或undefined的情况下，尽量使用String()函数，它可以将任何类型的值转换为字符串。
实例
<!DOCTYPE html> <html> <head> <title>string</title> </head> <body> <script type="text/javascript"> var id = 23; var idstr = id.toString(); alert(idstr); //23 alert(String(idstr)); //String()用法 </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
这里可能存在疑惑，这个输出不也是数值嘛
但我们可以透过typeof检测就知道是什么类型了
实例
<!DOCTYPE html> <html> <head> <title>string</title> </head> <body> <script type="text/javascript"> var id = 23; var idstr = id.toString(); alert(typeof idstr); //string alert(String(typeof idstr)); //String()用法 //不清楚类型使用 var m; //声明未赋值 alert(String(m)) //undefined </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Boolean： 用于表示***的类型，只有两个值，true（真）、false（假）。
类型转换
除0之外的所有数字，转换为布尔型都为true（真）
除" "之外的所有字符，转换为布尔型都为true
null和undefined转换为布尔型为false
什么是表达式
表达式：将同类型的数据（如常量、变量、函数等），用运算符号按一定的规则连接起来，有意义的式子称为表达式。 （简单的说就是±/*以及比较的运算）
JavaScript操作符的分类
算数操作符
加：+
减：-
乘：*
除：/
取余：%
实例
<!DOCTYPE html> <html> <head> <title>运算</title> </head> <body> <script type="text/javascript"> var num1 = 10,num2 = 5; alert(num1+num2); //15 //最简单的算数运算 </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
重点：
1.递增：++a与a++都是对a进行递增的操作
区别：++a先返回数值，在递增值
实例
<!DOCTYPE html> <html> <head> <title>运算</title> </head> <body> <script type="text/javascript"> var a=1; alert(++a); //2 //先进行递增再返回值（本身为1，++在前，就是先加在返回） </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
a++则是先返回a本身的值，在本身再进行递增
实例
<!DOCTYPE html> <html> <head> <title>运算</title> </head> <body> <script type="text/javascript"> var a=1; alert(a++); //1 //返回自身再进行递增 </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
递减的操作也是一样的
在算数操作符里，还有一个叫隐式转换
实例
<!DOCTYPE html> <html> <head> <title>运算</title> </head> <body> <script type="text/javascript"> var num1 = 10,num2 = "5"; //隐式转换 alert(num1*num2); //50 alert(num1-num2); //5 //如果是字符串呢 var str = "c"; alert(num1 - str) //NaN //当你使用+号时 alert(num1+str); //10+c //这是因为浏览器把+看成了连接符 </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
逻辑操作符
赋值操作符
简单的赋值：=
复合赋值：+=、-=、*=、/=、%=
实例
<!DOCTYPE html> <html> <head> <title>运算</title> </head> <body> <script type="text/javascript"> var a = 5; //a = a +5 麻烦的写法 a+=5; alert(a); //他们的结果都为10，其他都一样操作 var str = "Hello" str+="world" alert(str) //起到连接作用 </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
比较操作符
> < >= <=
== 为 等于（值相等）、===全等（数据类型与值都相等）、!=不等、!==不全等
== 、 ===
实例
<!DOCTYPE html> <html> <head> <title>运算</title> </head> <body> <script type="text/javascript"> var x = 10, y = "10"; z = x ==y; //只比较值 console.log(z) //true z= x === y; //比较值同时也比较类型 console.log(z) //false </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html> <head> <title>运算</title> </head> <body> <script type="text/javascript"> var x = 10,y="10"; //!=为取反操作 z = x != y //false z = x !== y; //true console.log(z) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三元操作符
语法：条件?执行代码1:执行代码2
说明： 可以替代简单的if语句；（效率高且更加简洁）
如果条件成立，执行代码1，否则执行代码2.
实例
<!DOCTYPE html> <html> <head> <title>运算</title> </head> <body> <script type="text/javascript"> var soce = 85; var result = (soce >= 60)?"及格":"不及格"; console.log(result); //及格 //soce>=60为true，返回第一条执行代码。 </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
逻辑操作符
&&：与
只要有一个条件不成立，就会返回false
实例
<!DOCTYPE html> <html> <head> <title>逻辑运算</title> </head> <body> <script type="text/javascript"> var num1 = 10,num2 = 20,num3 = 30; console.log(num1<num2 && num2 ==num3);//false console.log(num2 < num3 && num3 > num1); //true </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
说明： 在有一个操作数不为布尔值得情况，逻辑与操作就一定返回值，此时它遵循下列规则：
如果第一个操作数隐式转换为true后，则返回第二个操作数（当第一个值被转换为布尔值时，就会返回第二个值
实例
<!DOCTYPE html> <html> <head> <title>逻辑运算</title> </head> <body> <script type="text/javascript"> //之前讲过所有的字符串除了""为false，其余都为true，所有数字除0以外，其余全为true var num3 = 30, str = "welcome"; console.log(str && num3) //30（返回第二个操作数） console.log(80 && 50 && "hello"); //hello 多于两位，则返回最后一位 </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
如果第一个操作数隐式转换为false，则返回第一个操作数值
（有一个数为null就返回null，有undefined就返回undefined，有NaN就返回NaN）
实例
<!DOCTYPE html> <html> <head> <title>逻辑运算</title> </head> <body> <script type="text/javascript"> var n =null, num3 = 20; colsole.log(n && num3) //null </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
||：或
只要有一个为true，就返回true。
实例
<!DOCTYPE html> <html> <head> <title>逻辑运算</title> </head> <body> <script type="text/javascript"> console.log(0 || "abc") //abc </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
说明： 在有一个操作数不为布尔值得情况，逻辑与操作就一定返回值，此时它遵循下列规则：
如果第一个操作数隐式转换为true后，则返回第二个操作数（当第一个值被转换为布尔值时，就会返回第二个值）
如果两个操作数null，则返回null
如果两个数为NaN，则则会返回Nan
如果两个数为undefined，则返回undefined
实例
<!DOCTYPE html>
<html>
<head>
<title>逻辑运算</title>
</head>
<body>
<script type="text/javascript">
console.log("hello" || 0); //hello
console.log(99 || 0 || "abc"); //99
console.log("" || 0 || "abc"); //abc
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
!：非
无论操作数是什么数据类型，逻辑非都会返回一个布尔值
实例
<!DOCTYPE html> <html> <head> <title>逻辑运算</title> </head> <body> <script type="text/javascript"> console.log(!false); //true console.log(!88); //false console.log(!0); //true console,log(!null) //true </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
!!同时使用两个逻辑非操作符时：
第一个逻辑非操作会基于无论什么操作数返回一个布尔值，
第二个逻辑非则对改布尔值求反
实例
<!DOCTYPE html> <html> <head> <title>逻辑运算</title> </head> <body> <script type="text/javascript"> console.log(!!false); //false console.log(!!""); //false </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
