JavaScript基础

01-JavaScript基础

第1章JS概述

1.1JS作用

1.验证表单（以前的网速慢）

2.页面特效(PC端的网页效果）

3.移动端（移动web和app)

4.异步和服务器交互(AJAX)

5.服务端开发(node.js )

1.2 弱类型脚本语言（解释型语言，

解析执行与编译执行）

1.2.1 解析执行与编译执行

编译执行：把代码编译成CPU认识的语言（文件），然后整体的执行

解析执行：一行一行解析，解析一行执行一行。

1.2.2 弱类型脚本语言

脚本语言是：弥补编译语言的不足而存在的，作为补充语言，不用编译。

弱类型语言：简单理解定义一个变量，可以有多种

数据类型。( var temp )

1.3 组成（前端标准和JS组成）

1.3.1 前端标准( HTML/CSS/JS )

HTML        提供网页上显示的内容

CSS             美化网页（样式）

JavaScript(JS )   控制网页行为（行为）

设计原则：

结构、样式、行为---分离!

1.3.2 JS组成

JS =高级ECMAScriptDOM +BOM

ECMASeript（前身为欧洲计算机制造商协会）

o JavaScript的语法规范

DOM ( Document Obiect Model的简称）

oJavgScript操作网页上元素的API

BOM( Browser Obiect Model的简称）

o JavaScript操作浏览器部分功能的API

1.4 輪出语句

1、console.log(“内容”)在控制台打印输出内容

2、alert(“内容”)弹窗显示内容

3、document.write(“内容”)在页面书写内容

4.promot(询问问题弹窗显示内容.用户可以输入内容

5、confirm(‘内容’）弹窗显示内容，有确认和取消按钮

1.5 引入方式

1.5.1内联式（学习期间用）

1.5.2 外链式（实际开发）

注释问题：单行，多行，方法注释等....快捷键：

ctrl+/ 和ctrl+shift+/

第2章变量

2.1 命名规则

驼峰命名规则：

getElementByld/matherAndFather/aaaOrBbbAndCcc

遵从规则：

1.变量命名必须以字母或是下标符号”_”或者”$”为开头。

2.变量名长度不能超过255个字符。

3.变量名中不允许使用空格，首个字不能为数字。

4.不要使用脚本语言中保留的关键字及保留符号作为变量名。

5.变量名区分大小写。(javascript是区分大小写的

语言）

6.汉语可以作为变量名。但是不建议使用!!!

2.2 变量使用

2.2.1 定义赋值和定义后在赋值

var age = 19;

Var age;

age = 19

不建议使用：

var age=“张三”；age= 19:

2.3 案例：交换变量

非数值型和数值型。

需求：定义一个中间值，交换两个变量

需求：交换两个变量（数值型）而且不能用中间值。（求和）

第3章 数据类型

3.1数据类型划分

使用关键字typeof:查看方法：typeof name或者 typeof(name)

3.1.1 简单数据类型（值类型）

四种：字符串  未定义 空 数字 布尔

String

Boolean

Number

undefined

null

3.1.2 复杂数据类型(引用类型)

Object、function、Array、Date、RegExp、Error......g

3.2 字面定的值，让你从“字面上”理解其含义。

数值字面量

var age=18；//数值字面量，18为字面值

3.3 借单数据类型介绍

3.3.1 Number

1.进制

进制包括2进制、8进制(011)、10进制、16进制(OxA)、制等....

2.浮点数

因为精度丢失问题，所以不判断计算后的两个浮点数是否相等。

3.数值范围

由于内存的限制，ECMAScript 并不能保存世界上所

有的数值

最小值：Number.MIIN_UALUE，这个值为：5e-324

最大值：Number.MAX_VALUE，这个值为：1.7976931348623157e+308

无穷大：Infinitu

无穷小：-Infinity

4. NaN

(a) NaN非数值(Not a Number的简写）

console.log(“abc ”/18);//结果是NaN Undefined和任何数值计算为NaN;

NaN与任何值都不相等，包括NaN 本身

(b)isNaN():任何不能被转换为数值的值都会导致这个函

数返回 true

( isNaN译为是否特合一个标准，什么标准呢?不是一个数字的标准，如果符合了那么就不是一个数字，不符合就是一个数字）

3

isNaN(NaN):// true

isNaN(“blue");// true

isNaN(123)；// false

3.3.2 String

1.字面量定义方式

用引号时，可单可双，唯独不可一单一双。可用.length看有几个字符。

var name= "zhangsan";

2.转译

总结：无法输出的字符，先输出/，在输出字符。(“、\、换行等...)

3.字符串不可变

在内存中不会立刻消失，只能二次赋值，原有的字符在口一定时间内被垃圾回收器回收。

4.!字符串拼接

如果两个变量都是字符串，无论是否包含数字，只要是拼接，那么在前一个后面添加后一个字符串。(+与-情况不同，详情参考数据转换）

3.3.3 Booblean

1.Boolean类型有两个字面量：true和false，区分大小

写。（大写不对）

虽然Boolean类型的字面值只有两个，但ECMASeript中所有类型的值都有与这两个Boolean

值等价的值

2.true

true、除0数字、“something”、Object（任何对象）

为true

3.false

false、0、“”、undefined 、null、NaN为false

4.if判断时会把(）内的值强行转换成boolean类型进行判断。

3.3.4 undefined和null

null和undefined有最大的相似性。

看 看null == undefined的结果(true)也就更加能说明这点。

但是null ===undefined的结果(false)。

不过相似归相似，还是有区别的，就是和数字运算时：10+null结果为：10；

10 + undefined结果为：NaN。

任何数据类型和undefined运算都是NaN;任何值和null运算，null可看做0运算。

第4章 数据类型转换

转换成字符串类型

转换成数值类型

转换成布尔类型

4.1 任何简单类型转换成String(三种方法）

4.1.1 变量+“”或者 变量+” abc ”

4.1.2 String（变量）

4.1.3 变量.toString() 注意：undefined和null不可以

Null和undefined无toString方法。

4.2 任何简单类型转换成Number

此转换容易产生NaN，一旦被转换的变量中含有非

数字字符，都容易出现NaN

4.2.1 变量*/一个数字（有非数字字特会出现NaN )

例：var num1

“11"- 0;

=“11"* 1;var num =“11”/1

var num2

JS底层做了一个强制类型转换，把字符串转换成了Number进行运算。

4.2.2 Numben（变量）（有非数字字特会出现NaN )

var num1 = Number(“18")；把字符变成了数字。

3。

var num2 = Number(“18.99”)； 结果为

18.99数字型。（有小数也转换）

4.2.3 parselnt)和parseFloat()（译为取整和取浮点数）

空字符串parselnt()和parseFloat()返回NaN,

Number("")返回0

parselnt（变量）：如果变量中首个字符为字母则结果为NaN。

否则取出现首个非数字前的整数。

123 = parseInt("123.123aaaa")；

parseFloat（变量）：如果变量中首个字符为字母则结果为NaN。

否则取出现首个非数字前的浮点数。（没有小数取整）

123.123 =parseFloat(“123.123aaaa")；

4.2.4 提别提示

Boolean类型中：true数值为1；false为0；null的数值类型为0；

undefined无数值类型或者为NaN;

4.3 任何简单类型转换成Boolean

任何数据类型都可以转换成boolean类型，所以和以往两个转换不同；

4.3.1 Boolean（变量

var bool = Boolean(“1111")；

bool为true;

4.3.2 !!变量

第一个逻辑非操作会基于无论什么操作数返回一个

与之相反的布尔值

第二个逻辑非操作则对该布尔值求反

于是就得到了这个值真正对应的布尔值

第5章 操作符

主要研究操作符的种类以及优先级。案例学习。

5.1 操作符种类

-、算数运算符(+-*/...)

a) 一元运算特：正号、负号、++、-、平方等一个变量

就能运算

b) 二元运算符：+-*/%等两个变量才能运算

C) 三元运算特：值1?值2：值3；二、逻辑运算符(8&!)（或且非）三、比较运算特（<、>、==、>=...)

四、赋值运算符(=、+＝、-=、一、/=、%=)

5.2 优先级

1()

2!、-（负数）、++、--（正数省略+）（一元运算）

3*/%（二元运算）

4+、-（加，减）（二元运算）

5<、<=、<、>=（一级逻辑运算）

6==、!=、===、!==、（二级逻辑运算）

7&& （三级逻辑运算）

81

9?:（三元运算）

10=、+=、-=、*=、/=、%=（赋值运算）

案例：

1.(false ll true) && !(false &&true)

2.var bool=((4 >= 6)L("人”!=“阿凡达")) &8 1(((12 大2)== 144) &&true)；

3.var a = 1；

var b = 2; a++；

var num = ++a + (a++) + a +(++b)

b++

console.log(num);

4. var a = 1+1883;var b = 0 && 1+1；

var c = 1 1L 2 8&& 3-1;

5.3 &&和||运算

5.3.1 8&链接两个boolean类型，有一个是false结果就是false。

链接值不是布尔类型时，按照成布尔类型计算，结果本身不变。（非布尔）

例子： 1=2&&1； 0=0&&1；都是true取后面，都是false取前面。

5.3.2 链接两个boolean类型，有一个是true 结果就是true。

链接值不是布尔类型时，按照成布尔类型计算，结

果本身不变。（非布尔）

例子：2=2111；1=0111；都是true取前面，都是false取后面。

第6章流程控制

一、顺序结构（程序正常执行流程从上往下，从左

往右）（不用研究）

赋值运算时为从右往左执行，且左侧为属性或变量，不取值!!!

二、选择结构

a) if语句

b) switch语句

三、循环结构

a) for循环

6) while循环

do...while循环

6.1 (

顺序结构

程序正常执行顺序不必过多研究，特殊需求，后续老师特殊讲解。

6.2 选择结构

共有两种，if语句和switch语句。If常用，switch为特殊情况使用，判断条件出现的情况特别多的时候用switch，其他时候if语句比较方便。

6.2.1 f语句

一、f语句用法有三种

1.if（条件1)（程序13

2.if（条件1)（程序Belsef程序2)

3.if（条件1)（程序Belseif（条件2)（程序2...elseí程序

