语法篇JS基础

一、初识JavaScript

1.1前景

 CSS 预处理器
CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些
编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行 CSS 的编码工作。转化
成通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正
常的 CSS 文件,以供项目使用”。
常用的 CSS 预处理器有哪些

  • SASS:基于 Ruby,通过服务端处理,功能强大。解析效率高。需要学习 Ruby 语言,上手难度高于 LESS。
  • LESS:基于 NodeJS,通过客户端处理,使用简单。功能比 SASS 简单,解析效率也低于
  • SASS,但在实际开发中足够了,所以我们后台人员如果需要的话,建议使用 LESS。

1.2JavaScript介绍

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。被广泛应用于各种客户端Web程序尤其是HTML开发中,能给HTML网页添加动态功能,响应用户各种操作,实现诸如欢迎信息、数字日历、跑马灯,显示浏览器停留时间等特殊效果,提高网页的可观性。

语法篇JS基础_第1张图片

1.3JavaScript框架

  • jQuery:大家熟知的 JavaScript 框架,优点是简化了 DOM 操作,缺点是 DOM 操作太频繁, 影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8; 
  • Angiar:Google 收购的前端框架,由一群 Java 程序员开发,其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念,与微软合作,采用 TypeScript 语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如:1代->2代,除了名字,基本就是两个东西;截止发表博客时已推出了 Angular6) 
  • React:Facebook 出品,一款高性能的 JS 前端框架;特点是提出了新概念【虚拟 DOM】用于减少真实 DOM 操作,在内存中模拟 DOM 操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门【JSX】语言; 
  • Vue:一款渐进式 JavaScript 框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状志管理等新特性。其特点是综合了 Angular(模块化)和 React(虚拟 DOM)的优点; 
  • Axios:前端通信框架;因为 Vue的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用 jQuery 提供的 AJAX通信功能;

1.4UI框架

语法篇JS基础_第2张图片

 补充:微信小程序WeUI

1.5JavaScript用途

  • JavaScript 获得创建动态 HTML 的所有力量:
  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件

1.6快速入门

1.6.1格式入门

语法篇JS基础_第3张图片

 把脚本置于 元素的底部,可改善显示速度,因为脚本编译会拖慢显示,JS代码建议置于body的最底部

可以在 或 中放置外部脚本引用

1.6.2语法入门

语法篇JS基础_第4张图片

1.7浏览器控制台使用

语法篇JS基础_第5张图片

//console. log(score)在浏览器的控制台打印变量! 

1.8几点总结

  • 分号分隔 JavaScript 语句,在每条可执行的语句之后添加分号
  • 注释: 单行注释以 // 开头; 多行注释以 /* 开头,以 */ 结尾
  • JavaScript 标识符对大小写敏感

二、JavaScript入门

2.1组成

完整 JavaScript 的实现是由以下三个部分组成:

  • ECMAScript :核心标准。
  • DOM : 文档对象模型。
  • BOM :浏览器对象模型。

ECMAScript是JavaScript的核心标准,它描述了该语言的语法和基本对象。

DOM指的是Document Object Model (文档对象模型),它是HTML的应用程序接口。DOM将整个HTML页面看作是由各种节点层级构成的结构文档。

BOM指的是Browser Object Model (浏览器对象模型),可 以对浏览器窗口进行访问和操作
处理。

2.2JavaScript使用

  • 内部JavaScript
  • 外部JavaScript

内部JavaScript

语法篇JS基础_第6张图片

 2.3变量

  • let,声明带作用域的变量
  • const,声明带作用域的常量
  • Arrow Functions,适合简写匿名函数的箭头函数

2.3.1变量的声明

var a;
const a=1; //必须赋值
let a;//块内元素

JavaScript是一种弱类型的脚本语言,无论是数字、文本还是其他内容,统一使用关键词var加上变量名称进行声明

变量的声明不是必须的,可以不使用关键词var声明直接使用。

语法篇JS基础_第7张图片

2.3.2变量的赋值

常见变量的赋值为数字或文本形式。当变量的赋值内容为文本时,需要使用引号
(单引号、双引号均可)括住内容;当为变量赋值为数字的时候,内容不要加引号
否则会被当作字符串处理。

2.3.3命名规范

