js书写位置
由于在写css样式时使用的时双引号,所以我们在写js代码时建议使用单引号(‘’)!
行内式
<input type="button" value="点我" onclick="alert('hello world')" />
嵌入式
在head里面写
<script>
alert('hello world');
</script>
外部式
新建一个.js文件,再引入!
// 在head引入
<script src="文件名.js"></script>
声明变量
var age; var number = ; // 声明变量时并赋值 var userName, userPassword; //可以同时声明多个变量 var age = , name = 'kay', sex = 'boy'; //声明多个变量的同时可以赋值
变量名命名规则和规范:
由字母,数字,下划线,$符号组成,不能以数字开头!
不能使用关键字和保留字,如:for和while!
区分大小写,变量名的命令必须要有意义性!
建议使用驼峰命名法,首字母小写,后面单词的首字母要大写 ,如userName。
动手实验之交换两个变量的值
var number1 = ; var number2 = ; 第一种:借助第三个变量 var tmp; tmp = number1; number1 = number2; number2 = tmp; console.log(number1, number2); //输出到浏览器的控制台(就是chrome>>f12>>Console) 第二种:加减法(两个变量值是数字才行) number1 = number1 + number2; number2 = number1 - number2; number1 = number1 - number2; console.log(number1, number2);
数据类型:基本数据类型
Number:
在c,java,c# 声明变量的时候就确定了数据类型。
如:int age = 18;
但在javascript中声明变量的时候并没有确定变量的数据类型!
var age = 18;
age = 'kay';
代码执行的过程中,会确定变量的数据类型。
进制:
十进制: 0 - 9
var num = 10; // 结果10
十六进制: 0 - 9加A - F
var num = 0x10; //结果16
var num = 0xAB; //171
八进制: 0 - 7
var num = 010; //8
浮点数:浮点数的精度问题
var n = 5e-324; //科学计数法 5乘以10的324次方
浮点数值的最高精度是17为小数,但在进行算术计算时其精确度远远不如整数
var reault = 0.1 + 0.2; // 结果不是0.3,而是:0.30000000000000004;
不要判断两个浮点数是否相等!
数值范围:
最小值:Number.MIN_VALUE; //这个值为:5e-324
最大值:Number.MAX_VALUE; //这个值为:1.7976931348623157e+308
无穷大:Infinity 如5除以0结果为Infinity
无穷小:-Infinity 如5除以0结果为-Infinity
数值判断:
NaN: not a number //NaN与任何值都不相等,包括它本身!
如: 5乘以字符串'abc'结果为NaN
isNaN: is not a number //结果true和false
如:isNaN(123) 结果为false。 //判断123不是数字则为true,是数字则为false!
String类型
转移符:
\n 换行 \f 换页
\t 制表符 \\ 反斜杠
\b 空格 \r 回车
\' 单引号 \" 双引号
\xnn 以十六进制代码nn表示一个字符(其中n为0-F)。如:\x41表示"A"。
\unnnn 以十六进制代码nnnn表示一个Unicode字符(其中n为0-F)。如:\u03a3表示希腊字符"Σ"。
获取字符串的长度:
var str = 'ab\\cd';
console.log(str.length); 结果为:5
字符串拼接: 使用加号(+)拼接
'a' + 'b' 结果 ab
‘a’ + 123 结果a123
'male:' + true 结果male:true
1,两边只要有一个是字符串,那么加号(+)就可以把它们拼接在一起。
2,两边都是数字时,就是相加计算。
Boolean类型
Boolean字面量:true和false,区分大小写
计算机内部存储:true为1,false为0
Undefined和Null
1,Undefined表示一个声明了没有赋值的变量,变量只声明的时候默认是Undefined。
2,Null表示一个空,变量的值如果想为null,必须手动设置。
获取变量的数据类型:typeof
var name = 'kay';
console.log(typeof name); //string
注释
单行注释:描述下一行代码的作用是什么
// 这是一个变量
var name = 'kay';
多行注释:描述一些函数...
/*
描述内容
*/
数据类型转换
转换成字符串类型 .toString() String()
var age = ; var name = 'kay'; var isRight = true; var a; var b = null; // 第一种方法.toString() undefined和null不能转换。这种用的比较多 console.log(typeof age.toString()); // string console.log(typeof isRight.toString()); // string //console.log(typeof a.toString()); //报错Uncaught TypeError: Cannot read property 'toString' of undefined //console.log(typeof b.toString()); //报错Uncaught TypeError: Cannot read property 'toString' of null // 第二种方法String() 都可以转换 console.log(typeof String(a)); // string console.log(typeof String(b)); // string //第三种字符串拼接:空字符串 都可以转换 console.log(typeof (a + '')); // string 由于代码是从上到下,从左到右执行,所以加括号可以优先执行, console.log(typeof a + '');如果不加括号,代码会先返回表达式的的结果,再进行拼接!
转换成数值类型 Number() parseInt() parseFloat() +,- 0
var n1 = ''; var n2 = '123kay'; var n3 = '14.13.15'; var isRight = true; // 第一种 Number():如果转换的字符串中包含有非数值字符,返回NaN,可以转换布尔值 console.log(Number(n1)); // console.log(Number(n2)); // NaN console.log(Number(n3)); // NaN console.log(Number(isRight)) // 1 之前说过在计算机内部true为1,false为0 //第二种 parseInt():如果第一个字符是数字会解析到非数字就结束,并把数字返回过来,如果第一个非数字返回NaN console.log(parseInt(n2)); // console.log(parseInt(n3)); // console.log(parseInt(isRight)); // NaN //第三种 parseFloat():与parseInt()很相似,不同的是会解析到第二个点(.)就结束,并把值返回 console.log(parseFloat(isRight)); // NaN console.log(parseFloat(n3)); // 14.13 var n4 = '14.k13.15'; var n5 = '14.113a.15'; console.log(parseFloat(n4)); // console.log(parseFloat(n5)); // 14.113 // 第四种方法 +,- 0等运算 可以转换布尔值 var n1 = ''; var n2 = '123kay'; var isRight = true; console.log(+ n1); // 666 console.log(+ n2); // NaN console.log(+ isRight); // console.log(n1 - ); // 666 减号(-)会先转换n1为数值类型再进行运算
转换成Boolean类型 Boolean() 记住只有以下五种会转换为false
var a; var b = null; var c = ''; var d = ; var e = NaN; // 因为它们都只有一个值所以只能转换为false,其它都可以转换为true console.log(Boolean(a)); // false console.log(Boolean(b)); // false console.log(Boolean(c)); // false console.log(Boolean(d)); // false console.log(Boolean(e)); // false
操作符(也叫运算符)operator
表达式的组成是由,操作数与操作符,它们会有一个结果!
算术运算符
+ - * / 取余%
console.log(5 / 0); // Infinity
console.log(5 % 0); // NaN
一元运算符
一元运算符,只有一个操作数的运算符。
二元运算符,两个操作数的运算符。
++ // 表示自身+1
-- // 自身-1
++前置和--前置:先执行自身+1或-1,再返回表达式的结果
var n1 = 1;
console.log(++ n1); // 2
console.log(++ n1); // 3
console.log(-- n1); // 2
后置++和后置--:先返回表达式的结果,再执行自身+1或-1
var n2 = 1;
console.log(n2 ++); // 1
console.log(n2); //2
console.log(n2 --); //2
console.log(n2); //1
逻辑运算符(也叫布尔运算符)
var a = true;
var b = false;
&& 与 当两个操作数为true,结果才为true
console.log(a && a); //true
console.log(a && b); //false
|| 或 当两个操作数为false,结果才为false,否则结果是true
console.log(b || b); // false
console.log(a || b); // true
! 非 取反
console.log(! a); // false
console.log(! b); // true
关系运算符(也叫比较运算符) 返回布尔类型的结果true/false
< 小于
>大于
<=小于等于
>=大于等于
var n1 = 3;
var n2 = 8;
console.log(n1 < n2); // true
相等运算符 返回布尔类型的结果true/false
== 等于
!= 不等于
=== 全等
!== 全不等
赋值运算符
=
+= -= *= /= %=
var n = 1;
n = n + 1; // 可简写为 n += 1;
运算符的优先级
1,括号 ()
2,一元运算符 ++ -- !
3,算术运算符 * / % + -
4,关系运算符 > >= < <=
5,相等运算符 == != === !==
6,逻辑运算符 先&& 后||
7,赋值运算符
练习1:
4 >= 6 || 'kay' != 'superman' && !(12 * 2 == 144) && true
true
解析过程:
//4 >= 6 || 'kay' != 'superman' && !(12 * 2 == 144) && true // 解析过程 // 先把用括号分开,因为&&和||它们它们优先级最低,所以它们是最后运算
//(4 >= 6) || ('kay' != 'superman') && (!(12 * 2 == 144)) && true // 找优先级最高的()
//(4 >= 6) || ('kay' != 'superman') && (!false) && true
//(4 >= 6) || ('kay' != 'superman') && (true) && true // 剩下只有关系运算符高一点
//(false) || ('kay' != 'superman') && (true) && true // 相等运算符
//(false) || (true) && (true) && true // 逻辑运算符是先&&后||。由于程序是从上到下,从左到右执行的
//(false) || true && true
//(false) || true
// true
练习2:
var n = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'
解析过程:
// 5 == num / 2 && (2 + 2 * num).toString() === '22' // (5 == num / 2) && ((2 + 2 * num).toString() === '22') // (5 == num / 2) && (22.toString() === '22')
// (5 == num / 2) && ('22' === '22') // (5 == 5) && ('22' === '22')
// (true) && ('22' === '22')
// (true) && (true) // true
布尔类型的隐式转换
什么是显示类型转换:
之前用到的.toString(),String(),Number(),parseInt(),parseFloat(),
Boolean()这些都是显示类型转换。
什么是隐式类型转换:
就是不调用数据类型转换的方法,它会自动转换为布尔类型。