达内2016前端开发知识点总结--JavaScript基础--5天

Javascript day01

 

1、Javascript概述

2、Javascript基础语法

3、变量和常量(重点)

4、数据类型

*******************************************

1、JS概述

1、什么是JS

JS是一种运行于JS解释器/引擎中的解释型脚本语言

编译型语言：程序在运行前会进行编译

解释型语言：运行之前不会编译，直接执行，出错则停止

 

JS解释器/引擎：是JS脚本的运行环境

1、独立安装的JS解释器(NodeJS)

2、嵌入在浏览器内核中的JS解释器

PC,平板，手机，电视 ... 全部都支持JS

2、JS的发展史

1、1992年 Nombas 为自己的软件开发了一款脚本语言C Minus Minus(C--)后更名为 ScriptEase,可以嵌入在网页中。

2、1995年 Netscape为自己的Navigator2.0 开发了另一种客户端脚本语言-LiveScript,为了借助Java势头，所以更名为 Javascript

3、1996年Microsoft为了进军浏览器市场，在IE3.0 中 发布了Javascript的克隆版，称为JScript

4、1997年，Javascript1.1作为草案提交给了ECMA(欧洲计算机制造商联合会),Javascript的核心 被更名成 ECMAScript

 

完整的JS语言是由三部分组成：

1、核心(ECMAScript)

2、文档对象模型(DOM)

Document Object Model

让JS有能力与页面进行对话(操作页面内容)

3、浏览器对象模型(BOM)

Browser Object Mode

让JS有能力与浏览器进行对话(操作浏览器)

 

JS语言的特点和用途

1、特点

1、任何文本工具都可以开发JS

2、无需编译，直接由JS引擎来执行

3、弱类型语言

由数据来决定数据类型

4、面向对象的语言

2、用于

1、客户端的JS

1、客户端数据计算

2、表单输入验证

3、浏览器事件的触发和处理

4、网页特效制作

5、服务器端的异步数据提交(AJAX)

2、服务器端的JS

1、分布式运算

2、实时服务器

3、窗口应用

4、网络应用

2、JS基础语法

1、使用JS(重点)

1、浏览器内核

内核作用：负责页面内容的渲染

组成：

1、内容排版引擎-解析HTML/CSS

2、脚本解释引擎-解析JS

浏览器   内核名    排版引擎   脚本引擎

IE       Trident   -          Chakra

Firefox  Gecko     -          Monkey

Safari   Webkit    Webcore    Nitro

Chrome   Webkit    Webcore    V8

Opera    Presto    -          Carakan

Opera    Webkit    Webcore    V8

(2013~今)

2、第一个JS程序

1、搭建JS运行环境

1、使用独立安装的JS解释器(NodeJS)

console.log("Hello World");

2、使用浏览器内核中的JS解释器

1、直接在Console中输入脚本并执行

2、将JS脚本嵌入在html页面中执行

1、html元素事件编写脚本

事件：onclick

2、在

 

document.write("被排版引擎所解析的内容");

3、使用外部脚本文件编写JS脚本

1、创建一个  **.js 文件

在文件中编写JS脚本

2、在使用的页面上进行引用

2、JS调试(重要)

console -> consloe

console -> Console

console.log("");--> console.log（“”）；

 

1、代码错误

解释型语言，若某行代码出现错误，解释器则终止此次执行。但不会影响后续块和后续的HTML执行

 

3、语法

1、编写JS代码

1、语句-会被JS解释器所执行的代码

console.log();

document.write();

 

由表达式、关键字、运算符组成

大小写敏感

由分号或换行表示结束

2、注释-不会被JS解释器所执行的内容

单行注释：//

多行注释：/*   */

3、变量和常量(重点)

1、什么是变量

问题：向银行存1000元钱，每年利率5%，求10年后的本息是多少钱？

 

内存：保存计算机程序在运行过程中所需要用到的数据（临时存储）

 

变量：内存中的一段存储空间,目的是为了临时的保存数据。

值：保存在变量(内存空间)中的数据

变量名：内存空间的别名，可以自定义

2、变量的声明

到内存中申请一段空间保存数据

1、语法

1、声明变量

var 变量名;

2、为变量赋值

变量名=值;

注意：

声明时可以省略var关键字，省略之后变量就成了"全局变量"，推荐不要省略var关键字

ex:声明一个变量叫 age，保存数据 18

var age;

age=18;

3、声明变量并直接赋值

var 变量名=值;

ex: var age=18;

4、在一条语句中声明多个变量

声明变量age1的值为18，age2的值为36，age3的值为50

var age1=18;

var age2=36;

var age3=50;

 

语法：

var 变量名1,变量名2=值,.......;

ex:

var age1=18,age2,age3=50;

2、变量名命名规范

1、不允许使用JS关键字及保留关键字

2、可以包含字母、数字、下划线(_)以及$

var %name;//错误，不允许出现%

3、变量名不能以数字开头

var 1=2; //错误，不能以数字开始

var 1name;//错误

4、变量名最好见名知意

var a,b,c,d,e,f,g;

var aa,ab,ac;

//以上方式不推荐

var stuName,stuAge;

var xymc;

5、可以采用"匈牙利命名法","驼峰命名法","下划线命名法"

驼峰命名法：

如果变量名由一个单词组成，全小写

如果变量名由多个单词组合而成，第一个单词全小写，从第二个单词开始，每个单词的首字母变大写

ex:

var age=15;

var stuAge;

3、变量的使用

1、未经初始化的变量

声明了变量，但是没有被赋过值，值默认为 undefined(未定义)

 

var userName;//定义变量，但未赋值

console.log(userName);//undefined

 

小习惯：

声明变量时，字符串的话可以设置默认值为""，如果是数字的话，可以设置默认值为 0

2、变量未被定义过，而被直接使用

console.log(userName);

语法错误!

3、对变量值进行的存、取操作

1、对变量进行存值操作-SET操作

运算符：=(赋值运算符)

如果变量名出现在 = 的左边，就是赋值操作

ex:

var userName;

userName="三丰.张";

 

var userAge=28;

userAge=29;

2、对变量进行取值操作-GET操作

只要变量名称没有出现在=的左边，那么就都是取值操作。