语法篇JS基础_第8张图片

2.3.4 JavaScript关键字和保留字

语法篇JS基础_第9张图片

语法篇JS基础_第10张图片

2.3.5严格检测模式

语法篇JS基础_第11张图片

语法篇JS基础_第12张图片

2.3.6变量作用域

语法篇JS基础_第13张图片

语法篇JS基础_第14张图片全局变量 

语法篇JS基础_第15张图片

语法篇JS基础_第16张图片

语法篇JS基础_第17张图片

 局部作用域(let)

2.3.7方法的定义与调用

定义方法

语法篇JS基础_第18张图片

apply关键字

语法篇JS基础_第19张图片

 2.4基本数据类型

JavaScript有五种原始类型分别是:Number(数字)、Boolean(布尔值)、String(字符串)、Null(空值)和Undefined(未定义)。

2.4.1Number类型

在JavaScript中使用Number类型表示数字,其数字可以是32位以内
的整数或64位以内的浮点数

  • 八进制的数需要用数字0开头
  • 十六进制的数需要用数字0和字母x开头
  • 浮点数可以使用toFixed()方法规定小数点后保留几位数(遵守四舍五入)。
    123 //整数
    .15 //浮点数
    1.123e3 //科学计数
    -99 //负数
  • 特殊值语法篇JS基础_第20张图片
//正确转换为Number类型时返回真(true),其他情况返回假(false)
isNaN(变量名称)

2.4.2String类型

语法篇JS基础_第21张图片

常用方法:

  1. 获取字符串长度  msg.length
  2. 获取字符串中的单个字符  msg.charAt(1)  代码编号msg.charCodeAt(1) 
  3. 连接字符串msg.concat(所要连接字符串)
  4. 查找字符串是否存在语法篇JS基础_第22张图片
  5. 查找与替换字符串  msg.match(正则表达式) msg.search(正则表达式) msg.replace(正则表达式,替换文本)
  6. 获取字符串片段  slice(开始,结束)去掉指定字符串 ,subtring(开始,结束)获取语法篇JS基础_第23张图片
  7. 字符串大小写转换 toLowerCase(),toUpperCase()
  8. 转义字符同C++

2.4.3Boolean类型

布尔值( boolean )在很多程序语言中都被用于进行条件判断,其值只有
两种: true (真) 或者false (假)。

2.4.4Undefined类型

所有undefined类型的输出值都是undefined。当需要输出的变量从未声明过,或者使用关键词
var声明过但是从未进行赋值时会显示undefined字样。

2.4.5Null类型

语法篇JS基础_第24张图片

语法篇JS基础_第25张图片

2.5常用运算符

2.5.1赋值运算符

2.5.2算术运算符

语法篇JS基础_第26张图片

尽量避免使用浮点数进行运算,存在精度问题

2.5.3逻辑运算符

逻辑运算符有三种类型:NOT (逻辑非)、 AND(逻辑与)和OR (逻辑或) 。

语法篇JS基础_第27张图片

2.5.4关系运算符

在JavaScript中,关系运算符共有四种:大于(> )、小于(<)、大于等于(>=)和小于等于(<=)。 用于比较两个值的大小,返回值-定是布尔值(true 或false)。

2.5.5相等性运算符

语法篇JS基础_第28张图片2.5.6条件运算符(三目运算符) 

2.5.7两个常用函数

语法篇JS基础_第29张图片2.6语句

2.6.1条件语句

  • if语句
  • switch语句

同C++语法

2.6.2循环语句

JavaScript 支持不同类型的循环:

  • for - 多次遍历代码块
  • for/in - 遍历对象属性
  • while - 当指定条件为 true 时循环一段代码块
  • do/while - 当指定条件为 true 时循环一段代码块

语法篇JS基础_第30张图片

2.7函数

2.7.1定义函数

定义方式一

语法篇JS基础_第31张图片

定义方法二

语法篇JS基础_第32张图片

 参数问题: javaSqript 可以传任意个参数,也可以不传递参数-

异常判断

arguments关键字·

arguments是一个JS免费赠送的关键字;代表,传递进来的所有的参数,是一个数组!

 

rest关键字

ES6引入的新特性,获取除了已经定义的参数之外的所有参数~ ...

2.7.2基础函数

