js一阶段全部笔记总结

js初识笔记

editplus使用快捷键：

Ctrl+shift+n  新创建一个html页面

Ctrl+s  保存文件

Ctrl+z  撤销上一步

Ctrl+x  剪切

Ctrl+b  用指定浏览器打开HTML页面

打开 工具--》 首选项--》 工具  --》 外部浏览器  chrome

Ctrl+/  单行注释

JavaScript

        Html  -  网页内容

        Css  -  网页内容的修饰

        JavaScript  -  专门设计网页的交互效果的语言

        交互：用户输入数据--->程序接收并处理数据------------------------返回处理结果<----------------------

如何编写js：

1. 用浏览器窗口

     打开空白浏览器：about:blank  F12  打开程序员控制台

     换行操作 shift+enter

     输入操作 enter

     在控制台console 编写js代码

1. 随着网页编写js

     在script标签内部进行js代码编写

    例如：alert(“你好~今天第一节js课程”)

1. 外部js文件中编写js，用法同CSS

1.创建 xx.js 文件

2.通过script标签的src属性引入外部js文件

在js文件内部进行js代码的编写

例如： <script src=”0.js”></script>

编写代码的时候需要注意：

1. 所有代码一定是英文输入法！
2. 变量如果不声明不能使用，会报错

js如何运行？

  浏览器中有两个引擎

1. 内容排版引擎  -  解析html和css
2. 脚本解释引擎  -  解释执行js脚本程序

解释执行：不需要编译，直接执行的程序，默认情况下自上而下逐行运行

  例如：var a=3;

        Console.log(a);

        Var b=5;

        Console.l0g(b); （提示：此处会报错，并不影响整部，上方依旧运行！）

Window.οnlοad=function(){  (页面加载完成后，才执行的事件处理函数)

Dom:按照id查找页面中id为box的div元素对象

例： var box=document.getElementById(“box”);

通过元素对象的innerText属性设置显示内容

例：box.innerText=”你好”

}

注释：js中两种注释：单行//  多行/*注释内容*/

      Html<!--注释内容-- >

      Css/*注释内容*/

js的数据类型：2大类

1. 原始数据类型：string - 字符串  

number - 数字  

boolean - 布尔

undefined - 空 针对仅声明但是没有赋值的所有的变量的默认值  

null - 空  针对对象修饰的空

Symbol - 独一无二的值 是es6引入的新数据类型

1. 引用数据类型：function  array  Math  Date

例如：

Var num=3；

Console.log(num);//3

Var str=”3”;

Console.log(num);//”3”

Var boo=true; 布尔类型只有两种：true  false

Console.log(boo);

Var u;

Var n=null;

Console.log(u);

Console.log(n);

数据类型转换：2种；

1. 隐式转换：不需要程序员的干预，js可以自动的完成类型转换

**仅讨论算术计算种的隐式转换

1. 算术计算中，所有数据都会默认转为数字后，在做计算

      Boolean： true -> 1  false -> 0  null -> 0 undefind -> NaN

一些数据无法被转为数字类型，则会转为：NAN -> not a number

只要是NAN参与的运算结果永远是NAN  *NAN不等于，不大于，不小于任何值，包括它自己

2.在+运算中，碰到字符串，+就不再是运算符，而会解析成字符串的拼接符。后果：另一个不是字符串的数据，就会变成字符串数据

Var n1=2,n2=3,

   S1=”2”,S2=”3”,

   b1=true,b2=false;

Var u;

Var n=null;

Console.log(n1+n2);//2+3=5

Console.log(s2-n1);”3”-2=3-2=1

Console.log(s1+n2);“2”+3=“23”

Console.log(b1+n2);true+3=1+3=4

Console.log(b2-s1);false-”2”=0-2=-2

Console.log(n2-u);3-undefined = 3-NAN=NAN

Console.log(n1+n);2+null=2+0=2

Console.log(s2+b1+n1);”3”+true+2=”3”+”true”+’2’=”3true2”

Console.log(s2-b2+s1);”3”-false+”2”=3-0+”2”=3+”2”=”3”+”2”=”32”

Js数据类型转换 - 强制转换 -》 程序员主动的调用API，执行转换操作  API：应用数据接口 -》 功能 指令

任意数据类型转换-》字符串

1. X.toString()

  x不能是undefined和null的数据时才能调用

