原生JavaScript基础篇再回顾
1.JavaScript简介
1.1 JavaScript是什么
1.JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言
2.脚本语言:不需要编译,运行过程由js引擎逐行来解释并执行
3.现在也可以基于Node.js技术进行服务器编程
1.2 JavaScript的作用
1.表单动态校验(例如密码强度检测)(js最初产生的目的)
2.网页特效
3.服务端开发(Node.js)
4.桌面程序(Electron)
5.App(Cordova)
6.控制硬件-物联网(Ruff)
7.游戏开发(cocos2d-js)
1.3 浏览器如何执行JavaScript
浏览器的组成:
1.渲染引擎:用来解析HTML与CSS,俗称内核
2.js引擎:也称为js解释器,用来读取网页中的JavaScript代码,对其处理后运行,比如Chrome的V8引擎
浏览器本身并不会执行js代码,而是通过内置的js引擎来执行js代码,js引擎执行代码时逐行解释每一句源码,然后由计算机去执行。所以JavaScript语言为脚本语言,会逐行解释执行
1.4 JavaScript的组成
1.ECMAscript: 是由ECMA国际(原欧洲计算机制造商协会)进行的标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或者JScript,但实际上后两者是ECMAScript语言的实现和扩展
意义:ECMAScript规定了js的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套js语言工业标准
2.DOM: 文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口,通过DOM提供的接口可以对页面上的各种元素进行操作
3.BOM: 浏览器对象模型,它提供了独立内容的、可以与浏览器窗口互动的对象结构,通过BOM可以操作浏览器对象,比如弹出框或者浏览器跳转等
2.数据类型简介
2.1为什么需要数据类型
在计算机中,不同的数据所需占用的储存空间是不同的,为了把数据分析成所需内存大小不同的数据,充分利用空间,于是定义了不同的数据类型
2.2变量的数据类型
JavaScript是一种弱类型或者说动态语言:
var age = 18; //ages是一个数字型
var name = "张三"; //name是一个字符串
在代码运行时,变量的数据类型室友js引擎根据右边的变量值的数据类型来判断的,运行完毕之后,变量就确定了数据类型
JavaScript拥有动态类型,这意味着如下的代码是合法的:
var a = 20;
a ="hello";
2.2数据类型的分类
简单数据类型:
Number、String、Boolen、Undefined、Null
简单数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含整型值和浮点型值,如23、3.14 | 0 |
Boolen | 布尔值类型,如true、false,等价于1和0 | false |
String | 字符串类型,如"hello",字符串都带有引号 | “” |
Undefined | 声明了变量但是没有赋值,此时a = undefined,例如 var a; | undefined |
Null | 声明了变量为空值,例如var a = null; | null |
Number:
(1) 进制
//八进制数声明,在数字前加 0,例如
var num1 = 010;
console.log(num1); //此时打印的num1为8
//十六进制声明,在数字前加 0x,例如
var num2 = 0xb;
console.log(num1); //此时打印的num2为11
(2) 范围
console.log(Number.MAX_VALUE); //1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324
(3) 3个特殊值
Infinity,代表无穷大
//比Number.MAX_VALUE还要大的数值,例如:
console.log(Number.MAX_VALUE * 2); //Infinity
-Infinity,代表无穷小
//比Number.MIN_VALUE还要大的数值,例如:
console.log(Number.MIN_VALUE - 1000); //-Infinity
NaN,代表一个非数值(not a number)
console.log("lilei" - 54); //NaN
//还可用 isNaN() 判断一个变量是否是非数字的类型
console.log(isNaN(45)); //false
console.log(isNaN("lileri")); //true
String:
引号可单可双,但须配对使用,如若字符串中需要使用引号,可采用如下形式声明
var str1 = "hello,my name is 'lilei'";
console.log(str1); //hello,my name is 'lilei'
//或者
var str2 = 'hello,my name is "lilei"';
console.log(str2); //hello,my name is "lilei"
(1)常见转义符:
转义符 | 解释说明 |
---|---|
\n | 换行符 |
\\ | 代表斜杠本身 \ |
\’ | 单引号 ‘ |
\t | tab缩进 |
\b | 空格 |
(2)获取字符串的长度使用.length
属性
var str = "hello"
console.log(str.length); // 输出5
(3)拼接字符串,使用 +
//拼接方式为 字符串 + 任何类型 = 拼接后的字符串
console.log("lilei" + 18);// 输出lilei18
console.log("12" + true);// 输出12true
//注意
console.log("12" + 14);// 输出1214
console.log(12 + 14);// 输出26
//总结:数值相加,字符相连
Boolen:
布尔类型的值有两个,true和false
//布尔型和数字型相加的时候,true的值为1,false的值为0
console.log(true + 1); //输出2
console.log(false + 1); //输出1
数据类型转换:
1.代表空否定的值都会被转换为false,如''、0、NaN、null、undefined
2.其余值都会被转换为true
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('hello')); //true
console.log(Boolean(-1)); //true
Undefined:
声明变量为赋值,其类型就是undefined
var a;
//等价于
var a = undefined;
//运算:
console.log(undefined + "hello");//输出undefinedhello
console.log(undefined + 6); //输出NaN
Null:
console.log(null + "hello"); //输出nullhello
console.log(null + 2);//输出2
undefined和null与任何有意义的值比较返回的都是false,但是null与undefined之间相互比较返回的是true
console.log(undefined === null); //true
console.log(undefined === ''); //false
console.log(undefined === false); //false
console.log(null === ''); //false
console.log(null === false); //false
console.log(null === true); //false
2.3字面量
字面量是在源代码中一个固定的表示法,通俗来说,就是字面量表示如何表达这个值
数字字面量:3,4,5
字符串字面量:“你好”,“hello”
布尔字面量: true,false
2.4数据类型转换
使用表单.prompt()
获取过来的数据默认都是字符串类型的,此时就需要用到数据类型转换
1.转换为字符串
(1) toString()
var a = 24;
console.log(a.toString()); //返回字符串型的24
(2) String()
var a = 24;
console.log(String(a)); //返回字符串型的24
(3) + ‘’
var a = 24;
console.log(a + ''); //返回字符串型的24
2.转换为数字型
(1)parseInt(string)
var b = "18";
console.log(parseInt(b)); //返回数字型的18
(2) parseFloat(string)
var b = "3.14";
console.log(parseFloat(b)); //返回数字型的3.14
(3)Number()
var b = "18";
console.log(Number(b)); //返回数字型的18
(4) js隐式转换(- * /)
var b = "18";
console.log(b * 2); //返回数字型的36
console.log(b / 2); //返回数字型的9
3.JavaScript运算符
3.1 加减乘除以及取余
//加法
console.log(2 + 3); //5
//减法
console.log(4 - 3); //1
//乘法
console.log(2 * 6); //12
//除法
console.log(4 / 3); //1.3333333333333333
//取余
console.log(4 %