语法篇JS基础_第33张图片

语法篇JS基础_第34张图片

相比Java而言,JavaScript 函数更加简便,无需特别声明返回值类型。
JavaScript函数如果存在返回值,直接在大括号内的代码块中使用return关键词后面紧跟需要返回的值即可。

语法篇JS基础_第35张图片

 2.7.3箭头函数

语法篇JS基础_第36张图片

语法篇JS基础_第37张图片 2.8JavaScript对象类型

语法篇JS基础_第38张图片

  • 本地对象
  • 内置对象
  • 宿主对象

●本地对象( native object)是ECMAScript定义的引用类型;
●内置对象( built-in object )指的是无需实例化可直接使用的对象,其实也是特殊的本地对象;
●宿主对象( host object)指的是用户的机器环境,包括DOM和BOM。

本地对象

2.8.1数组

Java的数值必须是相同类型的对象~, JS中不需要这样!
var arr = [1,2,3,4,5, 'he11o' ,nu11,true]
Array对象还包含了length属性,可以用于获取当前数组的长度,即数组中的元素个数。如果当前数组中没有包含元素,则length值为0

2.8.2日期Data

在JavaScript中使用Date对象处理时间日期有关内容。有四种初始化方式
语法篇JS基础_第39张图片

常用方法 语法篇JS基础_第40张图片

2.8.3正则表达式

语法格式

语法篇JS基础_第41张图片

 常用方法

语法篇JS基础_第42张图片

语法篇JS基础_第43张图片

2.8.4Map和Set集合(ES6新特性)

Map

Set

  

2.8.5iterator

语法篇JS基础_第44张图片

2.8.6对象

对象也是变量。但是对象包含很多值 值  名称:值  对的方式来书写(名称和值由冒号分隔)

语法篇JS基础_第45张图片

获取对象的方法

语法篇JS基础_第46张图片

内置对象

  • Gobal对象
  • Math对象

宿主对象

2.8. 7DOM事件

JavaScript还可以在HTML页面状态发生变化时执行代码,这种状态的变化称为DOM事件( Event )。

定义了:

  • 作为对象的 HTML 元素
  • 所有 HTML 元素的属性
  • 访问所有 HTML 元素的方法
  • 所有 HTML 元素的事件

换言之:HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

W3C DOM 标准被分为 3 个不同的部分:

  • Core DOM - 所有文档类型的标准模型
  • XML DOM - XML 文档的标准模型
  • HTML DOM - HTML 文档的标准模型

浏览器解析HTML网页时,会创建一个HTML DOM模型对象,通过执行JavaScript代码调用DOM方法,操作HTML元素的内容/属性/事件等,从而实现与HTML页面的互交

语法篇JS基础_第47张图片

2.8.8操作BOM对象

浏览器对象模型( Browser Object Model,BOM )使JavaScript可以与浏览器进行交互。

常见对象

  • window :浏览器窗口对象,其成员包括所有的全局变量、函数和对象
  • screen :屏幕对象,通常用于获取用户可用屏幕的宽和高。
  • location :位置对象,用于获得当前页面的 URL 地址,还可以把浏览器重定向到新的指定页面。
  • history :历史记录对象,其中包含了浏览器的浏览历史记录。
  • navigator :浏览器对象,通常用于获取用户浏览器的相关信息。

window对象

在JavaScript中window对象表示浏览器窗口,目前所有浏览器都支持该对象JavaScript中一切全局变量、函数和对象都自动成为window对象的内容。


例如,用于判断变量是否为数字的全局方法isNaN()就是window对象的方法,完整写法为window.isNaN()通常情况下window前缀可以省略不写。

语法篇JS基础_第48张图片

 常见方法

语法篇JS基础_第49张图片

 navigator对象

在JavaScript中window.navigator对象可用于获取用户浏览器的一系列信息,例如浏览器的名称、版本号等。该对象在使用时通常可以省略window前缀,简写为navigator

语法篇JS基础_第50张图片

大多数时候,我们不会使用navigator对象, 因为会被人为修改!不建议使用这些属性来判断和编写代码

screen 对象

在JavaScript中window.screen对象可用于获取屏幕的可用宽度和高度。该对象在使用时通常可以省略window前缀,简写为screen。