1. String(x)  ->相当于隐式转换 万能方法

字符串-》 数字

1. parseInt(str);

  转换规则：从第一个字符开始，依次读取每个字符，直到遇到第一个非数字字符就停止，并且转换的过程中，可以自动的跳过开头字符

1. parseFloat(str)

  用法相同，只不过在解析过程中认识第一个小数点

Var u;

Var n=null;

Console.log(typeof(u));

Console.log(typeof(string(u)));

Console.log(n);

Console.log(string(n));

Var width=”90.9.8px”;

Console.log(parseInt(width)+10);// 100

Console.log(width-10);//NAN

Console.log(parseFloat(width)+10);//100.9

1. 算术运算： + - * / %  ++  --

%除法取余数（模运算）

比如n%m 表示n除以m，不取商，而取除不尽的余数

2种用法：

判断是否被整除，比如判断奇偶

n%2等于0  偶数

n%2不等于0  奇数

1. 保证运算的结果绝不超过除数

 例如：var n=13

     Console.log(n%10)； 结果为3

++递增1  --递减1

不论是递增还是递减，表达式有两种

结论：都会将变量种的值+1（-1）后，再存回变量中

注意：表达式有两种，如果输出的是表达式那么，

++n:表示返回n的新值（递增后的值）

n++:表示返回n的旧值（递增前的值）

笔试题：

Var n=3;

ConsoLe.log(n++ + ++n + n++);

1. >3 +4->5 + 5->5

3+5+5 = 13

ConsoLe.log(++n + n++ + ++n);

注意：经上轮的计算后，此时n已经递增了3次了，初始值为6了

1. >7 + 7->7 + 8->9

7+7+9 = 23

1. 关系运算符：将两值作比较 -》返回的结果 true false

  >  <  >=  <=  ==(等于)  ！=（不等） ===（全等）

**关系运算符中：

1. 默认所有的类型转为数字后，再做比较
2. 如果参加比较的2值都是字符串

   依次取出每个字符PK   unicode号

1. 扩展赋值运算： +=  -=  *=  /=  %=

   比如：n+=m -> n=n+m

         n-=m -> n=n-m

今后，只要是累加，累减，累乘，累除，累模原变量的时候，都可以使用

如何在不声明新变量的情况下交换两值位置

Var a=3;

Var b=5

a+=b a=a+b a=3+5=8

b=a-b b=8-5=3

a-=b a=a-b a=8-3=5

Console.log(a);

Console.los(b);

逻辑运算：将多个关系运算综合起来，得出一个结论。返回true或false

3种：&&（与） ||（或） ！（非）

&&：两个条件必须为true，才返回true

     如果前一个条件为false，结论可以定义为false了，并且没有必要看后续的结论

||：两个条件都为false，才返回false

如果前一个条件为true，结论可以定义为true了，并且没有必要看后续结论了

短路逻辑：逻辑运算中，如果前一个条件已经得出结论，后续的条件就不再执行！

如何利用短路逻辑：

1. 一件事，满足条件就做，不满足就不做

      语法：条件&&（操作）--》如果&&号符前面的条件满足，就去执行&&号符后面的操作

    2.如果前一个值有效，就用前一个，否则就用值2

通过输入的年份，判断是否为闰年

1. 可以被4整除且不能被100整除 - 普通闰年
2. 年份可以被400整除 - 世纪闰年

Var year=parseInt(prompt(“请您输入一个年份，判断是否为闰年”))；

Console.log((year%4==0&&year%100!=0)||(year%400==0));

如果消费满500，则打八折

Var total=parseInt(prompt(“请输入消费金额”));

Total>=500&&(total*=0.8);

If(total>=500){

  Total*=0.8;

}

Console.log(“您最终的消费金额为：”+total);

如果用户回复了信息，那么就使用回复信息，否则，就使用默认信息

Var reply=promt(“请输入回复内容”);

Console.log(reply||”这个人很懒，什么也没留下”);

三目运算

                三目运算  三元运算   条件运算

根据不同的条件，执行不同的操作/返回不同的值

语法：

     条件1？值1或操作1：  //满足条件1，才返回值1或操作1

     条件2？值2或操作2：  //............................................

     条件3？值3或操作3：  //.............................................

     默认值或默认操作       //上述条件都不满足，就返回默认值或执行默认操作

  判断是否为闰年，如果是则输出闰年，不是就输出平年

