JavaScript

初识

编程

计算机为解决某个问题而使用某种程序设计语言编写程序代码并最终得到结果的过程

计算机程序: 计算机所执行的一系列指令集合

计算机语言: 人与计算机之间通讯的语言

计算机语言 具体语言
机器语言 机器直接能识别的程序语言或指令代码,二进制代码
汇编语言 用于电子计算机、 微处理器、 微控制器或其他可编程器件的低级语言,如linux
高级语言 c、c++、c#、Python、Java、Php、JavaScript、Go、Swift、Object-C

编程语言和标记语言(HTML)的区别: 编程语言有很强的逻辑和行为能力,而标记语言不用于向计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的,被动的。

JavaScript简述

JavaScript:

世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script: 脚本),脚本语言不需要编译,运行过程中有js解释器(js引擎)逐行来进行解释并且执行。

现在页可以基于Node.js进行服务器端编程

JavaScript作用

表单动态校验(语言编写最初的目的)

网页特效

服务端开发(Node.js)

桌面程序(Electron)

App(Cordova)

硬件控制-物联网(Ruff)

游戏开发(Cocos.js)

浏览器

浏览器的内核分为渲染引擎和Js引擎

渲染引擎: 用来解析HTMLCSS,俗称内核,如webkitblink

Js引擎: Js解释器,用来读取网页中的Js代码,处理并且运行,如V8

浏览器并不会执行js代码,而是通过Js解释器来执行Js代码。Js引擎执行代码的时候逐行解释代码,然后由计算机去执行,因为他是脚本语言,逐行解释执行。

Js组成

ESMScrpit,JavaScript语法

DOM,文档对象模型

BOM,浏览器对象模型

JavaScript

Js引入

行内js

内嵌js

外部js

注意: HTML使用双引号,js使用单引号,比如 alert('哈哈');

语法

输入输出语句

方法 说明 归属
alert(msg) 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
prompt(info) 浏览器弹出输入框,需要用户输入 浏览器

变量

简单解释,用于存放数据的容器

本质: 程序在内存中申请的一块来存放数据的空间,通过定义的变量名可以找到数据

变量的使用

声明变量:

1
2
var age; //声明一个名称为age的变量,var是js的关键字,variable:变量的意思
//声明变量程序会自动开辟空间,不用手动管理

赋值:

1
2
3
4
5
6
7
8
age = 10; //给声明的变量age一个值
//多个变量赋值
var age = 10,
sex = '男',
address = '山东'
//变量没声明也可以使用,但是会变成全局变量
qq = '123456789'
console.log(qq) //输出123456789

命名规范:

1
2
3
4
5
6
7
变量由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号($)组成,如: userAge,num1,_name
严格区分大小写。如var app;和var App;是两个变量
白捏以数字开头,如18age是错的
不能是关键字,保留字,如varforwhile
变量名必须有意义
遵循驼峰命名法。首字母小写,后面单词的首字母需要大写。如:myFristName
不知道怎么命名就翻译

写点小结吧: 之前因为学过Java,认真学的,虽然不是很厉害,但是一般的和语法有关的东西都是学了的,学JavaScript就会很轻松就能理解,但是当我从头来开始学一门语言,甚至是再去了解编程时,我发现编程又给了我不一样的体会,好像新的知识,又好像一位老朋友,也不知道改、该怎么学下去,先这样慢慢摸索吧。

JavaScript

Js数据类型、运算符、流程控制、命名规范、数组、函数

Js的数据类型

JavaScript是一种弱类型的语言,这意味着不用提前声明变量的类型,在程序运行中会被自动确定,有js引擎根据等号右边的变量值的数据类型来判断,所以js变量的数据类型是可变的

简单的数据类型

简单的数据类型 说明 默认值
Number 数字型,包含 整型值和浮点型值,如 10,0.21 0
Boolean 布尔值,true false,等价于1和0 false
String 字符串,如'张三',字符串要带引号 ""
Undefined var a; a没有给值,a = undefined undefined
Null var a = null; 声明了a为空值 null

补充: 在数字面前加0表示8进制,加0X表示16进制

补充: NaN: 不知道类型

number 数字类型

数字型

isNaN(); 可以用来判断是否是数字,是的话返回true,不是返回false

String 字符串类型

var str = '我是一个"高富帅"程序员'; //当字符串存在嵌套时,外单内双,或者外双内单,只是一种约定

字符串拼接 +

字符串转义

转义符 说明
\n 换行,n是newline的意思
\\\ 斜杠\
\' ' 单引号
\" " 双引号
\t tab 缩进
\b 空格,blank

判断变量的数据类型

1
2
console.log(typeof (变量名))
注意:prompt取过来的值是字符型的

数据类型转换

转成字符串:

toString()

1
2
3
4
//toString() 
var num = 1;
alrt(num.toString()) //1
alert(typeof (num.toString())) //string

String 强制转换

1
2
3
var num = 1;
alert(String(num)) //1
alert(typeof (String(num))) //string