var stuName="张三丰";//为stuName赋值

console.log(stuName);//取值

 

var newName=stuName;

以上操作，对于stuName，是取值操作

对于newName，是存值操作

 

document.write(stuName);

window.alert(stuName);

 

var num1 = 10;

var num2 = 20;

var sum = num1 + num2;

4、运算符-算术运算符

+,-,*,/,%(模)

% : 取余数

5%2=1

6%2=0

适用场合：

1、判断奇偶性和倍数

ex:15 是 3 的倍数吗 ？

15%3=0 ：余数为0，所以15是3的倍数

25%50 = 25

2、获取某数字的最后几位

ex:想获取1234的最后一位数字

1234%10 : 获取最后一位

1234%100 : 获取最后2位

+ :

1、数字运算

如果 + 两边的数据 都是数字类型，则进行的就是 加法操作

var num1 = 15;

var num2 = 18;

var sum=num1+num2;

 

2、字符连接

如果 +两边有一个是字符串的话，则进行的就是 字符连接 操作

var stuName="三丰.张";

var stuAge=18;

var result=stuName+stuAge;//三丰.张18

 

var num1 = "15";//字符串而非数字

var num2 = "18";//字符串而非数字

var sum = num1+num2;

 

var num1 = 15;

var num2 = 18;

var str = "Hello";

//var result=num1+num2+str;//33Hello

var result=str+num1+num2;//Hello1518

5、常量的声明和使用

1、什么是常量

在程序中，一旦声明，在运行过程中就不允许被修改的数据，称之为常量

 

常量在程序中表示的是常理型的数据，如：PI

2、语法

const 常量名=值;

注意：常量名一般采用全大写的模式

 

ex:

1、声明一个常量，来表示PI的值为3.14

const PI=3.14;

2、声明一个常量，来表示一周有7天

const DAYOFWEEK=7;

3、练习

定义一个变量(r)，来表示一个圆的半径。

通过JS来计算该圆的周长(l),以及面积(s)

l = 2πr;

s = πrr;

打印：

半径为 .. 的圆的周长是：xxx

半径为 .. 的圆的面积为：xxx

4、数据类型

8bit(位)=1byte(字节)

1024byte = 1kb(千字节)

1024kb = 1MB(兆字节)

1024MB = 1GB

1024GB = 1TB

 

问题：保存一个数字(25)到内存中，占据多大的空间呢？？？

 

1、什么是数据类型

保存在内存中的数据的类型，数据类型决定了数据在内存中占据多大的空间

2、数据类型分类

1、基本数据类型

1、number类型

数字类型：可以表示32位(即4字节)的整数，也可以表示64位(即8字节)的浮点数(小数)

 

整数：

十进制：逢10进1

八进制：逢8进1

以0作为开始的数字都是八进制数字

var num = 010;

十六进制：逢16进1

0-9,A-F

以0x作为开始的数字都是十六进制

小数：

使用小数点记录数据：12.34

使用指数记录数据：3.14e10

2、string类型

字符串类型：可以表示一系列的文本字符数据

由Unicode字符、数字、标点符号组成

 

查看字符的Unicode编码

字符.charCodeAt();

 

字符 "张"，在内存中的存储形式 :0101111100100000

 

要求：字符串使用过程中，必须用""或''引起来

var num1 = 1000; //数字

var num2 = 1000;

num+num2 : 2000

var str1 = "1000";//字符串

var str2 = "1000";

str1+str2 : 10001000

 

转义字符:

\n : 换行

\r : 回车(非换行，接收指令)

\t : 制表符

\' : '

\" : "

\\ : \

3、boolean类型

布尔类型：来表示结果的真或假，肯定或否定

该类型仅有两个值：

true 表示真(肯定)

false 表示假(否定)

ex:

var isBig = true;

var isSmall = false;

 

在实际运算中，true可以当成1做运算，false可以当成0做运算

4、undefined

语义：访问的数据不存在

产生undefined的场合：

1、声明变量未赋值

2、访问的对象的属性不存在

2、引用类型

 

 

 

Javascript day02

 

 

1、使用JS

1、运行环境

1、独立的JS解释器(NodeJS)

2、浏览器内核中嵌入的JS解释器

1、浏览器 Console 中直接输入脚本

2、将JS嵌入在HTML页面中执行

1、元素事件中

console.log("输出的内容");

2、元素中

3、外部脚本文件

1、创建  .js 文件

2、引入js文件

window.alert("");

alert("");

2、变量和常量

1、变量

1、what

内存中的一段存储空间

2、变量的声明

var 变量名;//声明

变量名=值;//赋值

//声明并赋值

var 变量名=值;

//一次性声明多个变量并赋值

var n1,n2=25,n3,n4;

3、变量名规范

1、不能是JS关键字和保留关键字

2、包含 字母，数字，下划线，"$"

3、不能以数字开头

4、变量的使用

1、声明变量未赋值

值默认为 undefined

2、使用未声明过的变量

console.log(userName);

报错

3、对变量进行的存取操作

1、存 - SET

= : 赋值符号

变量出现在 = 的左边，一定是赋值

 

var num1 = 12;

var num2 = 21;

num1=num1+num2;

console.log(num1);

2、取 - GET

只要变量不出现在=的左边，都是取值操作

var num1 = 12;

var num2 = num1;

console.log(num1);

2、运算符

算术运算符：+，-，*，/，%

1、%

作用：取余数

场合：

1、判断奇偶性或算倍数

2、获取某数字的最后几位

2、+

作用：

1、做数字的 加法 操作

如果 + 两边的数据都是数字类型则做 加法操作

2、做字符串的 连接 操作

如果 + 两边的数据有一个是字符串类型的则做的就是 连接操作

3、常量

1、what

一旦声明后，在程序运行过程中不能被修改的数据叫做常量

2、语法

const 常量名=值;

注意：通常常量名采用全大写模式

3、使用

const PI = 3.14;

PI = 31.4; // 报错

3、数据类型

1、what

保存在内存中的数据的类型

决定了数据在内存中所占的空间大小

2、分类

1、基本数据类型(原始类型)

1、number类型

数字类型：

表示 32 位的整数(4字节)

表示 64 位的浮点数(8字节)

整数：

十进制：var n1 = 123;