Var y=parselnt(promt(“请输入一个年份”))；

Console.log((y%4==0&&y%100!=0)||(y%400==0)?“闰年”:

“平年”);

if((y%4==0&&y%100!=0)||(y%400==0)){

   Console.log(“闰年”);

}else{

  Console.log(“平年”);

}

If(满足条件){

   执行操作

}

计算克莱托指数：

Klt=体重kg/(身高m*身高)

Klt>25 就输出该减肥了

  <20 就输出该增肌了

      身材正常，继续保持！

                   分支结构

程序结构：

1. 顺序结构：默认程序都是自上而下逐行进行的
2. 分支结构：根据不同的条件，执行不同的操作
3. 循环结构：让程序反复执行同一段代码

  分支结构分为3种情况：

1. 一个条件，一件事，满足就做不满足就不做

  if结构：if(条件语句){满足条件，执行内部操作}

1. 一个条件，两件事，二选一执行

  If..else

  If(条件){

  满足条件执行的代码段

}else{

 不满足条件才执行的代码段

}

1. if..else  if..[else]结构:多个条件多件事

语法

Var total=parseInt(prompt(“请输入消费金额”));

Total>=500&&(total*=0.8);

If(total>=500){

  Total*=0.8;

}

Console.log(“您最终的消费金额为：total);

如果输入的分数<0或者>100，就输出分数无效

              >=90         输出A

              >=80         输出B

              >=60         输出C

              否则         输出D

Var s=prompt(“请输入分数”)；

If(s<0||s>100){

    Sonsole.log(“分数无效”)；

}else if(s>=90){

   Console.log(“A”);

}else if(s>=80){

   Console.log(“B”);

}else if(s>=60){

   Console.log(“C”);

}else{

   Console.log(“D”);

}

Switch case结构：当条件都是全等===比较时，才可以使用switch case机构

语法结构：

  Switch(表达式){

 Case 值1：  满足值1才执行的代码段

 Case 值2：  满足值2才执行的代码段

 .....  .........:

 Default:

   如果前面的条件都不满足，则默认执行此操作

}

一般情况下，进入了switch case结构后，如果满足条件，则会执行后续的所有操作。

解决办法：加break关键词

Break:“终止”当前的结构执行，并跳出结构

位置：在每个case之间

何时可以省略break：上下两个case执行相同的操作时可以省略

模拟电话银行操作

 请用户输入一个数字：

如果用户输入了1，执行查询操作

如果用户输入了2，执行取款操作

如果用户输入了3，执行转账操作

如果用户输入了0，执行退出银行操作

否则，提示按键无效

Var input=parselnt(prompt(“请按键”));

Switch(input){

Case 1:

      Console.log(“查询中......”)；

Bresk;

Case 2:

      Console.log(“取款中......”)；系统维护中......

Bresk;

Case 3:

      Console.log(“转账中......”)；系统维护中.......

Bresk;

Case 0：

      Console.log(“退出银行中......”)；

Bresk;

Default:

  Console.log(“无效按键”)；

}

如果：此时银行系统维护了，如何修改上述代码

删除case 2 并把case 3中的转账改为系统维护

1. 循环结构&函数对象

 循环：让程序反复执行同一段代码

 循环的三要素： 1.循环变量 - 在循环中用于比较的变量

           循环变量总是要向不满足条件的趋势不断变化

2.循环条件 - 让循环继续执行的条件

3.循环体 - 循环内部，反复执行代码

1.while循环：先判断循环条件，再执行

  While（循环条件）{

【迭代修改循环变量；】

      循环体；

      【迭代修改循环变量；】

}

何时使用while循环：在循环变量不规则变化时优先使用while循环

1. do..while循环：先执行，再判断循环条件

   do{

【迭代修改循环变量；】

      循环体；

      【迭代修改循环变量；】

}while(循环条件)

** do while循环和while循环的区别：

如果循环条件满足，则两者基本等效

如果循环条件不满足，do while循环至少执行一次，while一次都不执行

1. for循环：

  for(var 循环变量=初始值[a]；循环条件[b];迭代修改循环变量[c]){

  循环体；[d]

}

for循环的执行顺序：

1. b - d - c - b - d- c

例：

var sum=0;

for(var i=1;i<=100;i++){

  Sum+=1;

}