javaScript
JS介绍
语言基础
基础知识
代码执行顺序
对于HTML来说,从上到下同步解释性文档
上面的代码无法调用下面的标签或者script
下面的代码可以调用上面的标签或者script
变量污染
如果加载的js中,变量或者函数相同时,就会覆盖,我们叫做变量污染
javaScript的组成
核心(ECMAScript)
文档对象模型(DOM)
浏览器对象模型(BOM)
JS引入的三种方法
载入外部JS
body
扩展(异步加载)
async
defer
例:<script src="./b.js"></script>
标签中行内JavaScript执行
<button onclick="clickHandler()">按钮</button>
<a href="javascript:console.log('aaaaa')">超链接</a>
扩展
<a href="javascript:void(0)">超链接</a>
内部脚本
在html文件中直接进行代码的书写
扩展
变量污染
如果加载的js中,变量或者函数相同时,就会覆盖,我们叫做变量污染
注释
单行注释
Ctrl+ /
行注释,注释一行的代码
块注释
shift +alt + /
用途
可以用来注释一行中的部分内容
可以用来注释掉一个函数和大量代码块
对于函数的注释说明
作用
注释可以让不用的代码不执行
注释可以用来解释代码的作用
常用方法和变量
常用规则
js语言每行结束时必须使用;结束,必须是半角(英文)
js代码中大小写必须严格按照规定
一般首字母都是小写,除了类。都是用驼峰式命名规则
除了第一个以外,每个单词的首字母大写,其他字母小写
js 是点语法,表示某个对象的方法和属性
打印方法
alert('弹出内容')
var a=confirm("是否继续?")
弹出确定取消框
控制台输出
console.log()
打印
console.dir()
打印一个对象所有属性和方法
console.error()
输出错误提示
console.info()
消息
var s=prompt("你今年多大了?","20");
弹出输入框
20位默认值
document.write()
文档中写入字符
文档中写入标签
document.write("<a href='#'>超链接</a>")
alert(); 一般都将window省略了 等价于window.alert()
对象
一种是属性,属性使用=赋值
div0.innerHTML="<div>sadasd</div>";
innerHTML是所有body内(含body)标签的属性,可以给这些标签内局部增加内容和标签
一种是方法,方法需要()执行
div0.write("aaa")
write仅属于document的方法,可以给整个文档中增加内容
ES5 和 ES6
ES5 之前
a=b=3;
连等,先赋值给=号最左边的元素,再逐级向右
代码遵从从左至右的执行方式 a=(b=3) 实际上算的时候从右到左
=号左侧是变量名称,=号右侧是值
不需要定义,随手写,不需要类型(弱类型)
=号赋值也是有返回值
ES5
不允许直接使用变量的赋值
变量
定义变量
var a = 3,b = 4; var a,b c;
不使用var声明,这个变量是window的属性
函数以外使用var声明也是设置了window的属性
命名规则
变量必须驼峰式命名法
临时变量
临时变量必须使用_起头,后面接驼峰式命名
有时候也会在函数的参数中使用临时变量命名
变量不可以使用关键词
变量不可以使用保留字
全局的变量名不与window下的属性和方法同名
返回值
一旦使用var是不可以返回的
没有使用var会被赋值的结果返回
ES6
let
变量
定义后可以变化
const
常量
一旦定义值就不能改变
常量定义是名称必须全部大写,并且使用_区分单词
作用
常量目的是不会被别人修改或者变量污染改变
例: const EVENT_ID="changes";
数据类型
基本数据类型
字符类型 String
'' "" ``都是字符型
数值类型 Number
定义的不一定和打印的结果完全相同,全部都会转换为10进制
NaN
数值类型中的非数值
布尔类型 Boolean
true,false
未定义型 undefined
var a; 仅定义变量未设置值
var b=undefined; //定义变量并且设置值为undefined;
var a;
用于全局定义,然后根据需要时赋值
值是相同的但是形态不同
空值 Null
垃圾回收
空值是将所有引用地址标记清空,用于清理内存
用途
var obj={};//空对象 obj=null;//设值为空
引用数据类型
对象
key:value//关键词和值
对象不能出现重复的key
变量作为key必须在外层增加[]
例:[d]:"xietian"
获取对象中key的值时有两种方法
点语法
使用范畴
仅限于key属性固定
并且明确
[]语法
固定的key,就使用字符串方式来设定
如果不固定,直接[变量]就可以
数据类型转换
分类
强制转换
隐式转换两种
数值转字符串
类型强制转换
var b=String(a);
a=String(a);将a转换为字符串覆盖原有变量a
隐式转换方式
a=a+"";根据运算特征自动转换为字符串
隐式转换所使用的的转换方法是自动执行String(a)
方法
toString()
实际上是Object对象的方法,因此,万物皆对象,任何类型都可以调用这个方法
a=a.toString(16)
参数必须是2-36之间,否则报错,转换为指定的进制数
toFixed(小数点位数)
转换为字符串,并且保留小数点位数,自动四舍五入
toExponential()
对象的值转换为科学计数法
toPrecision()
把数字格式化为指定的长度
数值转换为布尔值
除了0以外所有的数值转换为布尔值都是true
0转换为布尔值是false
数值转换为对象
字符串转换为数值
parseInt(a)
转换为整数
parseInt(a,2)
将字符串转换为2进制
Number(a)
强制转换为数值类型
parseFloat(a)
转换为浮点数
隐式转换遵从Number()转换方法
字符串转换为布尔值
字符串转换为布尔值,除此之外全部是true
字符串转换为对象
转换为字符串对象
trim()
清除字符串前后空格
布尔转换为数值
true转换为1
false转换为0
布尔转换为字符
true
false
布尔转换为对象
转换后就是布尔值对象
任何类型转换为布尔值
var a="";
var b=0;
var c=NaN;
var d=false;
var e=null;
var f=undefined;
以上6种转换布尔值是false,其他都是true
特殊
undefined null
转换为字符串
转换为数值
a=Number(a);//转换为数值是NaN
b=Number(b);//转换为数值是0
算数运算符
+ - * / %(取模运算符)
运算浮点数运算是会有误差
所有类型遇到 - * / %都会隐式转换为数值,然后运算的
如果运算过程中没有使用字符串,使用+符号,其他类型都会转换为数值,并且相加
一元运算符
a++
是+1以后的结果先参与运算或者赋值
a--
是将a先参与运算或者赋值
运算
赋值运算
赋值运算符的优先级最低
a+=7;//a=a+7; 7就是步长 step
a+="";
利用隐式转换完成字符串转换
关系运算
是返回布尔值的一种运算表达式
运算符
< > <= >=
== 判断值是否相等
=== 判断值和类型是否相等
例子
console.log(undefined==null);返回true
//因为两者都不是数据,
他两在比较之前,不能转换,并且相等
NaN==NaN);//false
判断是不是NaN isNaN()
这个字符串转换为数值后判断是否是NaN非数值
逻辑运算
&&
true && true = (第二个值)
true && false = (第二个值)
false && true = (第一个值)
false && false = (第一个值)
||
true || true = (第一个值)
true || false = (第一个值)
false || true = (第二个值)
false || false = (第二个值)
!
取反
位运算
&按位与
先转二进制,全1才为1
| 按位或运算
先转二进制,有1就为1
^ 按位异或运算
先转二进制,不同则为1,相同则为0
~ 位非运算
加1取负数
<< 左移位运算符
放大
>>右移位运算符
缩小
三目运算
格式 var a=3>2 ? 1 : 0;
规则
条件成立返回第一个值 否则返回第二个值
如果表达式的结果转换为布尔值为真时,返回问号后面的值,否则返回冒号后面的值
问号前面的内容会自动隐式转换为布尔值
三目运算符比赋值运算优先级高
运算符优先级
. [] () 字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void 一元运算符、返回数据类型、对象创建、未定义值
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
<< >> >>> 移位
< <= > >= instanceof 小于、小于等于、大于、大于等于、instanceof
== != === !== 等于、不等于、严格相等、非严格相等
& 按位与
^ 按位异或
| 按位或
&& 逻辑与
|| 逻辑或
?: 条件
= oP= 赋值、运算赋值
, 多重求值
流程控制语句
条件语句
if else
if(条件表达式){语句1}else{语句2}
switch case
switch(n){
case 1:
代码块 1
break;
case 2:
代码块 2
break;
default:
n 与 case 等都不相同时不同时执行的代码
}
循环语句
while
先条件,后执行
例: while(判断语句){循环体;}
do while
先执行,后条件
例:do{
循环体;2
循环增量;3
}while(循环条件)
for
例:for(var i=0;i<10;i++){console.log(i)}
break
break语句会立即退出循环,强制继续执行循环后面的语句,结束本层循环
一般出现在循环语句和 switch中
continue
仅用于循环语句
虽然也是立即退出循环,但退出循环后会从循环的顶部继续执行,结束本次循环进行下一次。