n3

案例：

输入名人，弹出他所参演的电视剧!如果没有这个人，那么弹框警示!

二、三目运算（也叫三元运算）（目或者元代表几

个表达式）

三目运算可以替代部分if..else...功能，运算简单，使用方便，代码清晰。

表达式1?值1：值2

6.2.2 Switch语句

switch（值1) (

case value1:

程序1:

break;// break 关键字会导致

代码执行流跳出 switch 语句case value2:

程序2；

break;

default:

程序3；

注意：

break可以省略，如果省略，代码会继续执行下一个

case

switch语句在比较值时使用的是全等操作符，因此不会

发生类型转换

（例如，字符串“10”不等于数值10)。6.2.3 switch案例：

1.判断当天是星期几

2.把百分制转换成优良中差

6.3 循环结构(js中没有块级作用域,R

有在function中有）

注：ES6中let, const有块级作用域

共3种，for/while/do..while；可根据需求选择使用；1.遍历数组首选for循环，简单循环使用for。

而while循环强调，不记循环次数（不知道循环多少次），首选while。

3.最后do..while循环强调，无论怎样，至少执行一次是，使用do..while.

6.3.1 for循环

1)执行流程

for（变量；条件1;条件2)（执行程序子

执行过程：变量>条件1>执行程序→条件2->条件1->执行程序.....

