客户端JavaScript的作用:
客户端数据计算
表单输入验证
浏览器事件的触发和处理
网页特殊显示效果制作
服务器的异步数据提交
浏览器内核组成:
内容排版引擎 解析html、css
脚本解释引擎 解析JavaScript
JavaScript引入方法:
1.要执行的脚本语句直接放在body中 注意单双引号的使用
2.内部脚本块 脚本块可执行多条语句
3.外部脚本文件
直接输入js代码,保存为.js文件
引入方式:在html的head标签中加
js代码中的注释
单行注释://
多行注释:/**/
注意:js代码的大小写敏感
变量:储存信息的容器
变量的声明:var Username;
用=为变量赋值
var bookPrice=25.5;
没有初始化的变量自动取值为undefined
一条语句中声明多个变量使用“,”分隔
var name1,name2,name3;
命名不允许使用语言关键字和保留字做变量名 命名规范:
由字母,下划线,数字,美元符号组成;
不能以数字开头;
最好有明确含义.
常量
常量的值不能改变
习惯使用纯大写字母
常量声明方法:canst PI=3.1415926
数据类型
基本类型:string;类型number;类型boolean类型;undefined类型. 数据类型转换
数字+字符串:数字转换为字符
数字+布尔:ture转化为1,false转化为0.
字符串+布尔:布尔转化为字符串ture或者false
布尔+布尔:布尔转化为数值1或者0.
数据类型转换函数:
toString()
parseInto()解析一个string或number的整数部分,如果没有整数部分,则返回NAN
Number()
运算符和表达式 函数
本质是功能完整的对象
关键字:function
function 函数名(){可执行语句
}
如 函数的调用和传参
函数名(a,b)
定义参数和返回值
function (num1,num2,num3){
var sum=num1+num2+num3;
return sum;}
注意:参数间,用多个,分开
return语句执行后函数就退出执行,不能再执行其他程序。
在函数内可以调用其他函数
function f3( ){
console.log( 'f3 begin...' );
console.log( 'f3 end...' );
}
function f2( ){
console.log( 'f2 begin...' );
f3( );
console.log( 'f2 end...' );
}
function f1( ){
console.log( 'f1 begin...' );
f2( );
console.log( 'f1 end...' );
}
变量的作用域
作用域就是变量和函数和访问的范围,它控制着变量和函数的可见性和生命周期。
在JavaScript中作用域分为函数作用域和全局作用域。
函数作用域:只在当前函数内可以访问
全局作用域:一经定义,在代码中任何地方都可以访问;
局部变量:函数作用域中的变量
全局变量:代码任何地方都可以访问
在最外层定义的变量为全局变量
var sum=0 //全局变量
function add(){
sum=1+2;
console.log(sum); //正确
}
console.log(sum); //正确
未使用var的是全局变量
function add(){
sum=1+2;} //全局变量
add(); //必须要调用一次
console.log( sum) // 正确
先预读到JavaScript声明的变量和函数的顶部 而对变量的赋值保持在原位
声明提前:声明提前仅能将声明提前到作用域的顶部 尽量将变量的声明和函数的声明集中在当前作用域的顶端。
已经定义好的全局函数:
encodeURI()函数用于对统一资源标识符(URI)进行编码,返回编码后的URI字符串
decodeURI()函数用于对使用encodeURI()编码之后的字符串进行解码
eval()用于执行以string形式出现的JavaScript代码 也可以用于将JSON转换为JavaScript对象
程序的流程控制
程序=数据+算法
任何复杂的程序都可以通过“顺序”,“分支”,“循环”三种基本的程序逻辑组合实现。
分支结构
if(逻辑表达式){ //如果逻辑表达式为ture则执行语句块中的语句 不要省略{ }
语句1;
语句2;}
if-else语句
if(逻辑表达式){
语句块1;}
else{
语句块2;}
else-if语句
if(逻辑表达式){
语句块1;}
else if(){
语句块2;}
...
else{ }
switch-case语句是一种特殊的分支结构,根据一个表达式的不同取值,从不同的程序入口开始执行。
switch(表达式){
case值1;
语句1;
break;
case值2;
语句2;
break;
default ;
语句3;
} //break 作用为跳出switch结构
if...else... 可以判定相等或不等的情形,适用性更广;
switch...case... 结构的结构更清晰、效率更高;但一般只用于指定变量相等于某个范围内的某个特定的值。
循环结构
循环就是一遍又一遍执行相同或相似的代码
while语句
while循环语法格式:
while(Boolean表达式){
循环语句体}
表达式为ture则执行循环语句体,直到为fleas则循环结束。
var i = 0 ;
while ( i < 10 ) {
console.log( 'I got ' + (i+1) + ' OFFER!' );
i ++ ;}
循环条件每执行一次改变一次,使得循环结束成为可能。
可以用break退出循环
var i=0;
while(i<100){
console.log(i);
if (i==5){
break;}
i++;
}
do-while语句
do{
可执行语句体}
while(Boolean表达式)
while和do-while语句的区别:
while循环“先判断,再执行”;
do-while循环“先执行,再判断”;
当初始情况不满足循环条件时,while循环一次都不会执行;do-while循环不管任何情况都至少执行一次。
for(表达式1;表达式2;表达式3){
循环体语句} //表达式1:变量声明 表达式2:判断条件 表达式3:变量变化
for循环的特殊用法
for(;;){
}
三个表达式都为空,没有退出条件,为死循环。
for循环中也可以使用break退出循环
sum=0;
for(var i=0;i<100;i++){
if(sum>2500){
break;}
}
sum+=i;
for 循环中的continue语句
continue只能用于循环结构中,作用为跳过本次循环,继续执行下一次循环
循环嵌套:在一个循环里体内再出现一个循环
创建和访问数组
数组:程序=数据+算法
数组:Array,是一种很常用的保存批量数据的数据结构。
在JS中,数组中的数据类型可以相同也可以不同,线性排布。
下标从0开始,最大到个数-1
数组的定义和初始化
var arr1=[ ] ; //定义一个不包含元素的数组
var arr2=[997,85,48 ]; //定义一个包含三个数据的数组
var arr3=new Array(); //定义一个不包含元素的数组
var arr4=new Array("Tom","Mary"'(Jone)); //定义一个包含三个元素的数组
注意:
var arr5=[3]; //定义一个只包含一个整数元素的数组,下标为0,值为3
var arr6=new Array(3); //定义一个包含三个元素的数组,下标为0,1,2,三个元素均为undefined
var arr7=new Array(3,ture,"Tom‘); //定义一个包含三个数据的数组,数据类型分别为数字,布尔,字符串,下标为0,1,2
可以在定义数组时进行初始化,也可以通过下标进行初始化
var empArray=[ ];
enpArry[0]="scott"
empArray[1]=7;
empArray[2]=ture;
......
数据是引用类型的对象
引用类型:值不保存在变量本地的数据类型;
用new创建的都是引用类型的对象
null 与 undefined:
共同点:都是原始类型,保存在栈中变量本地。
不同点:
undefined:表示变量声明过但未被赋过值。是所有未赋值变量的默认值。一般不主动使用
例如:var a; //a被自动赋值为undefined
null:表示一个变量将来可能指向一个对象,但目前暂时什么都没指向。一般用于主动释放指向对象的引用。
例如:var emps=[‘Scott’, 'Smith'];
emps=null;//释放指向数组的引用
遍历数组元素同常使用for
var price=new Array(34,56,78,89);
for(var i=price.length-1;i>0;i--){
console.log(price.[i]);
} //倒序
var price=new Array(2,4,5,6,7);
for (var i=0;i
console.log(price[i]);
} //跳序
for....in声明
var numbers=new Array(3,4,5,6,7);
for(var i in numbers){
console.log(i+"-"+numbers[i]);
}
for in用于严格依次遍历数组中 的每一个下标
数组的常用方法
获取数组字符串:toString() join()
链接数组:arrObject.concat(arr1,arr2,arr3); //该方法不会改变现有的数组,只是返回一个拼接后的副本,接收任意多个参数,参数可以是值,也可以是数组。
获取子数组
slice()
语法:arrObject.slice(start,[end]);
start指定从哪个下标开始选取,若值为负数,则从尾部开始算起。
end指定结尾处的下标(不包含),可以省略或者为负值。
var arr1 =new Array(10,20,30,40,50);
var arr2 =arr1.slice(1,4); //20,30,40
var arr3 =arr1.slice(2); //30,40,50
console.log(arr1); //现有元素不变
修改数组
splice()
语法;arrObject.splice(start,count,e1,e2,e3.....en);
start 指定开始修改的位置,count是要删除的个数。
倒转数组
reverse() 颠倒数组中的元素顺序
语法:arrObject.reverse();