八进制：var n2 = 0123;

十六进制：var n3 = 0x12FA;

小数：

小数点表示法：var f1 = 123.456;

指数表示：var f2 = 123.4e10;

2、string类型

字符串类型：

表示一系列的文本字符数据

由Unicode字符、数字、标点组成

Unicode：

1、每个字符 都有一个 独立编码

"我".charCodeAt() : 返回Unicode码的十进制表现形式

 

"我".charCodeAt().toString(2)

返回Unicode码的二进制表现形式

 

"我".charCodeAt().toString(16)

 

返回Unicode码的十六进制表现形式

 

通过 Unicode码 打印字符：

console.log("\u4e00");

2、每个字符 都占据 2字节

 

 转义字符：表示JS中的特殊字符

 \n:换行

 \r:回车(接收指令而非换行)

 \t:制表符

 \':'

 \":"

 \\:\

3、boolean类型

布尔类型：表示真或假的一种结果

只有两个值：

1、true：真

2、false：假

实际运算中：

true 当做 1 运算

false 当做 0 运算

4、undefined类型

语义：访问的数据不存在

产生undefined的场合

1、声明变量未赋值

2、访问不存在的对象的属性

2、引用数据类型

==========================================

1、数据类型的转换

2、运算符和表达式

==========================================

1、数据类型转换

1、弱类型

由数据来决定数据类型

var num;//undefined

num=12;//number

num="你好";//string

num=false;//boolean

 

强数据类型：由数据类型来决定数据

 

1 、typeof() 函数

作用：获取指定数据的数据类型

语法：

typeof(变量) 或者 typeof 变量;

使用：

var result = typeof(变量);

2、隐式转换

不同类型的数据在计算过程中会自动进行转换

特点：

任何一种数据类型的数据，再与string做“+”运算时，都会转换成 string，再做连接

NaN : Not a Number , 不是一个数字

 

函数：isNaN(数据)

作用：判断数据是否为 非数字类型(只判断数值，与类型无关) ，如果是非数字，返回true，是数字返回false

 

问题：将字符串25转换为 数字25，再做加法运算

3、强制转换(显示转换)

由JS提供的一组转换函数来完成数据类型的转换

1、toString()

转换成字符串，任一数据类型的数据均可转换为string类型

语法：数据(变量).toString()

2、parseInt(数据)

将数据转换为number类型(整数)

碰到第一个非整数字符，则停止转换

如果无法转换时，转换的结果为NaN

3、parseFloat(数据)

将数据转换为number类型(小数)

碰到第一个非小数点或数字字符，则停止换换

4、Number(数据)

将一个数据解析为number类型

注意：如果数据中包含非法字符，则返回NaN

 

Number("25") : 25

Number("25.5") : 25.5

Number("25.5abc") : NaN

2、运算符和表达式

1、运算符

做数据的运算

2、表达式

由运算符和操作数所组成的式子，称之为表达式

var a = 5;//赋值表达式

var b = 10;//赋值表达式

a+b;//算术表达式

 

注意：每一个表达式，都有值

console.log(a+b);

 

b=a=a+b;

 

console.log(a=a+b);

3、运算符分类

1、算术运算符

+,-,*,/,%

 

ex:

1、

var a="15";

var b="13";

var result=a-b;//2

注意：

-，*，/，%

如果两边的操作数不是number类型，会试图通过 Number()先进行转换，如果无法转换成Number类型，结果则为NaN

 

++(自增)，--(自减)

++：在自己值的基础上做加1操作

--：在自己值的基础上做减1操作

 

var num=5;

num++; 作为后缀，先去使用变量的值，然后对其进行自增操作

++num; 作为前缀，先对变量进行自增操作，然后再使用变量的值

 

优先级：

先*，/，%，再+，-

想提升优先级：()

 

ex:

1、var result=35+2*18/3+12/6%4

             =35+12+2 = 49

2、var result=(35+2)*(18/(3+3))/6%4

             =37*3/6%4

2、关系运算符

1、运算符

>,<,>=,<=,==(判断等于),!=

 

===(全等),!==(不全等)

 

=== 与 ==的区别:

1、==

只判断数值，不判断类型

"35"==35 结果为 true

2、===

判断 类型以及数值 是否都相等

"35"===35 结果为 false

 

由关系运算符组成的表达式称之为关系表达式，关系表达式的结果都是boolean类型

2、特殊注意

1、字符串 和 数字比较大小关系时

先将字符串通过Number()转换成数字再进行比较

2、字符串 和 字符串比较大小关系时

实际上是比较每位字符的Unicode码

张三丰

张无忌

3、NaN参与关系比较时，结果一律为 false

3、isNaN 函数

判断一个数据是否为非数字

isNaN()

3、逻辑运算符

1、作用

多条件之间的判断关系

2、逻辑运算符

逻辑非 : !

逻辑与 : &&

逻辑或 : ||  

 

逻辑与：

判断两个条件，如果两个条件的值都为true的话，整个表达式的结果为true，如果有一个条件的结果为false，整个表达式的结果就为 false

 

ex:

如果 笔试成绩 大于60分，并且面试成绩 也大于 60分，可以入职。

逻辑或：

判断两个条件，两个条件中，有一个条件为true，那么整个 逻辑或 的结果就为 true，否则为 false(两个结果同时为false时)

 

逻辑非：

对现有条件结果进行取反

非真即假

非假即真

练习：判断是数字？是英文字符？是汉字?

var num=prompt("input....");

思路：判断num的所在范围

1、num在 字符 0 到 字符9之间，说明是数字

2、num在字符a到字符z或者在字符A到字符Z之间，说明是英文

3、num在字符 \u4e00 到 \u9fa5 范围内,说明是 汉字

3、短路逻辑

1、&&(短路与)

如果第一个表达式的结果为false，那么第二个表达式就不用再判断，整个表达式的结果为 false

如果第一个表达式的结果为true的话，则继续判断第二个表达式的结果，并且以第二个表达式的执行结果作为整个逻辑表达式的结果。

2、||(短路或)

如果第一个表达式的结果为true的话，那么就不在继续执行第二个表达式，并且将 true作为整个逻辑表达式的结果。