加号拼接字符串 ’ + ’

1
2
3
4
var num = 1;
num = '张大炮' + num + 'cm';
alert(num); //张大炮1cm
alert(typeof (num)) //string

转成数字型

常用: parseInt() 会自动取整, parseFloat() 取浮点数

1
2
3
4
5
var num1 = '18.5';
var num2 = '-2.5';
console.log(parseInt(num1)) // 18
console.log(parseInt(num2)) // -2
console.log(typeof (parseInt(num2))) // number

少用: Number();还可以利用隐式转换 ' - ' 、' * '、' / '

1
2
3
4
var num3 = '5';
console.log(typeof (num3)); //string
console.log(typeof (Number(num3))) //number
console.log(typeof (parseFloat(num3 - 2))) // number

转换成Boolean型

方法: Boolean();

布尔值只有五个是false,其他都是true

表达式
Boolean('') false
Boolean(0) false
Boolean(NaN) false
Boolean(undefined) false
Boolean(null) false
1
2
var num = 1;
alert(Boolean(num1)) //true

运算符 operator

运算符又被称为操作符

用于赋值、比较和执行算数运算等功能的符号

操作符 说明
+
-
*
/
% 取余

注: 在运算时,浮点数的精度会出现问题,尽量少用,后面会有解决的办法,不要直接运算浮点数,二进制是无法精确表示一个浮点数的。

表达式和返回值的意思

表达式: 由数字、运算符、变量等组成的式子

返回值: 表达式算出来的值

前置递增: ++age 类似于:age = age + 1; 先自加1再返回值

后置递增: age++ 类似于:age = age + 1; 先返回值再自加1

比较运算符

两个数据在进行比较时所用的运算符,比较后会返回一个布尔值

比较运算符名称 说明 案例 结果
< 小于号 1 < 2 true
> 大于号 1 > 2 false
>= 大于等于号 2 >= 2 true
<= 小于等于号 2 <= 1 false
== 判等号(会转型) 10 == '10' true
!= 不等号 10 != 10 false
=== !== 全等,要求值和数据类型要一致(不会转型) 10 === 10 true

小结:

符号 作用 用法
= 赋值 把右边给左边
== 判断 判断两边的值是否相等(此时有隐式转换)
=== 全等 判断两边的值和数据类型是否完全相同

逻辑运算符

用来进行布尔值运算的运算符,返回值是布尔值,开发中经常用于多个条件判断

逻辑运算符 说明 案例 结果
&& "逻辑与",简称"与" and true && false false
|| "逻辑或",简称"或" or true || false true
"逻辑非",简称"非" not !true false

赋值运算符

用来把数据赋值给变量的运算符

赋值运算符 说明 案例
= 直接赋值 var age = '我是值';
+=、-= 加、减后再赋值 var age = 10; age += 5; //15
*=、/=、%= 乘、除、取模 后再赋值 var age = 10; age *= 5; //50

运算符优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ -- !
3 算术运算符 先 * / % 后 + -
4 关系运算符 > >= < <=
5 相等运算符 == !== === !==
6 逻辑运算符 先 && 后 ||
7 赋值运算符 =
8 逗号运算符

Js流程控制

顺序结构、分支结构、循环结构

分支结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if(条件表达式) {
//执行语句
}
switch (表达式) {
case value1 :
...
break;
case value2 :
...
break;
default:
...;
}
//三元表达式
var num = 5;
var res = num > 5 ? true : false; // false

循环结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//for循环
for (初始化变量; 条件表达式; 操作表达式){ //操作表达式是每次循环后才会执行的语句
循环体
}
//while循环
while(条件表达式) { //先判断再循环
循环体
}
// do while 循环
do { //先执行再判断
循环体
}while(条件表达式)
// continue,用于跳出本次循环,进入下一次循环
// break,跳出所有循环

三元表达式

语法结构 : 表达式1 ? 表达式2 : 表达式3

如果表达式1为true,则返回表达式2的值,如果表达式1为false,则返回表达式3的值

js命名规范

标识符命名规范

变量、函数的命名必需要有意义

变量的名称一般用名词

函数的名称一般用动词

操作符规范

操作符的两侧留一个空格

// 注释后面尽量留一个空格

Js数组

数组是一种将一组数据存储在单个变量名下的优雅方式

创建数组

1
2
3
var array = new Array(); // 创建一个空数组
array.name = '小红';
console.log(array.name); //小红

利用数组字面量来创建数组

1
2
var arr2 = ['哈哈', '嘿嘿'];
console.log(arr2[1]); // 哈哈

Js函数

函数: 封装了一段可重复调用的代码块

使用

1.声明函数

1
2
3
function sayHi() {
console.log('hi~');
}

2.调用函数

1
sayHi(); // hi~

补充:

函数的形参与实参:

形参用于接收实参,就像变量一样,但是不需要声明

实参就是带的实际参数

break,continue,return的区别:

