JavaScript基础
一、JS介绍
(1)JS特点
1. 脚本语言:嵌入在HTML文件中被浏览器执行
2. 弱类型语言:使用var 声明变量
3. 基于对象的语言:一切数据类型皆对象
4. 解释型语言:不需要编译,由浏览器的JS解析引擎解析执行
5. 动态化语言:变量的值和类型只有代码执行到赋值处才确定
(2)JS注释
// 单行注释 /**/ 多行注释
(3)JS代码的写入位置:
JS是脚本语言,必须嵌入到html文件中才能被浏览器的JAVASCTIPT引擎解析,嵌入形式如下:
1. 嵌入到html元素标签中:
<input type="button" name="ss" onClick="javascript:check();"> //一般用来绑定事件
2. 嵌入html Script标签中:
<script type="text/javascript" language="JavaScript"> js代码</script> 一般放到body中最后
<script src="js-filename" type="text/javascript" language="JavaScript"></script> 一般放到header中
二、变量
(1) 什么是变量
变量是计算机内存中存储数据的标识符,根据变量的名称可以获取到内存中存取的数据。
(2)为什么使用变量
程序数据都是加载到内存中执行的,每一个数据都有一个32位或64位的数字编号(地址),使用这些数字编号找到数据太麻烦,故用变量来标识这些数据的位置。
(3)变量命名
1. 用有含义的单词给变量命名,增加代码可读性,方便维护
2. 小驼房法命名
3. 一般以字母、$、下划线开头,中间、后面可以有字母、数字、下划线。
4. 不能含有关键词,如js 中var,console,..
(4)变量声明:
声明作用:告诉计算机以这个标识符开启一块内存空间准备存储数据
ECMA5语法:
var 变量名; var 变量名1,变量名2,...;
ECMA6语法:
let 变量名;
(5)变量赋值:
作用:给分配的内存空间写入数据,数据存储的数据结构取决于变量的数据结构类型
赋值用代码的表现形式:
1. 声明时就赋值:var name = "aa"; var name = "aa", age=23, job = "web";
2. 声明后赋值:var name , age, job; name = "aa"; age = "23";
(6)变量类型转换:
1. 其它类型转换为字符串型:
var.toString(); String(var);
2. 其它类型转换为数值型:
number(var); 如果不是数值型数据,则转换时会报NaN
parseInt(var); 强制转换为整型, 字符串以数字开头,取数字部分;以字母开头报NaN
parseFloat(var); 强制转换为浮点型
3. 其它类型数据转换为布尔型:
boolean(var); "" | null | undefined | [ ] 转换为false,其余转换为true
4. 获取变量数据类型:
typeof(var); typeof var;
(7)变量作用域:(变量的作用范围)
全局变量:在script标签类任何地方都能使用
js中不再函数中,使用var声明的变量都是全局变量,一旦var声明变量,只可改变值,不可删除(在脚本结束前,变量一直存在,占用着空间)
局部变量:只能在局部范围使用
js中在函数中声明的变量都是局部变量
块级作用域:{}之间定义的变量。如if,while,for中定义的变量,在结构执行完,变量就没有了。但js中没用块级作用域,if,while,for结束后,其中变量任然存在,全局生效。
ES6中let声明的变量具有块级作用域,以后声明变量,建议使用let
隐式全局变量:不使用var ,直接声明的变量。可以被删除。name = "lisi"; delete 变量名;
作用域链:在函数中使用变量,先在函数内查找是否存在该变量,存在则使用其值,没赋值则为undefined;若不存在则向上层作用域查找,始终没找到则报错。
(8) 变量交换:交换2个变量的值
1. 使用中间变量
var num1 = 10;
var num2 = 20;
var tmp = num1;
var num2 = num1;
var num1 = tmp;
2. 利用数学运算
var num1 = num1 + num2;
var num2 = num1 - num2;
var num1 = num1 - num2;
3. 位运算
var num1 = num1 ^ num2;
var num2 = num1 ^ num2;
var num1 = num1 ^ num2;
(9)变量比较:
== //变量的值进行比较
=== //变量的数据类型和值进行比较
(9)预解析:
js脚本在浏览器中执行分2个过程:预解析,代码执行
1. 将当前作用域的变量和函数声明提前(变量先,函数后),其它按照代码先后顺序执行。
2. 是分段预解析,不同script标签中的函数同名不会冲突。全局作用域变量在全局提前声明,函数中变量在函数作用域内提前声明。
function f1(){ console.log(name); } f1(); var name = "ss";
//输出结果为undefined,说明name已经声明,但未赋值。
function f1(){ console.log(name);
var name = "ss";
}
f1();
//输出结果为undefined,说明在执行函数前,函数内部变量声明被提前了。
function f1(){
var name = "wotamade";
}
console.log(name);
//报错,因为name只是在函数中声明,全局不存在name
三、js数据类型(数据结构类型)
数据类型分类:(不同数据类型,在内存中存储方式不一样)
原始数据类型:string,boolean,number,null,undefined,object
简单数据类型(值类型):string,boolean,number //数据存储在栈区
复杂数据类型(应用类型):object //数据存储在栈区和堆区,键在栈区,值在堆区
空类型:null,undefined
1. string 字符串型,在代码中是用单引号或双引号包起来的字符表示
2. bollean 布尔型,在代码中用true,false关键字赋值给变量表示
3. number 数值类型(整数和小数)。在代码中直接用数字赋值给变量表示
4. null 空类型(是一个指向空对象的指针)。在代码中用null关键字赋值给变量表示
5. undefined 未定义类型。
6. object 对象类型。
注意: 1. 出现undefined的原因:
a. 变量声明了,未赋值,则为undefined类型
b. 函数没有返回值,则函数返回值类型为undefined
2. 不是数字类型的变量进行数学运算,会报Nan错误
四、运算符
1. 赋值运算符:=
2. 算数运算符:+ - * / %
3. 一元运算符:++ 、-- 、! 只需要一个操作数就可以运算的操作符。num++ 参与运算后加1,++num参与运算前加1
4. 二元运算符:需要2个操作数的运算符
5. 三元运算符:"a"?"b":"c"
6. 复合运算符:+= .= *= /= %=
7. 比较运算符:> < >= <= == != === !===
8. 逻辑运算符:&&、||、!
五、流程控制:(3种形式)
1. 顺序结构:代码按从上到下的顺序执行
2. 分支结构:if , switch, 三元运算符
if(){} if(){}else{} if()elseif(){}else{} //if结构一般用于范围判断
switch( 值表达式){ //switch结构一般用于值的判断,break表示跳出当前分支
case 常量表达式1 :
语句1;break;
case 常量表达式2 :
语句2;break;
......
default : //当所有条件都不符合的时候,执行的语句
语句1;break;
}
3. 循环结构:while(){} do{}while() for(){}
循环3要素:计数器,循环条件,循环体
//while循环:先判断条件,再决定是否执行循环体,循环可能一次都不执行
var i = 0; //计数器 i while( i<100){ //循环条件 console.log(1); //循环体
i++; //计数,特容易掉
}
//do-while循环:先执行一次循环体,再进行条件判断,循环至少会执行一次
var i = 0; //计数器 i
do{
console.log(i); //循环体
i++;
}while(i<100); //循环条件
//for循环:和while类似
for( var i=0; i<=100; i++){ //计数器和循环条件在括号中
console.log(i); //循环体
}