这里都是基于我在B站跟过的黑马教学视频上的PPT进行二次总结的笔记,结合了自己平时的加注和记录。欢迎跟过黑马视频的小伙伴们一起来复习Pink老师授予我们的快乐知识,在此也非常感谢黑马机构,让我有系统的资料对前端技术有了整体性的学习。这里也非常适合新手对JS有一个非常系统的了解与整体认识。那么,开始吧。
一、初识JavaScript
1、JavaScript的作用
- 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
2、HTML/CSS/JS 的关系
(1)HTML/CSS 标记语言--描述类语言
- HTML 决定网页结构和内容( 决定看到什么 ),相当 于人的身体
- CSS 决定网页呈现给用户的模样( 决定好不好看 ), 相当于给人穿衣服、化妆
(2)JS 脚本语言--编程类语言
实现业务逻辑和页面控制( 决定功能 ),相当 于人的各种动作
3、浏览器执行 JS 简介
浏览器分成两部分:渲染引擎和 JS 引擎
- 渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit
- JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释
每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。
4、JS的组成
(1)ECMAScript
ECMAScript:ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。更多参看MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview
(2)DOM ——文档对象模型
文档对象模型
(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的
标准编程接口
。
通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
(3)BOM ——浏览器对象模型
BOM
(Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行
互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
5、JavaScript输入输出语句
注意:
alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息。
二、变量
1、变量在使用时分为两步: 1. 声明变量 2. 赋值。变量是内存里的一块空间,用来存储数据。
2.声明一个变量并赋值, 我们称之为变量的初始化。声明变量本质是去内存申请空间。
3.同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。
var age = 10, name = 'zs', sex = 2;
4.声明变量特殊情况
5.变量命名规范
由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成;严格区分大小写;不能 以数字开头;不能 是关键字、保留字;变量名必须有意义;遵守驼峰命名法。
三、数据类型
1、为什么需要数据类型
在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利
用存储空间,于是定义了不同的数据类型。
2、变量的数据类型
变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的
内存中。
JavaScript 是一种弱类型或者说动态语言。
这意味着不用提前声明变量的类型,在程序运行过程中,类型会
被自动确定。
var age = 10; // 这是一个数字型
var areYouOk = '是的'; // 这是一个字符串
在代码运行时,变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型。 JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型。
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
3、数据类型的分类
(1)JS 把数据类型分为两类:
1.简单数据类型 :Number,String,Boolean,Undefined,Null
2.复杂数据类型 :object
(2)数字型 Number
1.数字型范围:
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
最小值:Number.MIN_VALUE,这个值为:5e-32
2.数字型三个特殊值
Infinity ,代表无穷大,大于任何数值 ;-Infinity ,代表无穷小,小于任何数值 ;NaN ,Not a number,代表一个非数值。
3.isNaN():用来判断一个变量是否为非数字的类型,返回 true 或者 false
(3)字符串型
String
字符串型
可以是引号中的任意文本,其语法为
双引号 ""
和
单引号'' 。
因为 HTML 标签里面的属性使用的是双引号,JS 这里我们更
推荐使用单引号。
1. 字符串引号嵌套:
外双内单,外单内双
2. 字符串转义符
3. 字符串长度:
通过字符串的
length
属性可以获取整个字符 串的长度。
4. 字符串拼接 :
字符串 + 任何类型 = 拼接之后的新字符串 ;
拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串 。
+ 号总结口诀:数值相加 ,字符相连。
我们经常会将字符串和变量来拼接,因为变量可以很方便地修改里面的值
变量是不能添加引号的,因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接,口诀“
引引加加
”,删掉数字,变量写加中间
(4)布尔型
Boolean
布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。
(5)Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值 undefined ,一个声明变量给 null 值,里面存的值为空。
4、获取检测变量的数据类型
(1)typeof 可用来获取检测变量的数据类型
(2)字面量:源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
数字字面量:8, 9, 10
字符串字面量:'程序员', "大前端"
布尔字面量:true,false
5、数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变
量的数据类型。通俗来说,就是
把一种数据类型的变量转换成另外一种数据类型
。