break结束当前循环;continue跳出本次循环,继续执行下一次;return不仅可以退出循环,还会返回return语句中的值,同时还能结束当前函数体内的代码,不再继续执行下去

arguments:

只有函数才有arguments,当我们不确定要传多少个参数的时候,可以通过arguments来获取参数,它是当前函数的一个内置对象,所有函数都内置了一个arguments对象,它储存了传递的所有实参

它是一个伪数组,具有数组的length属性,按照索引的方式进行存储,没有真正的数组的一些方法

两种函数声明方式

1.利用函数关键字自定义函数(命令函数)

1
function func() {}

2.函数表达式(匿名函数)

1
var fun = function() {}

JavaScript

js作用域、预解析、js对象

Js作用域

作用域的作用就是起的代码名字在某个范围起作用

目的是为了提高程序的可靠性,减少命名冲突

全局作用域: 作用于整个script标签或者是一个单独的js文件

局部作用域: 在函数内部起作用,函数外部就没用了

变量作用域

全局变量: 全局作用域下的变量 注意: 在函数内部,又中特殊情况,没有声明,直接赋值也是属于全局变量

局部变量: 只能在函数内部使用,函数形参也可看作局部变量

函数形参也可以看作是局部变量

它们之间的区别:

全局变量只有在关闭浏览器时才会销毁,因此比较占内存

局部变量只在函数内部使用,当其所在的代码块被执行时,才会初始化,当代码运行结束后,就会被销毁,因此更节省空间。

作用域链:

内部函数访问外部函数的变量,采用的是链式查找的方式,最近原则

Js引擎运行js

预解析

js引擎会把js里的所有var、function提升到当前作用域的最前面

1.变量预解析(变量提升),把所有的变量声明提升到当前的作用域最前面,不提升赋值操作

2.函数预解析(函数提升),把所有的函数声明提升到当前作用域的最前面,不调用函数

代码执行

按照书写的顺序从上往下执行

Js对象

创建对象的三种方式

利用字面量创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//字面量创建函数
var obj = {}; // 创建了一个空的对象
obj = {
username: 'zhangdapao',
age: 20,
password: '123456',
sayHi: function () {
console.log('Hi');
}
}
for (var k in obj) {
console.log(k);
console.log(obj[k]);
}
obj.sayHi(); //Hi

定义:

1.属性和方法用键值对表示

2.多个属性或方法中间用逗号隔开

3.方法冒号后面的是匿名函数

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {}; // 创建了一个空的对象
obj = {
username: 'zhangdapao',
age: 20,
password: '123456',
sayHi: function () {
console.log('Hi');
}
}
console.log(obj.username); // 1.对象名.属性名 zhangdapao
console.log(obj['age']); // 2.对象名['属性名'] 20
obj.sayHi(); // 3.对象名.方法名 Hi

补充:

函数和方法实质上是差不多的,只是函数是单独调用、单独存在的,而方法要存在在对象里,并且需要对象调用

利用new Object创建对象

1
2
3
4
5
6
var obj = new Object();
obj.username = '张大炮';
obj.sayHi = function () {
console.log('hi');
}
obj.sayHi(); // hi

利用构造函数创建对象

构造函数: 特殊的一种函数,主要用来初始化对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Person(username, age, name1) {
this.username = username;
this.age = age;
this.name1 = name1;
this.sayHi = function (name1) {
console.log('hi' + this.name1);
}
}
var p = new Person('小张', '20', '小黑');
for (var k in p) {
console.log(k);
console.log(p[k]);
} // username 小张 age 20 name1 小黑 sayHi f(name1) { console.log('hi' + this.name1)}
p.sayHi(); // hi小黑

Js内置对象

1.内置对象

Js自带一些对象,提供了一些常用的或是最基本而必要的功能

Math、Date、Array、String

Math: Math对象不是构造函数,它具有数学常数和函数的属性和方法。

表达式 说明
Math.PI 圆周率
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入,就近取整,负数向大的取,比如-3.5得到的是-3
Math.abs() 绝对值
Math.max()/.min() 求最大值和最小值

补充:

求两个数之间的随机数,包含这两个数,Math.floor(Math.random() * (max - min +1)) + min;

Date: 日期对象的使用

他是一个构造函数,必须使用new来创建我们的日期对象

1
2
var obj = new Date(); //若是没有输入参数,则返回当前时间,若有参数,常用的写法,数字型:2019.10.01
//字符串型: ('2019-10-1 8:20:10')
方法名 说明 代码
getFullYear() 获取当年 obj.getFullYear()
getMonth() 获取月份(0-11月) obj.getMonth()
getDate() 获取当天日期 obj.getDate()
getHours() 获取小时 obj.getHours()
getDay() 获取星期几(1-6) obj.getDay()
getMinutes() 获取当前分钟 obj.getMinutes()
getSeconds() 获取当前秒钟 obj.getSeconds()

数组:

1
2
var arr = [1,2,3];
//判断对象的类型,instanceof()、Array.isArray()