CSS 预处理器
CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些
编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行 CSS 的编码工作。转化
成通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正
常的 CSS 文件,以供项目使用”。
常用的 CSS 预处理器有哪些
- SASS:基于 Ruby,通过服务端处理,功能强大。解析效率高。需要学习 Ruby 语言,上手难度高于 LESS。
- LESS:基于 NodeJS,通过客户端处理,使用简单。功能比 SASS 简单,解析效率也低于
- SASS,但在实际开发中足够了,所以我们后台人员如果需要的话,建议使用 LESS。
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。被广泛应用于各种客户端Web程序尤其是HTML开发中,能给HTML网页添加动态功能,响应用户各种操作,实现诸如欢迎信息、数字日历、跑马灯,显示浏览器停留时间等特殊效果,提高网页的可观性。
- 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通信功能;
补充:微信小程序WeUI
- JavaScript 获得创建动态 HTML 的所有力量:
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
把脚本置于
元素的底部,可改善显示速度,因为脚本编译会拖慢显示,JS代码建议置于body的最底部可以在
或 中放置外部脚本引用
//console. log(score)在浏览器的控制台打印变量!
- 分号分隔 JavaScript 语句,在每条可执行的语句之后添加分号
- 注释: 单行注释以 // 开头; 多行注释以 /* 开头,以 */ 结尾
- JavaScript 标识符对大小写敏感
完整 JavaScript 的实现是由以下三个部分组成:
- ECMAScript :核心标准。
- DOM : 文档对象模型。
- BOM :浏览器对象模型。
ECMAScript是JavaScript的核心标准,它描述了该语言的语法和基本对象。
DOM指的是Document Object Model (文档对象模型),它是HTML的应用程序接口。DOM将整个HTML页面看作是由各种节点层级构成的结构文档。
BOM指的是Browser Object Model (浏览器对象模型),可 以对浏览器窗口进行访问和操作
处理。
- 内部JavaScript
- 外部JavaScript
内部JavaScript
- let,声明带作用域的变量
- const,声明带作用域的常量
- Arrow Functions,适合简写匿名函数的箭头函数
var a;
const a=1; //必须赋值
let a;//块内元素
JavaScript是一种弱类型的脚本语言,无论是数字、文本还是其他内容,统一使用关键词var加上变量名称进行声明
●变量的声明不是必须的,可以不使用关键词var声明直接使用。
常见变量的赋值为数字或文本形式。当变量的赋值内容为文本时,需要使用引号
(单引号、双引号均可)括住内容;当为变量赋值为数字的时候,内容不要加引号
否则会被当作字符串处理。
定义方法
JavaScript有五种原始类型分别是:Number(数字)、Boolean(布尔值)、String(字符串)、Null(空值)和Undefined(未定义)。
在JavaScript中使用Number类型表示数字,其数字可以是32位以内
的整数或64位以内的浮点数
- 八进制的数需要用数字0开头
- 十六进制的数需要用数字0和字母x开头
- 浮点数可以使用toFixed()方法规定小数点后保留几位数(遵守四舍五入)。
123 //整数 .15 //浮点数 1.123e3 //科学计数 -99 //负数
- 特殊值
//正确转换为Number类型时返回真(true),其他情况返回假(false) isNaN(变量名称)
常用方法:
布尔值( boolean )在很多程序语言中都被用于进行条件判断,其值只有
两种: true (真) 或者false (假)。
所有undefined类型的输出值都是undefined。当需要输出的变量从未声明过,或者使用关键词
var声明过但是从未进行赋值时会显示undefined字样。
尽量避免使用浮点数进行运算,存在精度问题
逻辑运算符有三种类型:NOT (逻辑非)、 AND(逻辑与)和OR (逻辑或) 。
在JavaScript中,关系运算符共有四种:大于(> )、小于(<)、大于等于(>=)和小于等于(<=)。 用于比较两个值的大小,返回值-定是布尔值(true 或false)。
- if语句
- switch语句
同C++语法
JavaScript 支持不同类型的循环:
- for - 多次遍历代码块
- for/in - 遍历对象属性
- while - 当指定条件为 true 时循环一段代码块
- do/while - 当指定条件为 true 时循环一段代码块
定义方式一
定义方法二
参数问题: javaSqript 可以传任意个参数,也可以不传递参数-
异常判断
arguments是一个JS免费赠送的关键字;代表,传递进来的所有的参数,是一个数组!
ES6引入的新特性,获取除了已经定义的参数之外的所有参数~ ...
相比Java而言,JavaScript 函数更加简便,无需特别声明返回值类型。
JavaScript函数如果存在返回值,直接在大括号内的代码块中使用return关键词后面紧跟需要返回的值即可。
- 本地对象
- 内置对象
- 宿主对象
●本地对象( native object)是ECMAScript定义的引用类型;
●内置对象( built-in object )指的是无需实例化可直接使用的对象,其实也是特殊的本地对象;
●宿主对象( host object)指的是用户的机器环境,包括DOM和BOM。
Java的数值必须是相同类型的对象~, JS中不需要这样!
var arr = [1,2,3,4,5, 'he11o' ,nu11,true]
Array对象还包含了length属性,可以用于获取当前数组的长度,即数组中的元素个数。如果当前数组中没有包含元素,则length值为0
语法格式
常用方法
Map
Set
对象也是变量。但是对象包含很多值 值 名称:值 对的方式来书写(名称和值由冒号分隔)
获取对象的方法
- Gobal对象
- Math对象
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页面的互交
浏览器对象模型( Browser Object Model,BOM )使JavaScript可以与浏览器进行交互。
常见对象
- window :浏览器窗口对象,其成员包括所有的全局变量、函数和对象
- screen :屏幕对象,通常用于获取用户可用屏幕的宽和高。
- location :位置对象,用于获得当前页面的 URL 地址,还可以把浏览器重定向到新的指定页面。
- history :历史记录对象,其中包含了浏览器的浏览历史记录。
- navigator :浏览器对象,通常用于获取用户浏览器的相关信息。
window对象
在JavaScript中window对象表示浏览器窗口,目前所有浏览器都支持该对象JavaScript中一切全局变量、函数和对象都自动成为window对象的内容。
例如,用于判断变量是否为数字的全局方法isNaN()就是window对象的方法,完整写法为window.isNaN()通常情况下window前缀可以省略不写。
常见方法
navigator对象
在JavaScript中window.navigator对象可用于获取用户浏览器的一系列信息,例如浏览器的名称、版本号等。该对象在使用时通常可以省略window前缀,简写为navigator
大多数时候,我们不会使用navigator对象, 因为会被人为修改!不建议使用这些属性来判断和编写代码
screen 对象
在JavaScript中window.screen对象可用于获取屏幕的可用宽度和高度。该对象在使用时通常可以省略window前缀,简写为screen。
location 对象
document对象
代表浏览器的历史记录
history.back()
history.forward()
浏览器网页就是一个Dom 树形结构!
- 更新:更新Dom节点
- 遍历dom节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
要操作一个Dom节点,就必须要先获得这个Dom节点
查找HTML元素
- 通过HTML元素的id名称查找;
- 通过HTML元素的标签名称查找:
- 通过HTML元素的类名称查找
更新节点
修改HTML文本内容
Title
123
修改HTML元素属性
修改HTML的CSS样式
删除节点的步骤:先获取父节点,在通过父节点删除自己
注意:删除多个节点的时候,children 是在时刻变化的,删除节点的时候一定要注意!
Title
标题
p1
p2
插入节点1创建
插入节点2
//布尔值类型(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(); //发生错误,无返回值
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
Boolean()函数
Number函数
String函数
JavaScript 没有任何打印或者输出的函数
JavaScript 可以通过不同的方式来输出数据
- 使用 window.alert() 弹出警告框
- 使用 document.write() 方法将内容写到 HTML 文档中
- 使用 innerHTML 写入到 HTML 元素
- 使用 console.log() 写入到浏览器的控制台
使用 window.alert()
使用 document.write() 方法
使用 innerHTML 写入
如需从 JavaScript 访问某个 HTML 元素, 使用 document.getElementById(id) 方法; 使用innerHTML 来获取或插入元素内容;
使用 console.log()
JSON: JavaScript Object Notation. JSON 是一种轻量级的数据交换格式,用于存储和传输数据
JSON 格式在语法上与创建 JavaScript 对象代码是相同的
Json,通过文本描述JS对象,方便转换JS对象传递操作,属性以键值对保存,大括号,分号,双引号,逗号,方括号(数组),方法等等
格式:
●对象都用{}
●数组都用[]
●所有的键值对都是用key:value
后端从数据库取出数据,将数据转为Java对象,将Java对象转为json字符串,通过网络将json字符串传递给前端,前端将json字符串转为JavaScript对象,JavaScript将JavaScript对象中的数据渲染到页面
定义一个类
继承
原型链
键盘事件
JavaScript还可以在页面状态发生变化时执行代码,这种状态的变化称为DOM事件(事件)。
Title
与其他函数并行运行的函数称为异步(asynchronous)