直到条件1不成立，跳出循环。

2)三个表达式均为可选，但是必须写分号!!!for(;)（程序；死循环；

3)案例1

6个简单案例，用来体验for循环如何使用。（利息和数

列提升思维）

1.打印1到100

2.打印1到100的和

3.求1-100之间所有数的和、平均值

4.求1-100之间所有偶数的和、所有奇数的和

5.本金10000元存入银行，年利率是干分之三，每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少?

6.有个人想知道，一年之内一对兔子能繁殖多少

对?于是就筑了一道围墙把一对兔子关在里面。已知一对免子每个月可以生一对小兔子，而一对免子从出生后第3个月起每月生一对小免子。假如一年内没有发生死亡现象，那么，一对兔子一年内(12个月)能繁殖成多少对?（不考虑公母因素，默认一对免子就能生一对小免子，也不考虑父子关系）

5) break和continue

break :立刻跳出循环，不在执行该循环中的任何程序；

continue：跳出本次循环，进入下一次循环中继续执行程序；

案例：

1.计算出1到100之间所有不能被）整除的整数之和

(用continue )

2.求1到100之间所有不能被3整除的整数的第一个

大于2000的和

3.求200-300之间所有的奇数的和

我还 4. 求200-300之间第一个能被）整数的数

6.3.2 while循环

