1.js历史
1995年 网景公司 浏览器
JavaScript{
语法
解析器
}
IE JavaScript{
语法
解析器
}
ECAMScript
2. JavaScript
ECAMScript 语法
DOM
BOM
3. JS特点
1) 解释型语言
非编译型,运行时直接用源文件即可
2) 弱类型语言
变量的类型由其值来决定
3) 面向过程的语言
4) 顺序解析执行的
简单语法
1) js如何引入到html中
嵌入在标签内部
嵌入在head
外部引入
2) 注释
//
/*
多行
*/
3) 变量
var 声明局部变量
声明
初始化
使用
var a;
a = 10;
a = true;
var a = false;
console.log(a); //undefined
console.log(b); //报错- 大小写区分
操作符:
var a = true;
var result = typeof a;// boolean
Typeof
js区分大小写
var demo = get(“ngHelloWorld”);
html不区分大小写
书名://head first HTML/CSS head first HTML5 标识符
变量名
1)只能由字母,数字,下划线, 组成2)只能由字母,下划线, 开头
3)不能为关键字(保留字)
命名时候采用驼峰式 aaaBbbCccDdd数据类型
弱类型语言,变量的数据类型由其值来决定1)基本数据类型
undefined
var a;
var a = undefined;
a为undefined类型
null
var a = null;
a为null类型 typeof a(object)
number
整数
十进制
八进制 0
十六进制 0x
浮点数
尽可能将浮点数转换为整数来保存,占用空间较小
var a = 1.0;
a //1
var a = 1.;
a //1
var a = 0x123fff;
a为number类型
boolean
true,false
string
“” ”
var a = ‘1’;
var b = ‘true’;
a,b都为字符串类型2)引用数据类型(复杂数据类型)
var person = new Object();
person.name = “terry”;
person.age=12;
person.gender=”男”;
=》
var person = {
name:”terry”,
age :12,
gender :”男”
}
person.toString();
console.log(person.name);任何对象都继承自Object,Object中所有的方法和属性在子对象都可以访问 toString(); 返回该对象的字符串表示 valueOf(); 返回该对象的字符串,数值,布尔值的表示。 张起灵 张家人 Object
检测方法
typeof param 检测param数据类型
isFinite(param) 检测param是否在最大值与最小值之间
isNaN(param) 检测param是否是 不是数值类型
当param不是数值返回true
当param是数值返回false- 大小写区分
例子:window.isNaN()
a{
var 饭 = b.买饭(10元)
}
b
1.类型转换
转换函数
Boolean()
String()
Number()
1)将其他数据类型转换为boolean
Boolean()
var a ;
console.log(a);
var result = Boolean(a);
console.log(result);
undefined->false;
null->false;
var a="" ->非空字符串为true;空字符串为false;(空格为一个字符串-》true)
var = 0;->非0数值为true,0为false;
2)将其他数据类型转换为string
String()
undefined->"undefined"
null->"null"
101->"101"
true->"true"
false->"false"
3)将其他数据类型转换为number
Number();
字符串中:
1)整数123,十六进制0x15,小数,科学计数,正负 空格均原样输出
可以为正负值,可以有空格
2)八进制,会忽略前导0输出
3)有其他字符,+-在后 NaN (+-在前可以转换)
undefined -> NaN
null ->0
true ->1
false ->0
parseInt();
将字符串转换Int(整型)
如果第一个字符是数字(0 0x + -),继续向后解析,直到遇到第一个非数值字符,停止解析,返回前面的数值部分
var a; //NaN
var a=null; //NaN
var a=false; //NaN
parseInt(true); //NaN
parseInt("true"); //NaN
parseFloat();
与parseInt类似
var a ="011"
console.log(a);
var result = parseFloat(a);
console.log(result);
//对小数的一个处理
2.操作符
表达式 = 操作符+操作数
var a = 3;
++a;
适用于任意类型值的运算
1) 一元运算符
2.返回值【Number】
3.如果操作数为其他数据类型,先转换为Number再运算
++
var a = true;
console.log(++a);
--
前置 先自增/自减,再参与其他运算
后置 先参与其他运算,自增/自减
var a = 3;
console.log(++a);//4
console.log(a); //4
console.log(a++);//4
console.log(a); //5
+ console.log((a++)+1);//5+1=6
console.log(a);//5+1=6
console.log((++a)+1);//7
console.log(a);//6
var a = true;
+a
=>Number(a);
-
-(-a)
=>Number(a);
2)逻辑运算符
1. 逻辑非 !
1)返回值为【布尔类型】
2)如果操作数是其他数据类型,将操作数转换Boolean,然后在取反
var a = true;
!a;
var a = false;
!!a;
=》Boolean(a)
二元运算符 2. 逻辑与 &&(短路运算符)
1) 两个操作数都为boolean返回值为【Boolean】
2) 如果有一个操作数不为boolean,返回值就不一定 由设定的值决定
3) 有假则假,同真才真
4) 如果第一个操作数是负面数值(可以转换为false数值),返回值为该数值(无需判断后者)
5) 如果第一个操作数是正面数值(可以转换为true数值),返回第二个数值(看第二个值)
var a = true;
var b = false;
var result =a && b; 解析器解析a,a为true,继续解析b 决定权在b
var result =b && a;解析器解析b,b为false,直接结束
3. 逻辑或 ||(短路运算符)
1) 两个操作数都为boolean返回值为【Boolean】
2) 如果有一个操作数不为boolean,返回值就不一定
3) 有真则真,同假才假
4) 如果第一个操作数是负面数值(可以转换为false的数值),返回值为第二个数值
5) 如果第一个操作数是正面数值(可以转换为true数值),返回第一个数值(直接返回无需判断后者)
var a;->false
var b = false;
var result =a || b; ->
3)加性运算符
前提: 1.操作数不能为字符串或者对象(字符串,对象太复杂了)
2.返回值为【数值类型】
3.当操作数不为数值类型,将其他数据类型(
null,undefined,boolean)转换为数值类型再进行运算
+
var a = null;->0
var b = true;->1
var result = a+b;=>1
var a;=>NaN (任何与undefined相加均为NaN)
-
4)字符串拼接 +
1)操作数中有一个为string
2)返回值为【string】
3)其他数据类型先转换为string,然后再进行拼接
5)乘性运算符
1. 返回值为【number】
2. 如果一个操作数为其他数据类型,先转换Number再进行运算
* 乘
/ 除法 undefined-》NaN
true/2
% 取余
6)比较运算符 返回值为【Boolean】 转换为数值unmber
1.两个字符串比较,比较的字符序列 例如:a<b<c<d```x<y<z 30>1001 21>11 12<13 (数字在前 字符在后 字符更大)
2.如果一个操作数为数值,另外一个为非数值,先将非数值转换为数值,再进行比较
3(一般不考虑).如果两个操作数都为 boolean,null,undefined,先转换为数值,再进行比较,返回boolean值
>
>=
<=
<
js unicode编码
7)相等运算符
== !=
1.如果两个操作数都为字符串,比较字符序列
2.如果两个操作数都为数值类型,比较值的是否相等
3.如果两个操作数都是对象,比较的对象的引用
var a = {name:"terry",age:12}
a = 1001;//引用地址为1001
var b = {name:"terry",age:12}
b = 1002;//引用地址为1002
a == b//false,比较的是引用地址
var c = a;
c == a//true
类型转换
01) 其他数据类型到Boolean类型转换
通过Boolean() 函数转换【Boolean true false】 String 非空字符串 "" Number 任何非0 0和NaN Object 任何对象 null Undefined n/a undefined (n/a not applicable 不适用) 例如: Boolean(""); //false Boolean(0); //false Boolean(NaN); //false Boolean(null) //false Boolean(undefined) //false Boolean("briup"); //true Boolean(1); //true
02) 其他数据类型到数值类型转换
1.Number()
1) 如果转换的值是null,undefined,boolean,number
Number(true); //1
Number(false); //0
Number(null); //0
Number(undefined); //NaN
Number(10); //10 如果是数字值,原样输出2) 如果是字符串: Number("123"); //如果仅包含数值,转换为对应的数值 Number("234.1");//解析为对应的小数 Number("+12.1");//首位为符号位,其余为为数值,转换为对应的数值 NUmber("1+2.3");//NaN 符号位出现在其他位置,解析为NaN Number("0xa"); //如果仅包含十六进制格式,转为为对应的十进制的值 Number("010"); //【注意!】不会当做八进制被解析,结果为10 Number(""); //空字符串被转换为0 Number("123ac");//包含其他字符: NaN Number(" 12"); //12 2.parseInt() 1) 如果转换的值是null,undefined,boolean,number parseInt(true); //NaN parseInt(false); //NaN parseInt(null); //NaN parseInt(undefined);//NaN parseInt(10); //10 如果是整数值,原样输出 parseInt(10.3); //10 如果是小数,舍去小数点一级后面的内容 2) 如果是字符串: parseInt("123"); //123;如果仅包含数值,转换为对应的数值 parseInt("234.1");//234;小数点后面的数值省略 parseInt("+12.1");//12; 首位为符号位,其余为为数值,转换为整数 parseInt("0xa"); //10; 如果仅包含十六进制格式,转为为对应的十进制的值 parseInt("010"); //10; 【注意!】不会当做八进制被解析,结果为10 parseInt(""); //NaN;空字符串被转换为NaN parseInt("1+2.3");//1; 如果首位为数值,依次向后解析,找到连续的数值,直到遇到第一个非数值的,将之前获取的数值转换为Number返回 parseInt("123ac");//123; 3.parseFloat() 与parseInt() 类似,但是也有不同: 1.字符串中的第一个小数点是有效的,而第二个小数点则无效其后的内容会被省略 2.始终忽略前导0 parseFloat("22.3.4") //22.3 parseFloat("022.34"); //22.34 3.不能解析0x(十六进制)
03) 其他数据类型到字符串类型转换
1. toString()函数
默认情况下,toString()是以十进制格式返回数值的字符串表示,通过传递参数,可以输入以二进制,八进制,十六进制乃至任意有效进制格式的字符串值
var num = 10;
num.toString(); “10”
num.toString(2); “1010”
num.toString(8); “12”
num.toString(16); “a”
但是null ,undefined 没有toString() 方法
null.toString() //报错 TypeError: null has no properties
undefined.toString(); //报错 TypeError: undefined has no properties
2. String() 构造函数
String(null) “null”
String(undefined); “undefined”
2,操作符
01) 一元操作符
++,–,+,-操作符应用任何类型数值都返回一个【数值类型】,先将任意类型的值转换为Number然后进行运算(通过Number()方法进行转换)
1.递增 ++
var a = “11”;
1+a++;
1+ ++a;
前置:操作该变量之前进行递增或者递减操作
后置:操作该变量之后进行递增或者递减操作
对任意数据类型的操作数都适用 ,使用前先将其转换为数字(Number()),然后再进行运算,在应用于对象的时候,优先先调用对象的valueOf方法,以取得一个可供操作的值,如果子类对象仅重写了toString(),调用该方法。
2.递减 –
前置:操作该变量之前进行递增或者递减操作
后置:操作该变量之后进行递增或者递减操作
对任意数据类型的操作数都适用,使用前先将其转换为数字,然后再进行运算在应用于对象的时候,先调用对象的valueOf方法,以取得一个可供操作的值,如果子类对象仅重写了toString(),调用该方法。
3.加 +
相当于调用Number();
var a = “12”
+a ; // 12 相当于调用了Number(“12”)
4.减 -
将一元减应用于数值时,数值会变成负数。
将一元减应用于非数值时,遵循与一元加操作符相同的规则,最后将得到的数值转化为负数
02) 逻辑操作符, 非(NOT)
逻辑非 !
该操作符应用任何类型数值都返回一个【布尔值】。先将任意类型的数值转换为Boolean,然后取反,
!a ==> !Boolean(a)
!0 //true
!"" //true
!NaN //true
!false //true
连用两次逻辑非 ,就可以将任意数据类型转化为Boolean类型,!!a ==> Boolean(a)
!!"" //false
03) 逻辑与 && (同真才真,有假则假) 也被称为短路语句
可应用于任意数值。如果有一个操作数不是布尔类型,逻辑与就不一定返回boolean类型
1.如果第一个操作数是
null,NaN,undefined,false,0,""可被转换为false的值的时候返回该值
2.如果第一个数其他,返回第二个数
var s1 = 8;
var s2 = "briup";
var s3 = "";
var result = s1 && s2; //briup
var result2 = s3 && s2; //空字符串
04) 逻辑或 ||(有真则真,同假才假)
false ||
如果两个操作数都是null,NaN,undefined,false,0,""可被转换为false的值的时候返回该值
如果第一个操作数是null,NaN,undefined,false,0,"" 则返回第二个操作数
05) 加性操作符
1. 加法 +
m + n
1) 当m,n不为String,Object类型的时候,先将m,n转换为Number类型,然后再进行计算
true + false; //1;Number(true)+Number(false);
true + 1; //2;Number(true) + 1
null + undefined; //NaN;Number(undefined) -> NaN
2) 当m,n有一个为String,无论另一个操作数为何(但不为对象)都要转换为String,然后再进行拼接
"1" + true; // 1true
"1" + undefined;// 1undefined
"1" + 1; // 11
3) 当m,n 有一个为对象,如果该对象既重写toString,又重写了valueOf方法,先调用valueOf方法获取返回值,将该返回值和另外一个操作数进行运算。如果该对象没有重写valueOf方法,将调用toString方法获取返回值,将该返回值和另外一个操作数进行运算。
var o = {
name:"briup",
valueOf:function(){
return "1";
}
}
o+1; //2;o+1
2. 减法 -
返回值为【数值类型】。无论操作数为任何类型,先将其使用Number()转换器转换为Number类型,然后再计算。
true - 1; //0; 1-1
null - true; //-1 ; 0-1
1 - undefined //NaN
var o = {
name:"briup",
valueOf:function(){
return 1;
}
}
o-1; //0; 1-1
06) 乘性操作符
返回值为【数值类型】当操作数为非数值的时候执行自动的类型转化Number()
1. 乘法 *
如果两个数都是数值,执行常规的乘法计算
如果一个操作数是NaN,结果为NaN
超过数值范围返回Infinity
如果有一个操作数不是数值,则先调用Number()将其转换为数值。
2. 除法 /
如果一个操作数是NaN,结果为NaN (0/0 ; NaN)
一个非0值除0 Infinity
如果有一个操作数不是数值,则先调用Number()将其转换为数值。
var s1 = 5;
var s2 = 2;
var result = s1/s2; //2.5
3. 取余 %
如果两个数都是数值,执行常规的取余计算
如果一个操作数是NaN,结果为NaN(任意数%0 ; NaN)
如果有一个操作数不是数值,则先调用Number()将其转换为数值。
07) 关系操作符
< > <= >= ,返回一个【Boolean】值
1.如果两个操作数是字符串,比较字符串中对应位置的每个字符的字符编码值
"a">"b" //false
"1">"a" //false
2.如果一个操作数是数值,将另外一个操作数也转换为数值进行比较
"3">1; //true
3>true; //true 3>Number(true)
3>undefined; //false Number(undefined)=NaN ;任何数和NaN比较结果都为false
3.如果一个操作数是对象,先调用valueOf(),再调用toString()将返回值与另外一个操作数比较,如果没有重写toString() valueOf()则始终为false
var o = {
name:"briup",
valueOf:function(){
return "13";
}
}
o>2 // true ; "13">2
08) 相等操作符,返回【Boolean】
1.相等和不相等 ==, != (先转换在比较)
1.如果两个操作数都为字符串,比较字符序列
2.如果两个操作数都为数值类型,比较值的是否相等
3.如果两个操作数都是对象,比较的对象的引用
4)null == undefined //true
5)NaN与任何值(包括NaN)相等比较结果为false,不等结果为true.
6)如果一个操作数为number类型,另外一个操作数为undefined,null,boolean,string之一,先将这些数据类型转换为数值,再进行比较
2.全等和不全等
仅比较不转换,先比较两个数所属的数据类型,如果类型不同则不同,如果类型相同,再继续比较两个数的值
console.log("55" == 55); true
console.log("55" === 55);false
null == undifined; //true null派生自undifined
null === undifined; //false
09) 三目运算符 ? :
variable = boolean_expression ? true_value : false_value;
如果boolean_expression为true,将true_value赋给variable,否则将false_value赋给variable
例如:求任意两个数之间最大值
function max(m,n){
return m>n?m:n; //如果m>n为true返回m,如果m>n为false,返回n
}
10) 赋值运算符 =
将右侧的值赋给左侧的变量
可以和其他算术运算符连用 *= /= %= += -=
var a = 4;
a *= 3; //=> a = a*3;
11) 逗号操作符
可以在一条语句中执行多个操作
var num1=1,num2 = 2, num3 = 3;