JavaScrip基础

一、计算机编程基础

1.语言类型

计算机语言：010101111000

汇编语言：由一些简单的英文单词操作计算机

高级语言：Python、java、c

2、翻译器

高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，翻译器可以将编写的源代码转换为机器医院，叫做二进制化。

3.编程语言和标记语言区别

编程语言：有很强的逻辑和行为能力。

标记语言：存在是用来被读取

二、JavaScript

1.概念

JavaScript是脚本语言，是一种轻量级的编程语言，是可插入HTML页面的编程代码，并且在插入之后可由所有的现代浏览器执行。

2.JavaScript的作用

• 表单动态校验
• 网页特效
• 服务端开发
• 桌面程序（Electron）
• App
• 控制硬件
• 游戏开发

3.JS的组成

4.JS书写位置

4.1内行式JS

<input type="button" value="点击" οnclick="alert('hello')" />

阅读性较差

4.2内嵌式

<script>alert('Hello World~!');</script>

PS：可以将多行JS代码写进<script>标签中

4.3外部式

<script src="my.js"></script>

利于HTML页面代码优化，把大段的JS代码独立到HTML页面之外，方便文件级别的复用

PS：引用外JS文件的script标签中间不可以写代码

适用于JS代码量比较大的情况

5.JavaScript注释

5.1单行注释

// 用来注释单行文字（ 快捷键 ctrl + / ）

5.2多行注释

/*

获取用户年龄和姓名

并通过提示框显示出来

*/

6.JavaScript变量

6.1 变量的概念

变量是用于存放数据的容器，通过变量名获取数据、修改数据。本质：变量是程序在内存中申请的一块用来存放数据的空间。

6.2变量声明

变量在使用时分为：声明变量；赋值两步骤。

var name;

name = 'join'; = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思

var name = 'join'; 声明一个变量并赋值， 我们称之为变量的初始化。

6.3变量命名方式

变量必须以字⺟开头，不能以数字开头

变量也能以 $ 和 _ 符号开头

变量名称对⼤⼩写敏感（y 和 Y 是不同的变量）

6.4变量的使用（1）

var name = '卡卡西';

var add = '木叶村';

var age = 18;

var em = 'kakaxi@sec.com';

console.log(name);

console.log(add);

console.log(age);

console.log(em);

6.5变量的使用（2）

先弹出输入框，用户输入信息后在解析器中显示刚刚输入内容。

<script>

var name = prompt(“请输入姓名”)；

console.log（name）；

</script>

6.6变量语法拓展

更新变量：一个变量被多次赋值后，变量值一最后一次赋值为准。

同时声明多个变量：同时声明多个变量时，只要写一个var多个变量名由英文逗号隔开。

var name=kakaxi,age=18,sex=2;

7.JavaScript数据类型

7.1基本数据类型

数据类型	说明	默认值	备注
Number	数字型，包含整型和浮点型	0	NaN为非数字类型，是数字则返回false
Boolean	布尔类型，true、false 1与0	false
String	字符串类型，字符串都带引号	“”	必有有单双引号才可以使用，可以互相嵌套但不能单单、双双嵌套
Undefined	var a 声明了变量a但没有赋值，此时a=undefined	undefined
Null	var a= null 声明了变量a，但为空	null

也不可以双双嵌套

7.2查看数据类型

typeof

类型	实例	返回值
String	typeof"efewe"	"string"
Number	typeof 18	"number"
Boolean	typeof true	"Boolean"
Undefined	typeof undefined	"undefined"
Null	typrof null	"null"

7.3数据类型转换

转为字符串

方式	说明	案例
toString()	转成字符串	var number=1 alert(num.toString());
String()	强制转为字符串	var number=1 alert(String());
加号拼接字符串	和字符串拼接的都为字符串	var number=1 alert(num+"我是字符串");

转为数字型

方式	说明	案例
parselnt(string)函数	将字符串类型转为整数数值类型	parselnt('78')
parseFloat(string)	将string类型转为浮点数值型	praseFloat('78.21')
Number()	强制转为数值型	Number('12')
js隐式转换（-*/）	利用算数运算隐式转为数值型	'12'-0

8.JavaScript运算符

8.1算术运算符

+、-、*、/、%

PS：浮点数值的最高经度是17位小数，但在进行算数运算时其精度远远不如整数。不要直接判断两个浮点数是否相等。

8.2递增递减运算符

递增：++

递减：--

8.3前置、后置递增运算符

放在前面位前置运算符，放在后面为后置运算符

前置运算符：先自加后返回值

alert(++num + 10); // 21

后置运算符：先返回原值后自加

alert(10 + 10++); // 20

8.4比较运算符

运算符名称	说明	案例	结果
<	小于	1<2	true
>	大于	2>1	true
>=	大于等于	5>=3	true
<=	小于等于	4<=2	false
==	判等号	2==2	true
!=	不等号	1!=2	true
=== !==	全等 要求数值和数据类全部一致	37==='37'	false

8.5逻辑运算符

