JS基础1~25课
视频教学
一、JS简介
二、JS的Hello World
<script>
alert("弹出一个内容");
document.write("在页面输出一个内容");
console.log("向控制台输出一个内容,页面上不显示");
</script>
三、JS编写位置
用于引入外部JS文件
<script src="./JS/JS.js"></script>
注:一旦引入外部文件,script标签下不再可以编写代码。如果需要可以再创建一个script标签用于编写内部代码。
<button onclick="alert('讨厌,你摸我干嘛');">我是达达,摸我屁屁</button>
<a href="javascript:alert('你还摸!!');">我是达达,摸我屁屁</a>
四、JS基本语法
1.JS中严格区分大小写
2.JS中每一条语句以英文分号 ( ; ) 结尾
3.JS中会忽略多个空格和换行
五、常量和变量
常量可以直接使用,但是我们一般不直接使用常量
变量可以用来保存常量并对其进行描述,而且变量的值可以随意改变,变量更适合我们使用
在JS中使用var关键字来声明一个变量
<script>
var a;
a = 100;
alert(a);
</script>
六、标识符
1.标识符可以包含字母、数字、下划线_、$
2.不能以数字开头
3.标识符不能是JS中的关键字或保留字
4.标识符一般使用驼峰命名法(首字母小写,每个单词的开头字母大写,其余字母小写,如helloWorld)
七、字符串
JS中有六种数据类型
基本数据类型:
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义引用数据类型:
Object 对象
String字符串需要用引号引起来
使用双引号和单引号都行,双引号里面不能放双引号,单引号里面不能放单引号,单引号里面可以放双引号。var str = "Hello"; alert(str);
在字符串中我们可以使用 \ 作为转义字符,当表示一些特殊符号时可以使用 \ 进行转义,当表示一些特殊符号时可以使用 \ 进行转义
var a = "达\"达帅\"飞了" ; document.write(a);
var a = "达达\n帅\t飞了" ;
alert(a)
var a = "达达<br>帅\t\t飞了" ;
document.write(a)
document.write(typeof a);
注:document.write中的换行需要用<br>来完成
var a = undefined;
document.write(a);
document.write("</br>");
document.write(typeof a);
八、Number
JS中所有数值都是Number类型,包括整数和浮点数(小数)
可以用 typeof 检查一个变量的类型
var a = "123";
var b = 123;
document.write(typeof a);
document.write(typeof b);
document.write(Number.MAX_VALUE); → 输出的最大值1.7976931348623157e+308
大于这个值显示为 ±Infinity
NaN是一个特殊的数字,表示Not A Number
var b = Number.MIN_VALUE; → 输出的最小值5e-324 (大于0)
减去任何数都等于 0 - 任何数
如果使用JS进行浮点数计算,可能会得到一个不精确的结果,所以千万不要用JS进行对精确度比较高的计算。
九、布尔值
布尔值只有两个值 true / false
var a = true;
document.write(a);
document.write(typeof a);
十、Null和Undefined
Null的值只有一个,就是null。
null专门来表示空对象。
检查null值时,会返回object
var a = null;
document.write(a);
document.write(typeof a);
Undefined的值只有一个,就是undefined。
当声明一个变量,但未给变量赋值时,它的值就是undefined(未定义)。
检查undefined时,会返回undefined
var a ;
document.write(a);
document.write(typeof a);
十一、强制类型转换-String
方式一:调用被转换数据类型的 toString( ) 方法,
该方法不会影响到原变量,它会将转换的结果返回。
注:调用xxx的yyy( ) 方法,就是xxx.yyy( )
注:null和undefined这两个值没有tostring( ) 方法,如果调用他们的方法会报错。
var a = 123;
var b = a.toString()
document.write(a);
document.write("</br>");
document.write(typeof a);
document.write(typeof b);
方式二:调用String( ) 函数,并将被转换的数据作为参数传递给函数。
注:将null直接转换为“null”,将undefined直接转换为“undefined”。
var a = undefined;
b = String(a);
document.write(a);
document.write("</br>");
document.write(typeof a);
document.write(typeof b);
十二、强制类型转换-Number
调用Number( ) 函数来将a转换为Number类型
使用Number( ) 函数
字符串 → 数字
1.如果是纯数字的字符串,则将其直接转换为数字。
2.如果字符串中有非数字的内容,则将其转换为NaN。
3.如果字符串是一个空串或者一个全是空格的字符串,则转换为0.
a = "123ab"; document.write(typeof a); document.write("</br>"); b = Number(a); document.write(a); document.write("</br>"); document.write(b); document.write("</br>"); document.write(typeof a); document.write("</br>"); document.write(typeof b);
布尔值 → 数字
1.true转成1
2.false转成0
a = true; document.write(typeof a); b = Number(a); document.write(a); document.write("</br>"); document.write(b); document.write("</br>"); document.write(typeof a); document.write("</br>"); document.write(typeof b);
Null → 数字
a = Number(a);
a = 0
undefined → 数字
a = "undefined"; document.write(typeof a); document.write("</br>"); b = Number(a); document.write(a); document.write("</br>"); document.write(b); document.write("</br>"); document.write(typeof a); document.write("</br>"); document.write(typeof b);
转换方式二:
这种方式专门用于转换字符串
parseInt( ) 把一个字符串转换为一个整数,将字符串中所有整数取出来,然后转换为Number
注:从第一个数字开始,读到不是数字的字符停止,后面的不再读取,有局限性。
parseFloat( ) 把一个字符串转换为一个浮点数,可以读取小数,其余与parseInt( ) 一样
a = "123px";
document.write(typeof a);
document.write("</br>");
b = parseInt(a);
document.write(a);
document.write("</br>");
document.write(b);
document.write("</br>");
document.write(typeof a);
document.write("</br>");
document.write(typeof b);
十三、其他进制的数字
十六进制的数字以 0x 开头,如:0x10 = 16 , 0xff = 255
八进制的数字以 0 开头, 如:070 = 56
二进制的数字以 0b 开头(但不是所有浏览器都支持使用二进制),如0b10 = 2
注:例如“070”这种字符串,一些浏览器按照十进制解析,一些按照八进制解析。
b = parseInt(a,8); → 令其按照八进制解析
十四、转换为Boolean
使用Boolean( ) 函教
数字 → 布尔
除了0和NaN,其余都是true
字符串 → 布尔
除了空串,其余都是true
null 和 undefine 都转换为false
有对象转换为true
十五、算数运算符
运算符又叫操作符
通过运算符可以对一个或多个值进行运算,并获取运算结果
比如: typeof就是运算符,可以来获得一个值的类型
+加法
当对非Number类型的值进行运算时,会将这些值转换为Number然后再运算
如果对两个字符串进行加法运算,则会做拼串,会将两个字符串拼接为一个字符串,并返回
任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作我们可以利用这一特点,来将一个任意的数据类型转换为String
我们只需要为任意的数据类型+一个"”即可将其转换为String
这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String()函数
a = 123; document.write("a = " + a);
-减法
和加法大体相同
a = 100 - "1";
a = 100 - "da";
*乘法 / 除法
a = 40 / "8";
a = 40 / undefined;
a = 40 * null;
任何值做-*/运算时都会自动转换为Number
我们可以利用这一特点做隐式的类型转换
可以通过为一个值-1 * 1 / 1来将其转换为Number
原理和Number()函数一样,使用起来更加简单
%取余
9 % 4 = 1
十六、一元运算符
+正号 不会对数字产生影响
-负号 对数字取反数
对于非Number值会先转换为Number值,再运算
十七、自增和自减
通过自增可以使变量在自身基础上加1
一个变量自增之后,原变量的值会立即加1
a++ = a + 1
++a = a + 1
a++的值等于原变量的值(自增前的值)
++a的值等于原变量自增后的值
var a = 10;
document.write(a);
a++;
document.write(a);
a++;
document.write(a);
a++;
document.write(a);
var a = 10;
document.write(a);
document.write(a++);
document.write(a++);
document.write(a++);
var a = 10;
document.write(a);
document.write(++a);
document.write(++a);
document.write(++a);
自减和自增一样
十八、自增练习
十九、逻辑运算符
JS中有三种逻辑运算符
! 非
对一个布尔值进行取反
var a = true; a = !a; document.write("a = " +a);
对一个非布尔值进行取反,会将其先转换为布尔值再取反
可以用 ! ! x 连续取反两次来将其他数据类型转换为布尔值。
&& 与
只要有false就返回false
var a = true && true; var b = true && false; var c = false && false; document.write("a = " +a); document.write("</br>"); document.write("b = " +b); document.write("</br>"); document.write("c = " +c);
第一个值为true会检查第二个值,第一个值是false不会检查第二个值。
true && alert("叮");
|| 或
只要有true就返回true
第一个值为false会检查第二个值,第一个值是true不会检查第二个值。
二十、非布尔值的与或计算
会先将其转换为布尔值再进行运算
与运算:
- 如果两个值都为true,则返回后面值
- 如果有false则返回false
- 如果两个false则返回前面值
或运算:
和与运算相反。
二十一、赋值运算符
a = a + 5
a += 5
a = a * 5
a *= 5
二十二、关系运算符
通过关系运算符比较两个值之间的大小关系
如果关系成立则返回true,否则返回false
非数值的情况:
先将其转换为数字,再进行比较
当两个字符串进行比较时,比较两个值的unicod编码。
比较字符编码时一位一位进行比较
如果两位一样,则比较下一位,所以借用它来对英文进行排序
比较中文时没有意义
如果比较两个字符串型的数字,可能会得到不能预期的结果。
注意:在比较两个字符串型的数字时,一定一定一定要转型
二十三、Unicode编码
在字符串中使用转义字符输出Unicode编码(十六进制)
\u四位编码
\u0011
在网页中使用Unicode编码 → &#编码(十进制)
二十四、相等运算符
相等运算符用于比较两个值是否相等,相等就是true,不等就是false
使用==来做相等运算
var a = 10;
document.write(a == 3);
可以通过isNaN( ) 判断一个值是不是NaN
var a = NaN;
document.write(isNaN(a));
二十五、条件运算符
条件运算符也叫三元运算符
语法:
条件表达式?语句1:语句2;
条件运算符在执行时,首先对条件表达式进行求值,
如果该值为true,则执行语句1,并返回执行结果。
如果该值为false,则执行语句2,并返回执行结果。
var a = 30;
var b = 20;
var max = a < b ? b : a;
alert("max = " +max);
如果条件的表达式的求值结果是一个非布尔值,会将其转换为布尔值,然后再运算。
二十六、运算符的优先级
使用 , 可以分割多个语句,一般可以在声明多个变量时使用
var a = 30; b = 20; c = 40;
&&与运算的优先级高
var a = 1 || 2 && 3; //输出1
在表中越靠上优先级越高,优先级越高越优先计算,
二十七、代码块
我们的程序是由一条一条语句构成的
在JS中可以使用 { } 来为语句进行分组,它们要么都执行,要么都不执行。
注:JS中的代码块,只具有分组的的作用,没有其他的用途
二十八、if语句(一)
通过流程控制语句可以控制程序执行流程,使程序根据一定条件执行。
条件判断语句:
if(true)
alert("ang");
if语句只能控制紧随其后的那个语句,如果希望if语句可以控制多个语句可以把它们放到代码块中。
注:在开发中尽量写上代码块。
var a = 15;
if(a > 10 && a <= 20){
alert("a大于10且小于等于20");
}
二十九、if语句(二)
注:该语句中,只会有一个代码块被执行,一旦代码块执行了,则直接结束语句。
var a = 70;
if(a < 18){
alert("未成年");
}else if(a < 30){
alert("青年");
}else if(a < 60){
alert("中年");
}else{
alert("老年");
}
三十、练习
var a = 40;
var b = typeof a;
alert(b);
if(b == "number"){
alert("输入的是数字");
}else if(b == "string"){
alert("输入的是字符串");
}else if(b == "boolean"){
alert("输入的是布尔值");
}else if(b == "object"){
alert("输入的是空对象");
}else if(b == "undefined"){
alert("输入的是undefined");
}else{
alert("输入的是其他");
}