如果第一个表达式的结果为false的话，则继续执行第二个表达式，并且将第二个表达式的计算结果作为逻辑表达式的结果

4、位运算

1、特点

1、做数字运算

2、将数字转换为二进制，再进行运算

2、运算符

1、&

按位 与,将两边的操作数转换成二进制，每位的数字，只有对应都为1的时候，该位的结果才为1，否则该位的结果就是0

ex:

5 & 3 ?

 

5:101

3:011

-----------

r:001

作用：判断一个数字的奇偶性，判断的数字与1做按位与

 

5 & 1?

5 :101

1 :001

-----------

 1

2、|

按位或，两边的操作数转换成二进制，比较每位上的数字，两个数中有1个是1的话，该位的结果为1，否则为0

场合：向下求整

求：5 | 3

5:101

3:011

=========

111

6.5 | 0

==>

6 | 0

6:110

0:000

3、<<

按位左移，将2进制数向左移动几位，后面以0补齐

ex:

2<<1 : 4

2<<2 : 8

2<<3 : 16

 

0000 0000 0000 0000

0000 0000 0001 0000

4、>>

按位右移，将2进制数向右移动几位，前面补0

8>>1 : 4

0000 0000 0000 0000

0000 0000 0000 0100

8>>2 : 2

8>>3 : 1

8>>4 : 0

 

 

Javascript day03

 

1、数据类型转换

1、隐式转换

函数：typeof(变量) 或 typeof 变量

与字符串做加法操作，最后会将其他数据转换为字符串

2、转换函数

1、toString()

2、parseInt(数据)

3、parseFloat(数据)

4、Number(数据)

2、运算符和表达式

1、运算符

算术运算符，关系运算符，逻辑运算符，位运算符 ... ...

2、表达式

由运算符以及操作数所组成的式子

a+b;

a%4==0&&a%100!=0

 

a=b;

3、运算符详解

1、算术运算符

+,-,*,/,%,++,--

++:自增

++作为前缀：先自增再使用

++作为后缀：先使用再自增

 

var num = 5;

num++; ==> num = num + 1

2、关系运算符

>,<,>=,<=,==,!=,===,!==

==:判断等于，判断两个数据是否相等，如果相等，结果为true，否则为false

!=:不等于，判断两个数据是否不相等，如果不相等，结果为true，否则为false

===:判断数值和类型是否完全相等，完全相等时，结果才为true,否则为false

 

由关系运算符组成的表达式称之为 关系表达式，结果一定是boolean的

 

注意：

1、字符串 与 字符串 判断大小

比每位字符的Unicode码

 

"5">"30" : true

2、字符串 与 数字 判断大小时

将字符串 隐式的通过 Number()函数转换为数字再做比较

5>'30' : false

 

3、任何一个数据与NaN进行比较时，结果一定是false

5>'3a' : false,注意，3a会被转换成NaN

3、逻辑运算符

1、逻辑运算符

!:逻辑非

&&:逻辑与

||:逻辑或

2、短路逻辑

1、&&

只要第一个条件为假的话，则不会判断第二个条件，整个表达式结果为假

如果第一个表达式为真的话，则继续判断(执行)第二个表达式，并且以第二个表达式的结果作为整个表达式的结果

2、||

只要第一个条件为真的话，则不会判断第二个条件，整个表达式结果为真

如果第一个表达式为假的话，则继续判断(执行)第二个表达式，并且以第二个表达式的结果作为整个表达式的结果

4、位运算符

1、&

场合：判断奇偶性

2、|

场合：向下取整

3、<<

将二进制数字，向左移动几位，右面以0补位

4、>>

将二进制数字，向右移动几位，左边以0补位

5、^

异或

将两边的数字转换成二进制进行比较，每位上的数字，只有一个为1时，该位结果才为1，否则为0

var num1=5;

var num2=3;

 

num1=num1^num2;

5:101

3:011

-----

r:110 => 6 (num1=6)

 

num2=num2^num1;

3:011

6:110

-------

r:101 => 5 (num2=5)

 

num1=num1^num2;

6:110

5:101

--------

r:011 => 3 (num1=3)

=========================

1、运算符

1、赋值运算符

1、使用"="进行赋值

注意：

赋值符号的左边，必须是变量

const PI=3.14;(特殊)

2、扩展赋值表达式

+=,-=,*=,/=,%=,&=,|=,^=

ex:

var num = 5;

num+=3; ==> num=num+3;

 

num-=5; ==> num=num-5;

语法：a+=b;==> a=a+b;

2、字符串连接

运算符： +

3、条件运算符(三目运算符、三元运算符)

单目运算符：!,++,--

双目运算符：+,-,*,/,%,&&,||,^,&,|,>,<

三目运算符：需要三个操作数/表达式

 

语法：

表达式1?表达式2:表达式3;

表达式1的运行结果应为boolean类型

若表达式1为true，则整个表达式的值为表达式2的运算结果

若表达式1为false,则整个表达式的值为表达式3的运算结果

 

条件表达式允许被嵌套：

判断考试成绩，如果考试成绩>=80，则输出成绩优秀，如果大于等于60分，输出成绩合格，否则输出不及格

2、函数

1、什么是函数

没有函数的弊端：

1、事件中想执行JS脚本只能逐行编写

2、可重用性不高

 

函数(function)：可以被称之为方法(method)，过程(procedure)

 

是一段预定义好，并可以被反复使用的代码块

1、预定义

事先声明好的内容，不会马上被执行

2、反复使用

提升代码的可重用性

3、代码块

允许包含若干条的可执行语句

其实函数就是一段独立的功能体,同时也是一个功能完整的对象

2、定义函数

语法：

function 函数名(){

//函数体(待执行的代码块)

}

 

调用函数：

在任意合法的JS脚本位置处都可以调用函数。

语法：函数名();

 

练习：

编写一个函数，名称为change，函数体内要求用户从弹框上录入两个数字，并且进行数字的交换，最后打印输出交换后的两个数字。通过一个 按钮 调用该函数

学过的函数：

console.log("World");

alert();

prompt();

document.write();

Number();

toString();

parseInt();

parseFloat();

charCodeAt();

isNaN();

3、带参数函数的声明

1、参数

定义函数数，需要由外部传入到函数内部进行辅助运行的数据，称之为参数