逻辑运算符	说明	案例
&&	逻辑与 ”且“	i>20 && i<30 20<i<30
||	逻辑或 ”或“	i<5 || i>20
!	逻辑非 ”非“	i!=0

8.6赋值运算符

赋值运算符	说明	案例
=	直接复制	i = 200
+=、-=	加减一个数 后再赋值	i + = 1 ===>i = i+1
*=、/=、%=	乘除取余 后再赋值	i * = 5 ====>i = i * 5

9.JavaScript流程控制

9.1 顺序结构

顺序结构是程序中最简单的、最基本的流程控制，没有特定的语法结构，程序会根据代码的先后顺序依次执行。

9.2分支结构

If语句

语法结构：

if else语句

语法结构：

if else if 语法结构：

// 适合于检查多重条件。

if (条件表达式1) {

语句1；

} else if (条件表达式2) {

语句2；

} else if (条件表达式3) {

语句3；

....

} else {

// 上述条件都不成立执行此处代码

}

switch语法

switch(表达式){

case value1:

// 表达式 等于 value1 时要执行的代码

break;

case value2:

// 表达式 等于 value2 时要执行的代码

break;

default:

// 表达式 不等于任何一个 value 时要执行的代码

}

9.3循环结构

for循环

语法结构：

for(初始化变量; 条件表达式; 操作表达式){

//循环代码块

}

for嵌套打印九九乘法表

while循环

语法结构：

var i=0

while(条件表达式){

// 循环体代码

}

xxx

如果条件表达式结果为true，则执行循环体代码直到不符合条件为止，若为false则退出循环。必须要有退出条件，否则为死循环。

do-while循环

do

{

需要执行的代码

}while (条件);

该循环至少会执行依次，即使条件为false也会执行一次

Continue/break

语句	含义	举例
break	用于跳出整个循环	for (i=0;i<10;i++) {if (i==3) {break;} x= "The number is " + i + "<br>"; alert(x);}
continue	用于跳过循环中的某一个迭代	for (i=0;i<=10;i++) { if (i==3) continue; x= "The number is " + i + "<br>"; alert(x);}

10.JavaScript数组、函数

10.1数组

数组的概念

数组是一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量下的方式。

数据库创建方式

（1）利用new创建数组

var 数组名 = new Array() ；

var array = new Array();

（2）利用数组字面量创建数组

var 数组名 = [];

var 数组名 = ['小白','小黑','大黄','瑞奇'];

数组元素的类型

数组中可以存放任意类型的数据，例如字符串、数组、布尔值.....

获取数组中的元素

方法	含义	举例
数组名[索引]	获取数组中的元素	var arrStus = [1,2,3]; alert(arrStus[1]);
数组名.length	访问数组元素的长度	var arrStus = [1,2,3]; alert(arrStus.length);

遍历数组

通过for循环索引遍历数组中的每一项

var arr = ['red','green', 'blue'];

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

console.log(arr[i]);}

数组中新增元素

通过修改length长度新增数组元素

var arr = ['red', 'green', 'blue', 'pink'];

arr.length = 7;

console.log(arr);

console.log(arr[4]);

console.log(arr[5]);

console.log(arr[6]);

通过修改索引新增数组元素

var arr = ['red', 'green', 'blue', 'pink'];

arr[索引位] = 'hotpink';

console.log(arr);

10.2函数

概念：

函数Function是一种语法结构将实现某一个功能的代码块，封装到一个结构中，从而实现代码的重复使用。

声明/调用函数

声明函数：

function是声明函数的关键字必须小写，通常将函数名命名为可以表达函数功能的动词，如getSun。

function 函数名() {

//函数体代码

}

调用函数

函数不调用自己不会执行，只有调用函数时才会执行。

函数名(); // 通过调用函数名来执行函数体代码

函数的参数-形参和实参

参数	说明
形参	形式上的参数，函数定义的时候，传递参数
实参	实际上的参数，函数调用的时候传递的参数，实参是传递给形参的

作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。多个参数用“，”隔开。

函数形参和实参个数不匹配问题

参数个数	说明
相等	输出正确结果
实参>形参	只取到形参的个数，多余的舍弃掉
实参<形参	多的形参定义为undefined，结果为NaN

函数返回值-return

return语句可以将函数的返回值返回给调用者，在使用return语句时，函数就会停止执行，并返回指定的值，若没有return，则返回的值为undefined。

function 函数名（）{

...

return 需要返回的值；

}

// 调用函数

函数名(); // 此时调用函数就可以得到函数体内return 后面的值

自定义函数方式（命名函数）

利用函数关键字function自定义函数方式

function fn() {...}

// 调用

fn();

函数表达式方式（匿名函数）

fn里面存储的是一个函数，函数表达式方式原理和声明变量的方式一致，函数调用的代码必须写到函数体后面。

// 这是函数表达式写法，匿名函数后面跟分号结束

var fn = function(){...}；

// 调用的方式，函数调用必须写到函数体下面

fn();

函数实例：