语法规则：

var i = 0;

while(i<10)（程序1；i++);

可以使用死循环和break连用。

While(true)（程序1;if（条件1)(break;)

6.3.3

do...while循环（一定会执行一次do中的程序）

var i =

dof

程序1；

i++

while(1<10 )；

案例：

1.三种循环求和(1-100)；

2.弹窗提示你爱我吗?选否就一直问。

第7章 数组

7.1 数组的概述

7.1.1

为什么学习数组

之前学习的数据类型，只能存储一个值。（字符串

为一个值）

我们想存储多个值的时候可以使用数组。（字符串

不方便）

比如：存储班级中所有学生的姓名。([“张三”，“李四”，“王五”])

7.1.2

数组是什么

数组是一种数据类型。（把很多数据装入一个盒子

中，用的时候在取出来）

字面量为[1,2,3]。可以理解为：西瓜皮门，西瓜肉

123，西瓜子(，）

7.2 数组的定义

7.2.1

字面量定义

Var arr=[1, 2,3]；

7.2.2

对象定义（数组的构造函数）

Var arr=new Array（参数）；

参数位置一个数值时为数组长度，多个数值时为数组中的元素。

7.3

7.3.1

数组的林作

求数组的长度

数组的长度=数组名.length;

可以通过修改数组的长度来改变数组中元素的个

数，如果改小了，数组从后面删除元素。(伪数组

的长度可以修改，但是不能修改里面的元素）

7.3.2

获取数组中的元素

数组中的指定元素=数组名[索引值];

数组的索引代表的是数组中的元素在数组中的位置，从0开始。

如果获取数组中元素是，数组名[索引值]，数组中没有这个索引（元素没那么多），系统不报错，而是给定值为undefined;

7.4 遍历数组（获取并操作数组中的

每一个元素）(!!!重点!!!)

var arr = [1, 2, 3]；

for(var i = 0;i<arr.length;i++)[

arr[il 1/如此操作数组中的每一个元

素

7.5案例：

五、把1-10之间所有的奇数，放到数组中

六、1-10之间能被3整数的数字，存到数组中

七、求一组数中的所有数的和和平均值

A、求一组数中的最大值和最小值，以及所在位置

九、将字符串数组用或其他特号分割，拼接成一个

新的字符串

十、【1, 2, 3, 4, 5】----》 “1-2-3-4-5"

十一、将数组中值为0的去掉，不为0的存入一个新

数组

【1, 0, 2,0, 3, 0, 4】---》【1, 2, 3,4】

十二、翻转数组

【 1, 2, 3, 4, 5】---》【5, 4, 3, 2, 1】

十三、冒泡排序，从小到大（也可以倒序）

【 1, 3, 5, 3, 24, 3】--》【 1, 2, 3, 3, 3, 4, 5】提示：

1.双重for循环。

2.指定轮数和次数

3.判断是否符合标准。如果符合标准交换位置。从小到大排列顺序，如果前面的比后面的大，那么交换位置。