console.log("Hello World");

2、声明带参函数

function 函数名(参数列表){

 

}

 

参数列表：由,隔开的参数名称的声明

function 函数名(参数1,参数2,参数3){

 

}

定义函数时定义的参数称之为"形参(形式参数)"

 

调用带参函数：

函数名(参数列表);

参数列表：由,隔开的具体参数值来组成的列表。

调用函数时所传递的参数称之为"实参(实际参数)"

 

var result=parseInt(35.5);

console.log(result);

4、带返回值的函数声明

1、返回值：调用完函数后，由函数内部返回给函数调用处的一个值。

2、声明带返回值的函数

function 函数名(参数列表){

//函数体(语句)

return 值;

}

注意：

1、方法的返回值可以灵活添加，但最多只能有一个

2、程序碰到return就会返回到函数调用处，所以，return后面的代码是不会被执行的。

5、函数内调用函数

function 函数(参数列表){

/*调用函数*/

函数();

}

6、变量的作用域

1、什么是作用域

作用域就是变量与函数的可访问范围，它控制着函数与变量的可见性与生命周期

 

JS中作用域可分为以下两种：

1、函数作用域，只在当前函数内可访问

2、全局作用域，一经定义，在代码中的任何位置都能访问

2、函数作用域中的变量

又称为 局部变量，只能在当前函数中访问，离开函数无法访问

3、全局作用域中的变量

又称为 全局变量，定义后，在JS的任何位置处都可以访问得到

定义方式：

1、独立于任何function的位置处

2、声明变量时不使用var关键字

注意：必须先调用 变量所在的函数后，才可以继续使用全局函数

4、声明提前

JS程序在正式运行前，会将所有的var声明的变量和function声明的函数，预读到所在作用域的顶部

但是对变量的赋值还保留在原有位置。

5、按值传递

基本数据类型的数据，在作为实参传递时，实际上将参数的值复制了一份副本进行传递的。

7、函数的作用域

也分为“全局作用域(全局函数)”以及“函数作用域(局部函数)”

 

全局函数：

声明在独立于任何function的位置处，位于JS的最外层

局部函数：

在一个函数内部定义的函数，就是局部函数

3、分支结构

1、程序的流程控制

程序=数据结构 + 算法

 

任何复杂算法都有以下几种结构：

1、顺序结构

2、分支选择结构

3、循环结构

 

分支结构：

程序在运行过程中，在不同的条件下可以选择执行某些程序

 

1、当条件满足时运行某些语句

当条件不满足时则不运行这些语句-if结构

2、当条件满足时运行某些语句

当条件不满足时则运行另外一些语句-if...else 结构

2、if结构

1、语法

if(条件){

语句块

}

 

执行流程：

1、判断条件的结果

若值为true，则执行if语句块中的语句

若值为false，则不执行if语句块中的语句

2、注意

1、条件应该是boolean类型的值或表达式

如果条件不是boolean的话，则会进行自动转换

以下几种情况会默认转换为 false

if(0){}

if(0.0){}

if(NaN){}

if(undefined){}

if(""){}

if(null){}

 

ex:

if(28){}

if(2.8){}

if("我帅吗"){}

2、if(条件)后的{}可以省略，但不推荐

如果 省略了{} ，那么if结构只控制if下的第一条语句

3、if...else 结构

1、语法

if(条件){

//语句块1

}else{

//语句块2

}

 

流程：

1、判断条件

若值为true，则执行语句块1

(否则)若值为false，则执行语句块2

 

 

 

 

Javascript day03

 

 

1、数据类型转换

1、隐式转换

函数：typeof(变量) 或 typeof 变量

与字符串做加法操作，最后会将其他数据转换为字符串

2、转换函数

1、toString()

2、parseInt(数据)

3、parseFloat(数据)

4、Number(数据)

2、运算符和表达式

1、运算符

算术运算符，关系运算符，逻辑运算符，位运算符 ... ...

2、表达式

由运算符以及操作数所组成的式子

a+b;

a%4==0&&a%100!=0

 

a=b;

3、运算符详解

1、算术运算符

+,-,*,/,%,++,--

++:自增

++作为前缀：先自增再使用

++作为后缀：先使用再自增

 

var num = 5;

num++; ==> num = num + 1

2、关系运算符

>,<,>=,<=,==,!=,===,!==

==:判断等于，判断两个数据是否相等，如果相等，结果为true，否则为false

!=:不等于，判断两个数据是否不相等，如果不相等，结果为true，否则为false

===:判断数值和类型是否完全相等，完全相等时，结果才为true,否则为false

 

由关系运算符组成的表达式称之为 关系表达式，结果一定是boolean的

 

注意：

1、字符串 与 字符串 判断大小

比每位字符的Unicode码

 

"5">"30" : true

2、字符串 与 数字 判断大小时

将字符串 隐式的通过 Number()函数转换为数字再做比较

5>'30' : false

 

3、任何一个数据与NaN进行比较时，结果一定是false

5>'3a' : false,注意，3a会被转换成NaN

3、逻辑运算符

1、逻辑运算符

!:逻辑非

&&:逻辑与

||:逻辑或

2、短路逻辑

1、&&

只要第一个条件为假的话，则不会判断第二个条件，整个表达式结果为假

如果第一个表达式为真的话，则继续判断(执行)第二个表达式，并且以第二个表达式的结果作为整个表达式的结果

2、||

只要第一个条件为真的话，则不会判断第二个条件，整个表达式结果为真

如果第一个表达式为假的话，则继续判断(执行)第二个表达式，并且以第二个表达式的结果作为整个表达式的结果

4、位运算符

1、&

场合：判断奇偶性

2、|

场合：向下取整

3、<<

将二进制数字，向左移动几位，右面以0补位

4、>>

将二进制数字，向右移动几位，左边以0补位

5、^

异或

将两边的数字转换成二进制进行比较，每位上的数字，只有一个为1时，该位结果才为1，否则为0

var num1=5;

var num2=3;

 

num1=num1^num2;

5:101

3:011

-----

r:110 => 6 (num1=6)

 

num2=num2^num1;

3:011

6:110

-------

r:101 => 5 (num2=5)

 

num1=num1^num2;