语法篇JS基础_第51张图片

 location 对象

语法篇JS基础_第52张图片

语法篇JS基础_第53张图片

 document对象

语法篇JS基础_第54张图片history 对象 

 代表浏览器的历史记录

语法篇JS基础_第55张图片

history.back()
history.forward()

2.8.9操作DOM对象

浏览器网页就是一个Dom 树形结构!

  • 更新:更新Dom节点
  • 遍历dom节点:得到Dom节点
  • 删除:删除一个Dom节点
  • 添加:添加一个新的节点

要操作一个Dom节点,就必须要先获得这个Dom节点

查找HTML元素

  • 通过HTML元素的id名称查找;
  • 通过HTML元素的标签名称查找:
  • 通过HTML元素的类名称查找

语法篇JS基础_第56张图片

 更新节点

修改HTML文本内容




    
    Title


123

修改HTML元素属性

语法篇JS基础_第57张图片

修改HTML的CSS样式

语法篇JS基础_第58张图片 删除DOM节点

 删除节点的步骤:先获取父节点,在通过父节点删除自己
注意:删除多个节点的时候,children 是在时刻变化的,删除节点的时候一定要注意!




    
    Title


标题

p1

p2

插入节点1创建

语法篇JS基础_第59张图片

语法篇JS基础_第60张图片

语法篇JS基础_第61张图片

 插入节点2

语法篇JS基础_第62张图片

 2.9类型转换

 2.9.1转换成字符串

//布尔值类型(Boolean)和数字类型(Number)这两种基本数据类型均可使用toString()方法
//把值转换为字符串形式
var x = true;
var result = x.toString(); //返回"true"
//toString()不带参数直接使用,此时无论是整数、小数或者科学计数法表示的内容,都会显示为十进制的数值
var x1 = 99;
var x2 = 99.90;
var x3 = 1.25e8;
 
var result1 = x1.toString(); //返回值为"99"
var result2 = x2.toString(); //返回值为"99.9"
var result3 = x3.toString(); //返回值为"125000000"
var x = 10;
var result1 = x.toString(2); //声明将原始数据转换成二进制数,返回值为"1010"
var result2 = x.toString(8); //声明将原始数据转换成八进制数,返回值为"12"
var result3 = x.toString(16); //声明将原始数据转换成十六进制数,返回值为"A"

var x = null;
var result1 = String(x); //返回值为字符串"null"
var result2 = x.toString(); //发生错误,无返回值

2.9.2转换成数字

语法篇JS基础_第63张图片

var x = "123hello";
var result = parseInt(x); //返回值是123,因为h不是有效数字,则停止检查

var x = "hello";
var result = parseInt(x); //返回值是NaN,因为第一个字符h就不是有效数字,直接停止检查

var x = "3.14";
var result = parseInt(x); //返回值是3,因为小数点不是有效数字,则停止检查

var x = "10";
var result1 = parseInt(x, 2); //表示原始数据为二进制,返回值为2
var result2 = parseInt(x, 8); //表示原始数据为八进制,返回值为8
var result3 = parseInt(x, 10); //表示原始数据为十进制,返回值为10
var result4 = parseInt(x, 16); //表示原始数据为十六进制,返回值为16

var x = "010";
var result1 = parseInt(x); //表示原始数据为八进制,返回值为8
var result2 = parseInt(x, 10); //表示原始数据为十进制,返回值为10
var result3 = parseInt(x, 8); //表示原始数据为八进制,返回值为8
var x = "hello3.14";
var result = parseFloat(x); //返回值是NaN,因为第一个字符h就不是有效数字,则停止检查

var x = "3.14hello";
var result = parseFloat(x); //返回值是3.14,因为h不是有效数字,则停止检查

var x = "3.14.15.926";
var result = parseFloat(x); //返回值是3.14,因为第二个小数点不是有效数字,则停止检查

var x = "010";
var result1 = parseInt(x); //默认为是八进制数,返回值为8
var result2 = parseFloat(x); //默认为是十进制数,返回值为10

var x = "A";
var result1 = parseInt(x, 16); //parseInt()允许十六进制数,返回值为10
var result2 = parseFloat(x); //parseFloat()不允许十六进制数,返回值为NaN

2.9.3强制类型转换

Boolean()函数

