1.什么是javascript
javascript简称为js,是一种运行于js解释器/引擎中的脚本语言 js的运行环境: 1.独立安装的js解释器(node) 2.嵌入在浏览器内核中的js解释器
2.js的发展史
1.1992年Nombas公司为自己开发了一款脚本语言SciptEase 2.1995年Netscape(网景)开发了一款脚本语言LiveScrpt,后来更名javascript 3.1996年Microsoft在IE3.0版本中克隆javascript,JScript 4.1997年,javascript提交给ECMA(欧洲计算机制造商联合会)。定义ECMAScript,简称ES5,ES6
3.js组成部分
1.核心(ECMAScript) 2.DOM (Document object model)文档对象模型 3.BOM (Browser object model)浏览器对象模型
4.js的特点
1.语法类似于c,java 2.无需编译,由js解释器直接运行 3.弱类型语言 4.面向对象的
1.使用javascript
1.搭建运行环境 1.独立安装的JS解释器-NodeJS 1.在命令行界面:输入node console.log("你好,世界"); 在控制台打印输出 说明:js是可以独立在js解释器中运行 2.使用浏览器内核中嵌的js解释器 浏览器内核负责页面内容的渲染,由两部分组成: 内容排版引擎-解析:HTML/CSS 脚本解释引擎-解析:javascript 1.直接在Console(控制台)中输入脚本并运行 2.将js脚本嵌入在HTML页面中执行 1.html元素的事件中执行js脚本 事件-onclick-鼠标单击时要执行的操作 2.在<script>中编写脚本并执行 网页的任何位置处,嵌入一对<script>标记,并且将脚本编写在<script>标记中。 3.使用外部脚本文件(.js为后缀) 1.创建脚本文件(.js)并在文件中编写脚本 2.在使用的网页中引用脚本文件 <script src="脚本文件的url"></script> 3.js调试,F12查看错误,出错时不影响其它代码块,后续代码继续执行。 <script> /*这个脚本错误*/ document.writ("<h3>周芷若</h3>"); </script> <script> /*继续执行*/ console.log("金花婆婆"); </script> 3.通过语法规范 1.语句:可执行的最小单元 必须以;结束 严格区分大小 所有的符号必须是英文 2.注释: // :单行注释 /**/:多行注释
1.变量声明
1.声明变量 var 变量名; 2.为变量赋值 变量名=值; 3.声明变量是直接赋值 var 变量名=值; ex: var uname="张无忌"; var age=20; 注意: 1.允许在一条语句中声明多个变量,用逗号隔开变量名。 var uname="韩梅梅",uage=20; 2.如果声明变量,但未赋值,则值默认为undefined 3.声明变量时可以不适用var,但不推荐 uname="tom";
2.变量名的规范
1.不允许以数字开头 2.不允许使用关键词和保留关键字 3.最好见名知意 var uname; var uage; 4.允许包含字母,数字,下划线(_),$ var $name="Tom"; 5.尽量使用小驼峰命名法 var userName; var uname; var _uname;//下划线 var user_name;//下划线 var UserName;//大驼峰命名法
1.声明变量未赋值,值默认为undefined 2.使用未声明过的变量 报错 3.赋值操作 变量名出现在=的左边,一律是赋值操作 var uname="林妹妹"; 4.取值操作 变量只要没出现在=的左边,一律是取值操作 var uage=30; console.log(uage); var num1=uage;
1.什么是常量 在程序中,一经声明就不允许被修改的数据就是常量。 2.语法 const 常量名=值; 常量名在程序中,通常采用大写形式。 const PI=3.1415926;
1.数据类型的作用
规定了数据在内存中所占的空间 10.1 64位 8个字节 bit:位 8bit=1byte字节 1024byte=1KB 1024KB=1MB 1024MB=1G 1024G=1T
2.数据类型详解
1.数据类型分两大类 原始类型(基本类型) 引用类型 1.原始类型 1.Number 类型 数字类型 作用:可以表示32位的整数,也可以表示64位的浮点数(小数) 整数: 1.十进制 10 2.八进制 由0-7八个数字组成,逢八进一 八进制中以0开始 var num=010; 3.十六进制 由0-9和A-f组成,逢十六进一 A:10 B:11 C:12 D:13 E:14 F:15 十六进制中以0X开始 浮点数:又称小数 小数点计数法:12.58 指数计数法:3.4e3(3.4*10的3次方) 2.String类型 字符串类型 作用:表示一系列的文本字符数据,如:姓名,性别,住址... 字符串中的每个字符,都是由Unicode码的字符,标点和数字组成。 Unicode码:每个字符在计算机中都有一个唯一的编码表示该字符, 该码就是unicode码(他是十六进制) 1.查找一个字符的unicode码: "李".charCodeAt(); //10进制输出 "李".charCodeAt().toString(2); //二进制输出 "李".charCodeAt().toString(16); //十六进制 李的unicode码是:674e 2.如何将674e转换为汉字? 用\u ex: var str="\u674e"; console.log(str);//结果是“李” 汉字的Unicode码的范围: \u4e00~\u9fa5 3.特殊字符需要转义字符 \n: 换行 \t: 制表符(缩进) \": " \': ' \\: \ 3.Boolean类型 布尔类型 作用:在程序中表示真或假的结果 取值: true或false var isBig=true; var isRun=false; 在参与到数学运算时,true可以当成1做运算,false可以当做0做运算。 var res=25+true; //结果为26 4.Undefined类型 作用:表示使用的数据不存在 Undefined类型只有一个值,即undefined当声明的变量未赋值(未初始化)时, 该变量的默认值就是undefined. 5.Null类型 null用于表示不存在的对象。 Null类型只有一个值,即null,如果函数或方法要返回的是对象, 找不到该对象,返回的就是null。
1.隐式(自动)转换 不同类型的数据在计算过程中自动进行转换 1.数字+字符串:数字转换为字符串 var num=15; var str="Hello"; var res=num+str; //结果:15Hello 2.数字+布尔:将布尔转换为数字true=1,false=0 var num1=10; var isSun=true; var res1=num1+isSun;//结果:11 3.字符串+布尔:将布尔转换为字符串 var str1="Hello"; var isSun1=true; var res2=str1+isSun1;//结果:Hellotrue 4.布尔+布尔:将布尔转换为数字 true=1,false=0; var isSun2=true; var isSun3=flase; var res=isSun2+isSun3;//结果1 2.强制转换 -转换函数 1.toString() 将任意类型的数据转换为字符串 语法: var num=变量.toString(); ex: var num=15; var str=num.toString(); console.log(typeof(str)); 2.parseInt() 将任意类型的数据转换为整数 如果转换不成功,结果为NaN(Not a Number) 语法:var result=parseInt(数据); 3.parseFloat() 将任意类型的数据转换为小数 如果转换不成功,结果为NaN 语法:var result=parseFloat(数据); 4.Number() 将任意类型数据转为Number类型 注意:如果包含非法字符,则返回NaN 语法:var result=Number(数据);
1.什么是表达式
由运算符连接操作数所组成的式子就是表达式。 ex: 15+20 var x=y=40 任何一个表达式都会有结果。
2.运算符
1.算术运算符 +,-,*,/,%,++,-- 5%2=1; ++:自增运算,只做+1操作 ++在前:先自增,再运算; ++在后:先运算,再自增; ex: var num=5; console.log(num++);//打印5,变为6 console.log(++num);//变为7,打印7 ex: var num=5; 5 (6)6 6(7) (8)8 var res=num+ ++num +num++ + ++num +num++ +num; 8(9) 9 结果:42 2.关系运算符(比较) >,<,>=,<=,==,===(全等),!=,!==(不全等) 关系运算的结果:boolean类型(true,false) 问题: 1. 5 > "10" 结果:false 关系运算符两端,只要有一个是number的话,另外一个会隐式转换为number类型,再进行比较。 2."5">"1 0" 结果:true "5".charCodeAt(); //53 "1".charCodeAt(); //49 "张三丰" > "张无忌" 结果:false 19977 > 26080 3."3a" > 10 结果:false Number("3a")--->NaN 注意: NaN与任何一个数据做比较运算时,结果都是false. console.log("3a">10); false console.log("3a"==10); false console.log("3a"<10); false isNaN()函数: 语法:isNaN(数据); 作用:判断指定数据是否为非数字,如果不是数字,返回值为true,是数字的话返回的值为false console.log(isNaN("3")); //false console.log(isNaN("3a")); //ture console.log("3a"!=10);//true 3.逻辑运算符 !,&&,|| !:取反 &&:并且,关联的两个条件都为true,整个表达式的结果为true ||:或者,关联的两个条件,只要有一个条件为true,整个表达式的结果就为true 短路逻辑: 短路逻辑&&: 当第一个条件为false时,整体表达式的结果就为false,不需要判断第二个条件 如果第一个条件为true,会继续判断或执行第二个条件 短路逻辑||: 当第一个条件为true时,就不再执行后续表达式,整体结果为true。 当第一个条件为false时,继续执行第二个条件或操作。 4.位运算符 <<,>>,&,|,^ 右移是把数变小,左移是把数变大 &:按位与,判断奇偶性 任意数字与1做按位与,结果为1,则为奇数,结果为0,则为偶数。 var num=323; var result=num & 1 console.log(result); //结果为1 |:按位或,对小数取整 将任意小数与0做按位或,结果则取整数部分。 ^:按位异或,用于交换两个数字 二进制位数,逐位比较,不同则为1,相同则为0 a=a^b; b=b^a; a=a^b; 5.赋值运算符和扩展赋值运算符 1.赋值运算 = var uname="TOM"; 2.扩展赋值运算符 +=,-=,*=,/=,%=,^=... a=a+1 a+=1;a++;++a a=a^b a^=b 6.条件(三目)运算符 单目(一目)运算符,只需要一个操作数或表达式 ex: a++,b--,!isRun 双目(二元)运算符,需要两个操作数或表达式 +,-,*,/,%,>,<,>=,<=,==,!=,===,!==,&&,||,&,|,^ 三目(三元)运算符,需要三个操作数或表达式 条件表达式?表达式1:表达式2; 先判断条件表达式的值, 如果条件为true,则执行表达式1的操作 如果条件为false,则执行表达式2的操作 ex:成绩大于60及格,否则,输出不及格
1.什么是函数
函数,function,也称为方法(method) 函数是一段预定义好,并可以被反复执行的代码块。 预定义:提前定义好,并非马上执行。 代码块:可以包含多条可执行的语句 反复执行:允许被多次调用 函数-功能 parseInt(); parseFloat(); Number(); console.log(); alert(); document.write();
2.定义和使用函数
1.普通函数的声明和调用(无参数无返回值) 1.声明 function 函数名(){ //函数体 若干可执行的语句 } 2.调用函数 在任意javascript合法的位置处通过 函数名(); 对函数进行调用。 2.带参函数的声明和调用 1.声明 function 函数名(参数列表){ //函数体 } 参数列表:可以声明0或多个参数,多个参数间用逗号隔开 声明函数时,声明的参数,称之为“形参” 2.调用 函数名(参数值列表); 注意:调用函数时,传递的参数数值,称之为“实参”。 尽量按照声明函数的格式进行调用 3.带返回值函数声明和调用 1.声明 function 函数名(参数){ //函数体 return 值; //return关键字,程序碰到return关键词,就立马跳出并且把值带出去 } 注意:最多只能返回一个值 2.调用 允许使用一个变量接收函数的返回值 var result=函数名(实参);
1.什么是作用域 作用域表示的是变量或函数的可访问范围。 JS中的作用域分两种: 1.函数作用域 只在函数范围内有效 2.全局作用域 代码的任何位置都有效
2.函数作用域中变量
又称为局部变量,只在声明的函数中有效 ex: function test(){ var num=10; }
3.全局作用域中的变量
又称为全局变量,一经声明,任何位置都能用 1.不在function中声明的变量,为全局变量 2.声明变量不使用var,无论任何位置声明,都是全局变量(不推荐) 注意: 全局变量和局部变量冲突时,优先使用局部变量。 3.变量的声明提前 1.什么是声明提前 在JS程序正式执行之前,function声明的函数, 会将所有var声明的变量,都预读(声明)到所在作用域的顶部,但赋值还是保留在原位。
1.什么是按值传递
原始(基本)类型的数据(number,string,bool),在做参数传递时, 都是按照“值传递”的方式进行传参的。 值传递:真正传递参数时,实际上传递的是值的副本(复制出来一个值), 而不是原始值。
2.函数的作用域
1.分为两种 1.局部函数 在某个function中声明的函数。 2.全局函数 在最外层(<script>中)定义的函数就是全局函数,全局函数一经定义, 任何位置处都能调用。
1.parseInt()
2.parseFloat()
3.isNaN()
4.encodeURI()
URL:uniform resource locator路径 URI:uniform resource Identifier 作用:对统一资源标识符进行编码,并返回编码后的字符串 所谓的进行编码,就是将地址中的多字节文字编成单字节的文字 (英文数字:单字节,汉字2-3字节不等)
5.decodeURI()
作用:对已经编码的URI进行解码,并返回解码后的字符串。
6.encodeURIComponent()
在encodeURI的基础上,允许对特殊符号进行编码。
7.decodeURIComponent()
解码特殊符号
8.eval()
作用:执行以字符串表示的js代码
递归:在一个函数的内部再一次调用自己
问题:
1*2*3*4*5 5*4*3*2*1 求5!(5*4*3*2*1) 4!(4*3*2*1) 3!(3*2*1) 2!(2*1) 1!(1*1) 5!=5*4! 4!=4*3! 3!=3*2! 2!=2*1! 1!=1 通过一个函数,求数字n的阶乘 10!=10*(10-1)! 效率: 在本次调用还未结束时,就开始下次的调用,本次调用就会被挂起, 直到所有的调用都完成之后,才会依次返回,调用的次数越多,效率越低。
1.if结构
if(条件){ 语句块; } 注意: 条件尽量是boolean的,如果不是boolean,以下情况会当做false处理 if(0){...} if(0.0){...} if(""){...} if(undefined){...} if(null){...} if(NaN){...} 注意:if后的{}可以省略,但是不推荐,只控制if后的第一句话。
2.if...else...结构
语法: if(条件){ 语句块 }else{ 语句块 }
3.if....else if...else...
语法: if(条件1){ 语句块1 }else if(条件2){ 语句块2 }else if(条件3){ 语句块3 }else{ 语句块n }
4.switch...case
1.作用:(使用场合) 等值判断 2.语法 1.switch(值/表达式){ case 值1: 语句块1; break;//结束switch结构,可选的 case 值2: 语句块2; break; ... default: 语句块n; break; } 2.特殊用法 执行相同操作时: switch(值/表达式){ case 值1: case 值2: case 值3: 语句块; }
1.特点
1.循环条件:循环的开始和结束 2.循环操作:要执行的相同或相似的语句
2.循环-while
语法: while(条件){ //循环体-循环操作 //更新循环条件 }
3.循环的流程控制
1.break 作用:终止整个循环的运行 2.continue 作用:终止本次循环的运行,继续执行下一次循环 ex: 循环从弹出框中录入信息,并且打印,直到输入exit为止。
4.循环-do...while
1.语法 do{ //循环体 }while(条件); 执行流程: 1.先执行循环体 2.再判断循环条件 如果条件为真,则继续执行循环体 如果条件为假,则跳出循环操作
5.循环-for
语法: for(表达式1;表达式2;表达式3){ //循环操作 } 表达式1:循环条件的声明 表达式2:循环条件的判断 表达式3:更新循环变量 执行流程: 1.先执行表达式1 2.判断表达式2的结果(boolean类型) 3.如果2条件为真,则执行循环体,否则退出 4.执行完循环体后,再执行表达式3 5.判断表达式2的结果 ex: for(var i=1;i<=10;i++){ console.log(i); }
1.for(表达式1;表达式2;表达式3;){}
1.省略表达式 三个表达式可以任意省略,分号不能省 但一定在循环的内部或外部将表达式补充完整 2.表达式1和表达式3 允许写多个表达式,用逗号隔开表达式
1.循环嵌套
在一个循环的内部,又出现一个循环 for(var i=1;i<100;i++){ //外层循环 for(var j=1;j<=10;j++){ //内层循环 } } 外层循环走一次,内层循环走一轮
1.什么是数组
在一个变量中保存多个数据。 数组是按照线型顺序来排列的-线型结构 数组中:除了第一个元素外,每个元素都有一个直接的"前驱元素"。 数组中:除了最后一个元素外,每个元素都有一个会直接的"后继元素"。
2.声明数组
1.语法 1.var 数组名=[]; var names=[]; 2.var 数组名=[元素1,元素2,元素3...]; var names=["孙悟空","猪八戒","沙和尚"]; 3.var 数组名=new Array(); var names=new Array(); 4.var 数组名=new Array(元素1,元素2...); var names=new Array("林黛玉","贾宝玉","王熙凤");
3.数组的使用
1.取值和赋值操作 取值: 数组名[下标] var newArr=["tom","lilei"]; newArr[0] 赋值: 数组名[下标]=值; newArr[2]="韩梅梅"; 2.获取数组的长度 数组长度:数组中元素的个数 属性:length 语法:数组名.length 3.配合循环,遍历数组中的每个元素 for(var i=0;i<names.length;i++){ i:表示数组中每个元素的下标 names[i]:每个元素 } length表示数组中即将要插入的元素的下标 var names=["tom","lili","lucy"]; names[names.length]="lilei";
1.关联数组 以字符串作为元素的下标的数组,就是关联数组。 以数字作为下标的数组,就是索引数组。 $array=["name"=>"tom"] 2.js中的关联数组 var array=[]; array["字符串下标"]=值; 注意: 1.关联数组中,字符串下标的内容是不记录到length中的 2.只能通过 字符串 做下标取值 3.for...in 遍历出任意数组中的字符串下标 以及 索引下标 语法:for(var 变量 in 数组名){ //变量:字符串下标 或 索引下标 }
1.什么是冒泡 排序算法之一,将一组数据进行排序,小的数字往前排,大的数字往后排。 两两比较,小的靠前。 var arr=[9,23,6,78,45]; 5个数 比4轮 第一轮:比较了4次 第二轮:比较了3次 第三轮:比较了2次 第四轮:比较了1次 1.n个数字,则比较n-1轮 for(var i=1;i<arr.length;i++) 2.轮数增加,比较的次数较少 for(var j=0;j<arr.length-i;j++) 第一轮 5 -1=4次 第二轮 5 -2=3次 第三轮 5 -3=2次 第四轮 5 -4=1次 两两比较 小的靠前 if(arr[j]>arr[j+1]) arr[j]^=arr[j+1]; arr[j+1]^=arr[j]; arr[j]^=arr[j+1]
1.toString();
作用:将数组转换为字符串,并返回转换后的结果。 语法: var str=数组对象.toString();
2.join()
作用:将数组的元素通过指定的字符连接到一起,并返回连接后字符串 语法:var str=数组对象.join("字符");
3.concat()
作用:拼接两个或更多的数组,并返回拼接后的结果 语法:var res=数组对象.concat(数组1,数组2,...);
1.slice()
作用:截取子数组,从指定的数组中,截取几个连续的元素组成一个新的数组 语法:var arr=数组名.slice(start,[end]); start:从哪个下标位置处开始截取,取值为正,从前向后算; 取值为负,从后向前算 0 1 2 var arr=["中国","美国","俄罗斯"]; -3 -2 -1 end:指定结束位置处的下标(不包含自己),该参数可以省略, 如果省略的话,就是从strat开始一直截取到尾。
2.splice()
作用:允许从指定数组中,删除一部分元素,同时再添加一部分元素 语法:arr.splice(start,count,e1,e2...); start:指定添加或删除元素的起始下标 count:指定要删除元素的个数,取值为0表示不删除 e1:要增加的新元素,可以多个 返回值:返回一个由删除元素所组成的数组
3.reverse()
作用:将一个数组反转 语法:数组名.reverse(); 注意:该函数会改变当前数组的内容
4.sort()
作用:排序,默认情况下按照数组元素们的Unicode码进行升序排序。 语法:数组名.sort(); 特殊: 允许自定义排序函数,从而实现对数字的升序或降序的排序 ex: var arr=[12,6,4,115,78]; //排序函数(升序) function sortAsc(a,b){ return a-b; } arr.sort(sortAsc); 原理: 1.指定排序行数sortAsc,定义两个参数a和b,表示数组中相邻的两个数字 2.将排序函数指定给数组sort()函数,数组会自动传递数据到sortAsc()中, 如果sortAsc()的返回值>0,则交互两个数字的位置,否则不变。 使用函数完成升序排序: arr.sort( function(a,b){ //匿名函数 return a-b; } )
JS是按照标准的“栈式操作”来访问数组
所有的“栈式操作”的特点就是“后进先出”
1.push()
入栈,在栈顶添加指定的元素,并返回新数组的长度 var arr=[10,20,30]; //向栈顶增加新的数据40 var len=arr.push(40); //4
2.pop()
出栈,删除(删除栈顶数据)并返回删除元素 注意:改变原来数组
3.shift()
删除数组头部(第一个)的元素并返回删除元素 语法:数组名.shift();
4.unshift()
在数组的头部(第一个)元素的位置处,增加元素,返回的是数组的长度。 语法:数组名.unshift(增加的数据);
3.二维数组
1.什么是二维数组
在一个数组中的元素又是一个数组,也可以称为:数组的数组。
2.二维数组的使用
var names=[ ["孙悟空","猪八戒","沙和尚"], ["大乔","小乔","曹操"], ["林黛玉","贾宝玉","薛宝钗"] ]; //打印输出“小乔” console.log(names[1][1]);
相关推荐:
Atas ialah kandungan terperinci JS基础前端知识点总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!