6:110

5:101

--------

r:011 => 3 (num1=3)

=========================

1、运算符

1、赋值运算符

1、使用"="进行赋值

注意：

赋值符号的左边，必须是变量

const PI=3.14;(特殊)

2、扩展赋值表达式

+=,-=,*=,/=,%=,&=,|=,^=

ex:

var num = 5;

num+=3; ==> num=num+3;

 

num-=5; ==> num=num-5;

语法：a+=b;==> a=a+b;

2、字符串连接

运算符： +

3、条件运算符(三目运算符、三元运算符)

单目运算符：!,++,--

双目运算符：+,-,*,/,%,&&,||,^,&,|,>,<

三目运算符：需要三个操作数/表达式

 

语法：

表达式1?表达式2:表达式3;

表达式1的运行结果应为boolean类型

若表达式1为true，则整个表达式的值为表达式2的运算结果

若表达式1为false,则整个表达式的值为表达式3的运算结果

 

条件表达式允许被嵌套：

判断考试成绩，如果考试成绩>=80，则输出成绩优秀，如果大于等于60分，输出成绩合格，否则输出不及格

2、函数

1、什么是函数

没有函数的弊端：

1、事件中想执行JS脚本只能逐行编写

2、可重用性不高

 

函数(function)：可以被称之为方法(method)，过程(procedure)

 

是一段预定义好，并可以被反复使用的代码块

1、预定义

事先声明好的内容，不会马上被执行

2、反复使用

提升代码的可重用性

3、代码块

允许包含若干条的可执行语句

其实函数就是一段独立的功能体,同时也是一个功能完整的对象

2、定义函数

语法：

function 函数名(){

//函数体(待执行的代码块)

}

 

调用函数：

在任意合法的JS脚本位置处都可以调用函数。

语法：函数名();

 

练习：

编写一个函数，名称为change，函数体内要求用户从弹框上录入两个数字，并且进行数字的交换，最后打印输出交换后的两个数字。通过一个 按钮 调用该函数

学过的函数：

console.log("World");

alert();

prompt();

document.write();

Number();

toString();

parseInt();

parseFloat();

charCodeAt();

isNaN();

3、带参数函数的声明

1、参数

定义函数数，需要由外部传入到函数内部进行辅助运行的数据，称之为参数

console.log("Hello World");

2、声明带参函数

function 函数名(参数列表){

 

}

 

参数列表：由,隔开的参数名称的声明

function 函数名(参数1,参数2,参数3){

 

}

定义函数时定义的参数称之为"形参(形式参数)"

 

调用带参函数：

函数名(参数列表);

参数列表：由,隔开的具体参数值来组成的列表。

调用函数时所传递的参数称之为"实参(实际参数)"

 

var result=parseInt(35.5);

console.log(result);

4、带返回值的函数声明

1、返回值：调用完函数后，由函数内部返回给函数调用处的一个值。

2、声明带返回值的函数

function 函数名(参数列表){

//函数体(语句)

return 值;

}

注意：

1、方法的返回值可以灵活添加，但最多只能有一个

2、程序碰到return就会返回到函数调用处，所以，return后面的代码是不会被执行的。

5、函数内调用函数

function 函数(参数列表){

/*调用函数*/

函数();

}

6、变量的作用域

1、什么是作用域

作用域就是变量与函数的可访问范围，它控制着函数与变量的可见性与生命周期

 

JS中作用域可分为以下两种：

1、函数作用域，只在当前函数内可访问

2、全局作用域，一经定义，在代码中的任何位置都能访问

2、函数作用域中的变量

又称为 局部变量，只能在当前函数中访问，离开函数无法访问

3、全局作用域中的变量

又称为 全局变量，定义后，在JS的任何位置处都可以访问得到

定义方式：

1、独立于任何function的位置处

2、声明变量时不使用var关键字

注意：必须先调用 变量所在的函数后，才可以继续使用全局函数

4、声明提前

JS程序在正式运行前，会将所有的var声明的变量和function声明的函数，预读到所在作用域的顶部

但是对变量的赋值还保留在原有位置。

5、按值传递

基本数据类型的数据，在作为实参传递时，实际上将参数的值复制了一份副本进行传递的。

7、函数的作用域

也分为“全局作用域(全局函数)”以及“函数作用域(局部函数)”

 

全局函数：

声明在独立于任何function的位置处，位于JS的最外层

局部函数：

在一个函数内部定义的函数，就是局部函数

3、分支结构

1、程序的流程控制

程序=数据结构 + 算法

 

任何复杂算法都有以下几种结构：

1、顺序结构

2、分支选择结构

3、循环结构

 

分支结构：

程序在运行过程中，在不同的条件下可以选择执行某些程序

 

1、当条件满足时运行某些语句

当条件不满足时则不运行这些语句-if结构

2、当条件满足时运行某些语句

当条件不满足时则运行另外一些语句-if...else 结构

2、if结构

1、语法

if(条件){

语句块

}

 

执行流程：

1、判断条件的结果

若值为true，则执行if语句块中的语句

若值为false，则不执行if语句块中的语句

2、注意

1、条件应该是boolean类型的值或表达式

如果条件不是boolean的话，则会进行自动转换

以下几种情况会默认转换为 false

if(0){}

if(0.0){}

if(NaN){}

if(undefined){}

if(""){}

if(null){}

 

ex:

if(28){}

if(2.8){}

if("我帅吗"){}

2、if(条件)后的{}可以省略，但不推荐

如果 省略了{} ，那么if结构只控制if下的第一条语句

3、if...else 结构

1、语法

if(条件){

//语句块1

}else{

//语句块2

}

 

流程：

1、判断条件

若值为true，则执行语句块1

(否则)若值为false，则执行语句块2

 

4、练习

使用 if 结构 完成 克莱托指数判断

 

 

 

 

 

 

 

Javascript day04

 

1、函数

1、什么是函数

是一段预定义好，并可以被反复使用的代码块

预定义：事先声明好

反复使用：提升代码的可重用性

代码块：允许包含多条可执行语句

2、声明函数

1、普通函数

function 函数名(){

//代码块

}

2、带参函数

参数：由外部传入到函数内部的数据

function 函数名(参数列表){

 

}

3、带返回值函数

