阅读 334

太赞了!腾讯架构师梳理的这份JS全解笔记开源分享,看完献上膝盖

Hello,今天给各位童鞋们分享的是JS,赶紧拿出小本子记下来吧

image.png

初识Javascript

作用:

  1. 表单动态校验(密码强度检测)
  2. 网页特效
  3. 服务端开发(Node.js)
  4. 桌面程序(Electron)
  5. App(Cordova)
  6. 控制硬件-物联网(Ruff)
  7. 游戏开发(Cocos2d-js)

HTML/CSS/JS的关系

HTML/CSS标记语言–描述类语言

  1. HTML决定网页结构和内容(决定看到什么),相当于人的身体
  2. CSS决定网页呈现给用户的模样(决定好不好看),相当于给人家穿衣服、化妆

JS脚本语言–编程类语言

实业业务逻辑和页面控制(决定功能),相当于人的各种动作

浏览器执行JS简介

  1. 渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit
  2. JS引擎:也称为JS解释器。用来读取网页中的Javascript代码,对其处理后运行,比如chrome浏览器的V8

浏览器本身并不会执行js代码,而是通过内置的JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会执行解释执行

JS的组成

ECMAScript:JavaScript语法

DOM:页面文档对象模型

BOM:浏览器对象模型

ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套js语法工业标准

DOM—文档对象模型:文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口,通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)

BOM—浏览器对象模型:它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构,通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等

js初体验

js有3种书写位置,分别为行内、内嵌和外部

注意在HTML中我们推荐使用双引号,js中我们推荐使用单引号

alert('英勇赞美诗');

注意:引用外部js文件的script标签中间不可以写代码

js注释

输入输出语句

js变量

概述:什么是变量

白话:变量就是一个装东西的盒子

通俗:变量是用于存放数据的容器,我们通过变量名获取数据,甚至数据可以修改

声明变量

//声明变量 var age;//声明一个名称为age的变量

var是一个js关键字,用来声明变量,使用该关键字声明变量后,计算机会自动为变量分配内存空间

age是程序员定义的变量名

赋值

age = 10;//给age这个变量赋值为10

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

变量值是程序员保存到变量空间里的值

变量的初始化

var age = 18;//声明变量同时赋值为18

声明一个变量并赋值,我们称之为变量的初始化

变量的使用案例

  1. 弹出一个输入框,提示用户输入姓名
  2. 弹出一个对话框,输出用户刚输入的姓名

变量语法扩展

更新变量

一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准

var age = 18; age = 81;//最后的结果就是81,因为18被覆盖掉了

同时声明多个变量

同时声明多个变量时,只需要写一个var,多个变量名之间使用英文逗号隔开

var age = 10, name = 'xx', sex = 1;

声明变量特殊情况

image.png

例子:交换两个变量的值

变量的数据类型

JavaScript是一种弱类型或者说动态语言,这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定

var age = 10; //这是一个数字型 var areYouOk = '是的';//这是一个字符串

在代码运行时,变量的数据类型是由JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后,变量就确定了数据类型。

JavaScript拥有动态类型,同时也意味着相同的变量可用作不同的类型:

var x = 6; //x为数字 var x = 'Bill'; //x为字符串

简单数据类型(基本数据类型)

image.png 数字型Number

数字型进制:常见的有:二进制、八进制、十进制、十六进制

//1.八进制数字序列范围:07 var num1 = 07; //对应十进制的7 var num2 = 019; //对应十进制的19 var num3 = 08; //对应十进制的8 //2.十六进制数字序列范围:09以及A~F var num = 0xA;

记住在js中八进制前面加0,十六进制前面加0x

数值型范围

JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE);//1.7976931348623157e+308 alert(Number.MIN_VALUE);//5e-324

三个特殊值

alert(Infinity);//Infinity,代表无穷大,大于任何数值 alert(-Infinity);//-Infinity,代表无穷小,小于任何数值 alert(NaN);//NaN,代表一个非数值

isNaN()

用来判断一个变量是否为非数字的类型,返回true或者false

var usrAge = 21; var isOk = isNaN(usrAge); console.log(isNum); //false,21不是一个非数字 var userName = '阿波'; console.log(isNaN(userName)); //true,'阿波'是一个非数字

字符串型String

字符串型可以是引号中的任意文本,其语法为双引号和单引号

var strMsg = "我爱北京天安门~";//使用双引号表示字符串 var strMsg2 = 'WDNMD'; //使用单引号表示字符串 //常见错误 var strMsg3 = 哈哈哈; //报错,没使用引号,会被认为是js代码,但是js没有这些语法

因为HTML标签里面的属性使用的是双引号,JS这里我们更推荐使用单引号

字符串转义符

image.png

弹出网页警示框案例

< !DOCTYPE html>

< html> < head> < meta charset="utf-8"> < title> < script type="text/javascript"> alert('酷热难耐,火辣的太阳低下,我挺拔的身姿,成为了最为独特的风景。我审视四周,这里,是我的舞台,我就是天地间的王者.这一刻,我豪气冲天,终于大喊一声:”收破烂啦~“'); < /script> < /head> < body> < /body> < /html>

字符串长度

通过字符串的length属性可以获取整个字符串的长度

var strMsg = '我是阿波!'; alert(strMsg.length);//显示5

字符串拼接

//1.1字符串“相加” alert('hello' + ' ' + 'world');//hello world //1.2数值字符串”相加“ alert('100' + '100');//100100 //1.3数值字符串 + 数值 alert('11' + 12);//1112

+号总结口诀:数值相加,字符相连

字符串拼接加强

console.log('阿波' + 18); //只要有字符就会相连 var age = 18; //console.log('阿波age岁啦'); //这样不行哦 console.log('阿波' + age); //阿波18 console.log('阿波' + age + '岁啦'); //阿波18岁啦

布尔型

布尔类型有两个值:true和false,其中true表示真(对),而false表示假(错)

布尔型和数字型相加的时候,true的值为1,false的值为0

console.log(true + 1);//2 console.log(false + 1);//1

Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值undefined

var variable; console.log(variable); //undefined console.log('你好' + variable); //你好undefined console.log(11 + variable); //NaN console.log(true + variable); //NaN

一个声明变量给null值,里面存的值为空

var vari = null; console.log('你好' + vari); //你好null console.log(11 + vari); //11 console.log(true + vari); //1

获取检测变量的数据类型typeof

数据类型转换

通俗来讲就是把一种数据类型的变量转换成另外一种数据类型

有三种转换方式:

  1. 转换为字符串类型
  2. 转换为数字型
  3. 转换为布尔型

转换为字符串

image.png

转换为数字型(重点)

image.png

计算年龄案例

简单加法器案例

转换为布尔型

代表空、否定的值会被转换为false,如“、0、NaN、null、undefined

其余值都会被转换为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('小白'));//true console.log(Boolean(12));//true

好啦,今天的文章就到这里了,希望能够帮助到屏幕前迷茫的你们

文章分类
代码人生
文章标签