[Javascript]js中所学知识点回顾总结
一、什么是Javascript
javascript，它是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言。用于web客户端开发的脚本语言，常用来给html网页添加动态功能，如响应用户的各种操作。
javascript(以下简称js)由核心语法ECMAScript、浏览器对象模型(BOM) ，、文档对象模型(DOM)三部分组成.
二、引入JS的常用方式
1、内部引入
在<head>标签中引入
在<body>标签中引入
2、外部引入
引入外部JS文件，就是将js代码存放在一个后缀名为.js的文件中，然后使用script标签来引用。此外，引用外部JS文件的script标签可以放在head标签内，也可以放在body标签中。一般只有引用一些插件的时候才会将JS引入在head内，大多数是写在body内最下面，因为在加载页面时css和html是先加载的，而JS文件需要最后才加载。
<body>
//在body的最末尾引入外部的JS. <script src="js/index.js" type="text/javascript"></script> </body>
三、JS中的数据类型
基本数据类型：String、boolean、Number、undefined、null
四、变量命名规范
1.变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号，不能是中文.
2.变量命名长度应该尽可能的短，并且语义化
3.尽量避免使用没有意义的命名，如：a，b，c...等
4.禁止使用JavaScript关键词、保留字全名
5.变量名命名方法常见为驼峰命名法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 //声明变量以及命名规则 8 var a; 9 var b; 10 var c,d; 11 /*alert(a);*/ 12 //声明变量的同时并且赋值 13 var test='this is a test'; 14 var test1=12; 15 var test2=1.2; 16 var test3=true; 17 var test4=false; 18 /*alert(test);*/ 19 //声明多个变量赋相同的初始值 20 var a=b=c=d=e=1; 21 //alert(a); 22 //变量重名会产生覆盖 23 a=33; 24 //alert(a); 25 //变量名称严格区分大小写 26 var username='king'; 27 var USERNAME='QUEEN'; 28 //alert(username); 29 29//alert(USERNAME); 30 //变量名称最好含义明确，以字母或者下划线开始或者$，跟上数字字母下划线,不能用特殊符号 31 var age=12; 32 var test5='hello'; 33 //var 12a='bb'; 34 //alert(12a); 35 var _test='hello'; 36 //alert(_test); 37 //驼峰标记法 38 var firstName='king';//小驼峰 39 var FirstName='queen';//大驼峰 40 var first_name='maizi';//下划线法 41 </script> 42 </head> 43 <body> 44 45 </body> 46 </html>
五、JS中的类型转换
强制类型转换：
Boolean(value):把给定的值转换成Boolean型。如下：
以下值会被转换为false：false、”"、0、NaN、null、undefined，其余任何值都会被转换为true。
String(value):把给定的值转换成字符串。如下:
（1）如果有toString()方法，则调用该方法（不传递radix参数）并返回结果 （2）如果是null，返回”null” （3）如果是undefined，返回”undefined”
Number(value):把给定的值转换成数字（可以是整数或浮点数)。如下：
（1）如果是布尔值，true和false分别被转换为1和0 （2）如果是数字值，返回本身。 （3）如果是null，返回0. （4）如果是undefined，返回NaN。 （5）如果是字符串，遵循以下规则： 1、如果字符串中只包含数字，则将其转换为十进制（忽略前导0） 2、如果字符串中包含有效的浮点格式，将其转换为浮点数值（忽略前导0） 3、如果是空字符串，将其转换为0 4、如果字符串中包含非以上格式，则将其转换为NaN （6）如果是对象，则调用对象的valueOf()方法，然后依据前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，再次依照前面的规则转换返回的字符串值
转换函数:
ParseInt(string,radix):将字符串转换为整数类型的数值。如下：
（1）忽略字符串前面的空格，直至找到第一个非空字符 （2）如果第一个字符不是数字符号或者负号，返回NaN （3）如果第一个字符是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止 （4）如果上步解析的结果以0开头，则将其当作八进制来解析；如果以x开头，则将其当作十六进制来解析 （5）如果指定radix参数，则以radix为基数进行解析
parseFloat(string):将字符串转换为浮点数类型的数值。如下：
它的规则与parseInt基本相同，但也有点区别：字符串中第一个小数点符号是有效的，另外parseFloat会忽略所有前导0，如果字符串包含一个可解析为整数的数，则返回整数值而不是浮点数值
六、JS运算符
1、算数运算符，算术运算符用于执行变量与/或值之间的算术运算。
给定 y=5，下面的表格解释了比较运算符：
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| + | 加 | x=y+2 | x=7 |
| - | 减 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除 | x=y/2 | x=2.5 |
| % | 求余数 (取膜,保留整数) | x=y%2 | x=1 |
| ++ | 累加(自加) | x=++y | x=6 |
| -- | 递减(自减) | x=--y | x=4 |
2、赋值运算符，赋值运算符用于给 JavaScript 变量赋值。
给定 x=10，y=5，下面的表格解释了比较运算符：
| 运算符 | 例子 | 等价于 | 结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
3、比较运算符，比较运算符在逻辑语句中使用，以测定变量或值是否相等。
给定 x=5，下面的表格解释了比较运算符：
| 运算符 | 描述 | 例子 |
|---|---|---|
| == | 等于 | x==8 为 false |
| === | 全等（值和类型） | x===5 为 true；x==="5" 为 false |
| != | 不等于 | x!=8 为 true |
| > | 大于 | x>8 为 false |
| < | 小于 | x<8 为 true |
| >= | 大于或等于 | x>=8 为 false |
| <= | 小于或等于 | x<=8 为 true |
4、逻辑运算符，逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=4，下表解释了逻辑运算符：
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
5、三目运算符
格式：表达式?“值1”:“值2”,左边为三目运算符的表达式,?后的第一个值为true,：后的值为false.
例子：var num = 10;
num>100?"num的值不大于100":"num的值大于100";
七、JS中的流程控制
1、条件语句，通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。在 JavaScript 中，我们可使用以下条件语句：
(1)、if 语句 ：只有当指定条件为 true 时，该语句才会执行代码。
语法：
if (条件){
只有当条件为 true 时执行的代码
}
例如：
var a = 5; //if else 判断大小
var b = 3;
if(a>b){ //只有当指定条件为 true 时，使用该语句来执行代码
alert("a的值大");
}
(2)、if else语句 ：在条件为 true 时执行代码，在条件为 false 时执行其他代码。
语法：
if (条件)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
例如：
var a = 3; //if else 判断大小
var b = 5;
if(a>b){ //只有当指定条件为 true 时，使用该语句来执行代码
alert("a的值大");
}else{ //当条件不为true 时执行其他代码
alert("b的值大")
}
(3)、 if....else if...else 语句来选择多个代码块之一来执行。
语法：
if (条件 1)
{
当条件 1 为 true 时执行的代码
}
else if (条件 2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
例如：
var score = 60; //判断成绩
if(score<=100 && score>=90){
alert("成绩优");
}else if(score<90 && score>=80){
alert("成绩良");
}else if(score<80 && score>=60){
alert("成绩及格");
}else if(score<60){
alert("成绩差");
}
2、switch语句，基于不同的条件执行不同的动作
语法：表达式n通常为一个变量，n的值与case的值作比较，如果case匹配成功，则执行该case中的代码段，每个case中请使用break来阻止代码向下一个case运行。
如果每个case中都没有break，它将执行所有的case。default代表如果n的值与case都不匹配，则执行default的代码段。
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
例子：
switch (1){ //表达式的值如果等于case的值，并且类型值相同，就运行相应case代码
case 1:
alert("1");
break; //如果不写break,它将执行所有的case,直到遇到某一个case中写了break
case 2:
alert("2");
break;
default:
alert("如果上面的case与n的值都不匹配,则执行我哦~");
break;
}
3、循环流程控制(for,while,do while)
当我们需要重复执行某一个动作或运行相同的代码的时候，我们就可以使用循环
(1)、for循环
语法：
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}
语句 1 在循环开始前执行，通常我们会在这里声明一个变量
语句 2 定义运行循环的条件，通常我们会在这里写一个表达式
语句3只有在本次循环完成后才执行，通常我们会在这里写一个变量的自增或自减,
例如：
//for循环小例子 求1-100的和
var sum = 0;
for(var i=1;i<=100;i++){
sum = sum + i;
}
document.write(sum);
(2)、while循环
语法：
while (条件){
需要执行的代码
}
例如：
//while循环1-10
var i=1;
while(i<=10){
document.write(i+'<br/>');
i++;
}
(3)、do while循环
语法：do/while 循环是 while 循环的变体。不管while中的表达式成不成立，do中的代码段都会执行一次。
do
{
需要执行的代码
}
while (条件);
例如：
//do while
var num = 12;
do{ //至少被执行一次，即使为false也会执行，因为输出代码块在条件之前。
num++;
document.write("num的值为："+num+"<br />");
}
while(num<1);
(4)、break和continue
语法：
continue; //跳出本次循环,且continue上面的代码会执行完，continue下面的代码不会执行。 break; //结束整个循环
例如：
/*break*/
var i=1;
while(i<=10){
if(i==3){
document.write(i+'<br/>');
break; //结束整个循环
}
document.write(i+'<br/>'); //输出的值为：1，2，3
i++;
}
/*continue循环*/
i=1;
while(i<=10){
if(i==3){
i++; //4
continue; //结束本次循环，且continue上面的代码会执行完，continue下面的代码不会执行
}
document.write(i+'<br/>'); //输出1，2，4，5，6，7，8，9，10
i++;
}
八、函数
函数是什么？
定义：函数是为了完成某个功能的代码段,意义是方便维护和重复利用。
函数命名方式：不能用特殊字符，尽量语义化，驼峰式命名，严格区分大小写，函数名重名会产生覆盖,函数最好用事件驱动。
函数的创建方法有三种：
//JS函数创建方法一：
function fun(){
alert("Hello JavaScript");
}
fun(); //定义好的函数如果不被调用,函数是不会执行的
//JS函数创建方法二：将函数存储在变量中,
var fun = function(){
alert("Hello HTML");
}
fun(); //定义好的函数如果不被调用,函数是不会执行的
//JS函数创建方法三：构造函数，函数可以自调！
var fun = new Function(alert("Hello Java"));
函数的调用方法：
//声明一个函数，并调用
function fun(){
alert("Hello JavaScript");
}
fun();
<!--HTML中通过事件调用函数-->
<p>第一题：请问你会HTML吗</p> <button id="a" onclick="fun()" value="会">会</button>
函数的参数传递：
所谓参数传递，就是将实参的值传递给形参。通过调试可以确定形参在函数调用之前是不存在的，当函数被调用的那一刻，实参被创建，并且把实参的内容传递给形参。
//声明一个函数increase(),括号中的num就是这个函数的形参。
function increase(num){
num++;
return num;
}
//调用方法,并传入一个实参10,根据函数要完成的功能的不同,可传入的参数也不同，
alert(increase(10));
参数传递的注意事项：
(1)、形参的命名，不能使用特殊符号，开头只能以$_字母开头,同名产生覆盖，不能有中文。 (2)、虽然JS属于弱类型语言，不强制要求形参和实参必须个数相等，但是实际项目中，形参有多少个，实参我们就传入多少个。
参数传递包含两种方式：值传递和引用传递。
值传递：形参是实参值的一个副本，对形参的改变不会影响实参
引用传递(object,array等)：形参实际上是对实参引用变量的复制，导致这实参、形参都指向同一个对象实体。形参改变会同时改变实参的值。
//值传递
var a = 10;
function increase(a){
a++;
return a;
}
increase(a); //弹出形参11
alert(a); //弹出实参10
//a的值并没有显示预期中的11，还是10。因为形参a和实参a是两个不同的变量，形参a的变化和实参a没有任何关系。
/*引用传递*/
//声明一个person对象
var person = {
name:'Tom',
age:22
}
function myfunc(person){
person.name='jeck';
alert(person.age); //22
}
myfunc(person);
alert(person.name); //输出jeck,而不是Tom
回调函数：传统函数以参数形式输入数据，并且使用返回语句返回值。理论上，在函数结尾处有一个return返回语句，结构上就是：一个输入点和一个输出点。这比较容易理解，函数本质上就是输入和输出之间实现过程的映射。但是，当函数的实现过程非常漫长，你是选择等待函数完成处理，还是使用回调函数进行异步处理呢？这种情况下，使用回调函数变得至关重要，例如：AJAX请求。若是使用回调函数进行处理，代码就可以继续进行其他任务，而无需空等。实际开发中，经常在javascript中使用异步调用，甚至在这里强烈推荐使用！
//回调函数
function fun(){
var num = 1;
return function(){
num = num *10;
document.write(num);
return num;
};
}
var fun = fun();
fun();
浙公网安备 33010602011771号