返回值：需要返回给函数调用处的一个数据

function 函数名(参数列表){

return 值;

}

3、函数调用

1、普通函数

函数名();

2、带参函数

函数名(参数列表);

注意：传参时，按照形参的顺序来传递

3、带返回值函数

var result = 函数名(参数列表);

4、变量的作用域

1、什么是作用域

变量 或 函数的可访问范围，控制着变量的可见性和生命周期

 

作用域分类：

1、函数作用域：在声明的函数内可访问

2、全局作用域：在任何位置都能访问的

2、局部变量

出了定义的范围就无法使用

3、全局变量

1、独立于任何function的位置处声明变量

2、在 函数内 ，通过不使用var关键声明变量

function test{

stuName="张三丰";

}

4、声明提前

var 声明的变量以及function 声明的函数 会被预读到所在作用域的顶端，赋值还保留在原来的位置

function test(){

console.log(age);//undefined

console.log(...);

var age = 25;

console.log(age);

}

5、按值传递

JS基本数据类型在做参数传递时，实际上传递的是值的副本，在函数内的任何操作，不会影响到函数外的原始值

6、函数的作用域

1、局部函数

将 函数 声明在某个 函数内

2、全局函数

将 函数 声明在独立于任何function的位置处

7、全局函数

parseInt()

parseFloat()

Number()

isFinite()

encodeURI()

decodeURI()

eval()

2、分支选择结构

1、程序的流程控制

1、顺序结构

2、分支结构

3、循环结构

2、if结构

1、语法

if(条件){

语句块

}

 

2、注意

1、如果条件不是boolean类型，则会进行自动转换

以下情况可以被转换成假：

if(0){}

if(0.0){}

if(undefined){}

if(""){}

if(null){}

if(NaN){}

2、可以省略if后的{}

省略{}if只控制它下面的第一条语句

所以不建议省略

3、if...else...结构

如果 ... 否则 ...

1、语法

if(条件){

语句块1;

}else{

语句块2;

}

=============================

1、分支结构

2、循环结构

=============================

1、分支结构

1、else...if语句(多重if结构)

1、问题

根据考试成绩，给出 A-E 等级

成绩为100分，则输出A

成绩在90分以上 则输出B

成绩在80分以上 则输出C

成绩在60分以上 则输出D

否则 输出E

2、语法

if(条件1){

语句块1;

}else if(条件2){

语句块2;

}else if(条件3){

语句块3;

}... ...else{

语句块n;

以上条件都不满足时，才运行else

}

注意：else是可有可无的。

3、练习

要求用户通过 弹框 输入年，输入月，输入日，判断 该日 是这一年的第多少天?

输入年：2016

输入月：10

输入日：27

2016年10月27日是2016年的第301天

1月：31

2月：闰年 29天,(如果平年则 28天)

3月：31天

4月：30

5月：31

6月：30

7月：31

8月：31

9月：30

2、switch-case 结构

1、作用

为了简化 等值判断 的条件判断结构

2、语法

switch(变量/表达式){

case 值1:

语句块1;

break; //该语句块的结束

case 值2:

语句块2;

break; //表示结束，可以不写

... ...

default:

语句块n;

break;

}

1、执行流程

1、解析 表达式或变量中的值

2、用 解析出的数值 与 case 后的数值进行等值比较

如果 比较成功，则执行该case后的语句块

3、执行完成后，如果碰到 break则结束整个switch结构，否则继续向下执行(非判断)

3、switch-直落形式

两块或多块case之间，没有任何操作代码，表示 多块case要执行相同的操作

switch(变量/表达式){

case 值1:

case 值2:

case 值3:

语句块;

break;

}

2、循环结构

1、问题

1、在控制台上输出一句 "Hello World"

2、在控制台上输出十句 "Hello World"

3、在控制台上输出1000句 "Hello World"

4、将1000句 "Hello World" 更换成 "你好 世界!"

5、在 "你好 世界" 基础上 增加 "第1遍 你好 世界"

2、什么是循环结构

循环：一遍又一遍的重复执行相同或相似的代码

生活中的循环：

1、循环听歌：有开始，有结束

2、上学：有开始，右结束

3、长跑运动员：有开始，有结束

循环特点：

1、循环条件

规定了循环的执行次数

2、循环操作

要执行相同或相似的语句-循环中做了什么

3、循环结构-while循环

1、语法

while(条件){

//循环操作

}

 

流程：

1、判断 循环条件

2、如果条件为真，则执行循环操作，然后再判断条件，如果条件为真，则继续执行循环操作... ...

3、直到条件为 假时，则结束循环操作

练习1：

1、打印 1-1000之间 所有的数字

2、计算 1-1000之间 所有的数字之和

3、计算 1-1000之间 所有奇数数字之和

2、循环流程控制语句

1、continue

终止本次循环的执行，继续下次循环

ex：

打印1-1000之间，所有 非3的倍数的数字

2、break

提前退出循环结构

 

3、练习

要求用户从弹框中 反复录入数据，并打印输出，直到 输入 exit 为止。

条件：输入 exit 则退出

操作：

1、要求用户录入数据

2、判断是否为 exit

3、不是 exit，则打印输出

4、循环结构-do...while()循环

1、语法

do{

//循环操作

}while(条件);

 

流程：

1、先执行循环操作

2、判断循环条件

如果值为真，则继续执行循环操作

如果值为假，则退出循环

场合：

先执行循环体，根据循环体内的操作再决定循环条件时，使用do...while

2、while 与 do...while 的区别

1、while ：先判断，后执行，最少一次都不执行循环操作

2、do...while : 先执行，后判断，最少执行一次循环操作

Javascript day05

 

 

1、分支结构

1、else...if结构

1、语法

if(条件1){

语句块1;

}else if(条件2){

语句块2;

}... ...else{

}

 

2、switch...case结构

1、场合

等值判断

2、语法

switch(变量/表达式){

case 值1:

语句块1;

break;

case 值2:

语句块2;

break;

... ...

default:

语句块n;

break;

}

3、不加break

从匹配的case块开始，一直向下执行，直到结束或碰到break位置

4、直落形式

两个case块之间没有任何内容