语法篇JS基础_第64张图片

语法篇JS基础_第65张图片

语法篇JS基础_第66张图片

Number函数

语法篇JS基础_第67张图片

语法篇JS基础_第68张图片

String函数

语法篇JS基础_第69张图片

 三、JavaScript高阶

3.1JavaScript 输出

JavaScript 没有任何打印或者输出的函数

JavaScript 可以通过不同的方式来输出数据

  • 使用 window.alert() 弹出警告框
  • 使用 document.write() 方法将内容写到 HTML 文档中
  • 使用 innerHTML 写入到 HTML 元素
  • 使用 console.log() 写入到浏览器的控制台

使用 window.alert()

语法篇JS基础_第70张图片

使用 document.write() 方法

语法篇JS基础_第71张图片

 使用 innerHTML 写入

如需从 JavaScript 访问某个 HTML 元素, 使用 document.getElementById(id) 方法; 使用innerHTML 来获取或插入元素内容;

语法篇JS基础_第72张图片

 使用 console.log()

3.2JSON对象/BSON

JSON: JavaScript Object Notation. JSON 是一种轻量级的数据交换格式,用于存储和传输数据

JSON 格式在语法上与创建 JavaScript 对象代码是相同的

Json,通过文本描述JS对象,方便转换JS对象传递操作,属性以键值对保存,大括号,分号,双引号,逗号,方括号(数组),方法等等

格式:
●对象都用{}
●数组都用[]
●所有的键值对都是用key:value

语法篇JS基础_第73张图片

后端从数据库取出数据,将数据转为Java对象,将Java对象转为json字符串,通过网络将json字符串传递给前端,前端将json字符串转为JavaScript对象,JavaScript将JavaScript对象中的数据渲染到页面

3.3面向对象编程

3.3.1原型继承

3.3.2class继承

定义一个类

继承

语法篇JS基础_第74张图片

原型链 

3.4事件概述

语法篇JS基础_第75张图片

事件句柄是事件发生要进行的操作。onload 属性就是我们所说的事件句柄,也称为事件属性。语法篇JS基础_第76张图片

语法篇JS基础_第77张图片

语法篇JS基础_第78张图片

 表单事件

语法篇JS基础_第79张图片

选择事件

语法篇JS基础_第80张图片

 键盘事件

语法篇JS基础_第81张图片

窗口事件

语法篇JS基础_第82张图片

3.5DOM事件

JavaScript还可以在页面状态发生变化时执行代码,这种状态的变化称为DOM事件(事件)。

语法篇JS基础_第83张图片

语法篇JS基础_第84张图片

语法篇JS基础_第85张图片

3.6操作表单

语法篇JS基础_第86张图片




    
    Title
    


用户名:

密码:

四、关键语法补充

4.1添加/删除 新属性语法篇JS基础_第87张图片

4.2对象转数组

语法篇JS基础_第88张图片

4.3访问器

语法篇JS基础_第89张图片

 4.4对象构造器

语法篇JS基础_第90张图片

 4.5对象原型

语法篇JS基础_第91张图片

语法篇JS基础_第92张图片

 4.6JAVASCRIPT类

语法篇JS基础_第93张图片

4.7回调语法篇JS基础_第94张图片

语法篇JS基础_第95张图片 4.8异步

与其他函数并行运行的函数称为异步(asynchronous)

4.8.1等待超时

语法篇JS基础_第96张图片

语法篇JS基础_第97张图片

 4.8.2等待间隔

语法篇JS基础_第98张图片

 4.9Promise

语法篇JS基础_第99张图片

语法篇JS基础_第100张图片4.10asynchronism异步

语法篇JS基础_第101张图片语法篇JS基础_第102张图片 语法篇JS基础_第103张图片

 4.11Call()方法语法篇JS基础_第104张图片

 语法篇JS基础_第105张图片

 4.12apply()方法

语法篇JS基础_第106张图片

4.13嵌套函数

 4.14自调用函数语法篇JS基础_第107张图片

4.15闭包

语法篇JS基础_第108张图片

语法篇JS基础_第109张图片

 4.16模板字符串

语法篇JS基础_第110张图片

 

 

 

 

你可能感兴趣的:(Web,javascript,开发语言,ecmascript)