switch(变量){

case 1:

case 2:

case 3:

console.log("匹配到1,2,3,会执行相同的操作");

break;

}

2、循环

什么是循环：

一遍又一遍重复的执行相同或相似的代码

循环的特点：

1、循环条件

2、循环操作

 

1、while

1、语法

while(条件){

操作

}

2、循环的流程控制语句

1、continue

继续，终止本次循环，继续执行下次循环

2、break

破坏，结束整个循环

 

while(true){

switch(num){

case 1:

...

break;

case 2:

...

break;

case 3:

...

continue;

}

}

以上写法是正确的，continue 主要作用在 while循环中，而不是switch结构

 

switch(num){

case 1:

...

break;

case 2:

...

break;

case 3:

...

continue;

}

以上写法是错误的，continue是不能作用在switch结构中的。

2、do...while

1、语法

do{

操作

}while(条件);

 

执行流程：

1、先执行 循环操作

2、判断循环条件，如果条件为false，则退出循环，如果条件为true，则继续执行循环操作

2、while 循环 与 do...while循环的区别

1、while

先判断条件，后执行操作

最少一次都不执行

2、do...while

先执行操作，后判断条件

最少会执行一次循环操作

 

猴子吃桃问题

猴子摘下了若干个桃子，当即吃了一半，还不过瘾，又多吃了一个，第二天，又将剩下的桃子吃了一半，又多吃一个。以后每天都吃了前一天剩下的一半零一个。到第10天的时候，发现只剩下一个桃子。求：第一天共摘下多少个桃子。

 

假设：

第一天 共摘了 total 个桃子

每天剩下的桃子 left 个(默认是1)

 

天数      left   公式(推前一天)

10天        1    left(1)=total/2-1 ==> total=(left+1)*2

      09天        4 total=(left+1)*2

      08天       10    total=(left+1)*2; left=total;

07天       22

06天       46

05天       94

04天       190

03天       382

02天       766

01天       1534

==========================================

1、循环结构-for

1、while

在控制台上输出1-100之间所有的数字

//1、声明条件:从1开始

var i=1;

//2、循环结构-循环条件

while(i<=100){//条件

console.log(i);//3、操作

i++;//4、更新循环变量

}

2、for语法

for(表达式1;表达式2;表达式3){

//循环操作

}

表达式1：声明条件

表达式2：循环条件判断

表达式3：更新循环变量

 

for循环执行流程：

1、计算表达式1的值

2、计算表达式2的值(boolean)，如果为true，则执行循环体，如果为false，则退出循环

3、执行循环体

4、计算表达式3的值

5、计算表达式2... ...

 

3、for语句三个表达式的特殊用法

1、表达式1 允许为空

for(;表达式2;表达式3){

}

 

表达式1;

for(;表达式2;表达式3){

}

2、表达式2 允许为空

如果省略的话，则为死循环

最好在循环内部补充退出条件

3、表达式3 允许为空

死循环

4、三个表达式都允许为空

for(;;){

console.log("这是死循环");

}

5、表达式1 和 表达式3 的内容可以多样化

允许编写多个表达式

4、循环嵌套

for/while/do.while 多允许相互嵌套或转化

循环嵌套：在一个循环中，又出现另一个循环

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

for(var j=1;j<=10;j++){

console.log(j);

}

}

5、while/do..while/for 的异同点

1、for 和 while

共同点：

先判断条件，再执行循环体

使用场合：

1、for

优先使用在确定循环次数的场合下

2、while

优先使用在不确定循环次数的场合下

2、do...while

先执行循环操作，再判断循环条件

最少 执行1次循环

场合：

1、优先适用于不确定循环次数的场合下

2、先执行循环体，根据循环体内的操作决定循环条件时，使用do...while

 

练习：

要求用户 弹框中分别输入 年，月，日

求：该日 是星期?

前提：1900.1.1 是星期一

 

求：2016.10.28

1900.1.1 - 2015.12.31 ： x

2016.1.1 - 2016.9.30 ：y

2016.10.28 距 1900.1.1 ：x+y+28

 

 

 

练习：

1、控制台上 打印输出 *

2、控制台上 打印输出 *****

3、控制台上 打印输出

*****

*****

*****

*****

*****

4、控制台上 打印输出 以下内容

*        第1行 1个星星

**       第2行 2个星星

***      第3行 3个星星

****     第4行 4个星星

*****    第5行 5个星星

5、打印99乘法表

1*1=1

1*2=2 2*2=4

1*3=3 2*3=6 3*3=9

1*4=4 2*4=8 3*4=12 4*4=16

.....

1*9=9 2*9=18 3*9=27 4*9=36

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3、练习

1、打印输出 1-1000之间所有的奇数

2、计算 1-1000 所有偶数的和

 

 

1*1=1

1*2=2 2*2=4

1*3=3 2*3=6 3*3=9

...

 

3、素数

从3 开始

3 是素数

4 不是素数

5 是素数

6 不是素数

7 是素数

8 不是素数

9 不是

10 不是

11 是

 

  10：2-9

 

35：2-34/2

36: 2-36/2

 

36/18 = 2

36/19 = 1.0000

36/36 = 1

 

有一对兔子，从出生的第3个月起每个月都生一对兔子，小兔子长到第3个月后每个月又生一对兔子，假如兔子都不死，问某个月的兔子总和是多少

 

1,1,2,3,5,8,... ...

 

1,1,2,3,5,8,13,21,34,55,89

斐波那契数列

var n1=1,n2=1;

 

n1 = n1 + n2;

n2 = n1 + n2;

console.log(n1);

console.log(n2);

 

n1 = n1 + n2;

n2 = n1 + n2;

console.log(n1);

console.log(n2);

求：数列中，某位上的数字时多少

 假定 f(10); 想求 第10个月 兔子的总量

    f(20); 想求 第20个月 兔子的总量

 

f(5); 想求 第5个月 兔子的总量

f(4); 想求 第4个月 兔子的总量

f(3); 想求 第3个月 兔子的总量

f(2); 想求 第2个月 兔子的总量 = 1

f(1); 想求 第1个月 兔子的总量 = 1

 

f(3)=f(2)+f(1)

f(4)=f(3)+f(2)

f(5)=f(4)+f(3)

...

f(100)=f(99)+f(98)