一: 浅聊前端发展史
第一阶段: C/S(client server) -> B/S(browser server) 网页制作
第二阶段: 从静态到动态, 从后端到前端 前端开发工程师
前后端分离
后台: 完成数据的分析和业务逻辑编写(包含 API 接口编写)
前端: 网页制作, JS 交互效果, 数据的交互和绑定
技术栈: JavaScript,Ajax(跨域技巧),jQuery...
第三阶段: 从前端到全端(从 PC 端到移动端)
技术栈: H5,CSS3, 响应式布局开发, Zepto,Hybrid(混合 App 开发), 微信小程序...
第四阶段: 从全端到全栈
全栈开发: 前后端都可以开发(严格意义讲, 一种语言完成前后端开发)
技术栈: NODE(基于 JS 编程语言开发服务器端程序),Express/Koa...
为了迎合日益发展的前端开发, JS 中诞生很多有助于开发, 维护, 提高性能的框架: vue,React,Angular,webpack...
展望 WEB4.0 时代, VR/AR 元年, 前端需要 Canvas/webGL...
二, 关于浏览器的内核和引擎
webkit(v8 引擎): 大部分浏览器
gecko: 火狐
trident:IE
...
W3C: 万维网联盟, 制定编程语言的规范与标准
开发者按照规范编写代码, 浏览器开发商也会开发一套按照规范把代码渲染成页面的东西(这个东西就是内核或者引擎)
浏览器内核作用: 按照一定的规范, 把代码基于 GPU(显卡)绘制出对应的图形和页面等
为啥会出现浏览器兼容:
1. 部分浏览器会提前开发一些更好的功能, 后期这些功能会被收录到 W3C 规范中, 但是在收录之前, 会存在一定的兼容性
2. 各个浏览器厂商, 为了突出自己的独特性, 用其它方法实现了 W3C 规范中的功能
...
三, JavaScript
JS: 轻量级的客户端脚本编程语言
编程语言
HTML+CSS 是标记语言
编程语言是具备一定逻辑的, 拥有自己的编程思想(面向对象编程 [OOP], 面向过程编程)
面向对象
- C++
- JAVA
- PHP
- C#(.net)
- JS
- ...
面向过程
C
目前的 JS 已经不仅仅是客户端语言了, 基于 NODE 可以做服务器端程序, 所以 JS 是全栈编程语言
学习 JS, 我们学习它的几部分组成
ECMAScript(ES):JS 的核心语法
DOM:document object model 文档对象模型, 提供各种 API(属性和方法)让 JS 可以获取或者操作页面中的 HTML 元素(DOM 和元素)
BOM:browser object model 浏览器对象模型, 提供各种 API 让 JS 可以操作浏览器
四: ESMAScript
它是 JS 的语法规划, JS 中的变量, 数据类型, 语法规范, 操作语句, 设计模式等等都是 ES 规定的
五: 变量(variable)
它不是具体的值, 只是一个用来存储具体值的容器或者代名词, 因为它存储的值可以改变, 所以称为变量
基于 ES 语法规范, 在 JS 中创建变量有以下方式
var (ES3)
function (ES3) 创建函数(函数名也是变量, 只不过存储的值是函数类型的而已)
let (ES6)
const (ES6) 创建的是常量
import (ES6) 基于 ES6 的模块规范导出需要的信息
class (ES6) 基于 ES6 创建类
- /*
- * 语法:
- * var [变量名]= 值
- * let [变量名]= 值
- * const [变量名]= 值
- * function 函数名(){
- *
- * }
- * ...
- */
- var n = 13;
- n = 15;
- alert(n+10);//=>弹出来 25 此时的 N 代表 15
- const m = 100;
- m = 200;//=>Uncaught TypeError: Assignment to constant variable. 不能给一个常量重新的赋值(常量存储的值不能被修改, 能够修改就是变量了)
创建变量, 命名的时候要遵循一些规范
严格区分大小写
遵循驼峰命名法: 按照数字, 字母, 下划线或者 $ 来命名(数字不能做为名字的开头), 命名的时候基于英文单词拼接成一个完整的名字(第一个单词字母小写, 其余每一个有意义单词的首字母都大写)
不能使用关键字和保留字: 在 JS 中有特殊含义的叫做关键词, 未来可能会成为关键字的叫做保留字
- var n=12;
- var N=13; //=>两个 n 不是同一个变量
- var studentInfo / student_info / _studentInfo(下划线在前的, 都是公共变量) / $studentInfo(一般存储的是 JQ 元素)...
语义化强一些
- add / create / insert
- del(delete)/ update / remove(rm)
- info / detail
- log
- ...
六: 数据值是一门编程语言进行生产的材料, JS 中包含的值有以下这些类型
基本数据类型(值类型)
数字 number
字符串 string
布尔 boolean
null
undefined
引用数据类型
对象 object
普通对象
数组对象
正则对象
日期对象
...
函数 function
ES6 中新增加的一个特殊的类型: Symbol, 唯一的值
[基本数据类型]
- var n = 13; //=>0 -13 13.2 数字类型中有一个特殊的值 NaN(not a number 代表不是一个有效的数字, 但是属于 number 类型的)
- var s = '';//=>"" '13' "{}" JS 中所有用单引号或者双引号包裹起来的都是字符串, 里面的内容是当前字符串中的字符(一个字符串由零到多个字符组成)
- var b = true;//=>布尔类型只有两个值 true 真 false 假
[引用数据类型]
- var o = {
- name:'珠峰培训',age:9
- };//=>普通的对象: 由大括号包裹起来, 里面包含多组属性名和属性值 (包含多组键值对) {
- } 空对象
- var ary = [12,23,34,45]; //=>中括号包裹起来, 包含零到多项内容, 这种是数组对象 []空数组
- var reg = /-?(\d|([1-9]\d+))(\.\d+)?/g; //=>由元字符组成一个完整的正则 // 不是空正则是单行注释
- function fn(){
- }
- [Symbol]
创建出来的是一个唯一的值
- var a = Symbol('珠峰');
- var b = Symbol('珠峰');
- a==b =>false
扩展: JS 代码如何被运行以及运行后如何输出结果
[如何被运行]
把代码运行在浏览器中(浏览器内核来渲染解析)
基于 NODE 来运行(NODE 也是一个基于 V8 引擎渲染和解析 JS 的工具)
[如何输出结果]
alert: 在浏览器中通过弹框的方式输出(浏览器提示框)
- var num=12;
- alert(num); //=>Windows.alert
- var str='珠峰';
- alert(str);
基于 alert 输出的结果都会转换为字符串: 把值 (如果是表达式先计算出结果) 通过 toString 这个方法转换为字符串, 然后再输出
- alert(1+1); =>'2'
- alert(true); =>'true'
- alert([12,23]); =>'12,23'
alert({name:'xxx'}); =>'[object Object]' 对象 toString 后的结果就是 object object, 为啥?
confirm: 和 alert 的用法一致, 只不过提示的框中有确定和取消两个按钮, 所以它是确认提示框
- var flag = confirm('确定要退出吗?');
- if(flag){
- //=>flag:true 用户点击的是确定按钮
- }else{
- //=>flag:false 用户点击的是取消按钮
- }
prompt: 在 confirm 的基础上增加输入框
console.log: 在浏览器控制台输出日志 (按 F12(FN+F12) 打开浏览器的控制台)
Elements: 当前页面中的元素和样式在这里都可以看到, 还可以调节样式修改结构等
Console: 控制台, 可以在 JS 代码中通过. log 输出到这里, 也可以在这里直接的编写 JS 代码
Sources: 当前网站的源文件都在这里
...
console.dir: 比 log 输出的更加详细一些(尤其是输出对象数据值的时候)
console.table: 把一个 JSON 数据按照表格的方式输出
... (自己回去扩展更多 console 输出方法)
七, 数据类型的详细剖析
number 数字类型
NaN:not a number 但是它是数字类型的
isNaN: 检测当前值是否不是有效数字, 返回 true 代表不是有效数字, 返回 false 是有效数字
- //=>语法: isNaN([value])
- var num=12;
- isNaN(num); //->检测 num 变量存储的值是否为非有效数字 false
- isNaN('13') =>false
- isNaN('珠峰') =>true
- isNaN(true) =>false
- isNaN(false) =>false
- isNaN(null) =>false
- isNaN(undefined) =>true
- isNaN({
- age:9
- }) =>true
- isNaN([12,23]) =>true
- isNaN([12]) =>false
- isNaN(/^$/) =>true
- isNaN(function(){
- }) =>true
重要: isNaN 检测的机制
1, 首先验证当前要检测的值是否为数字类型的, 如果不是, 浏览器会默认的把值转换为数字类型
把非数字类型的值转换为数字
- 其它基本类型转换为数字: 直接使用 Number 这个方法转换的
[字符串转数字]
Number('13') ->13
Number('13px') ->NaN 如果当前字符串中出现任意一个非有效数字字符, 结果则为 NaN
Number('13.5') ->13.5 可以识别小数
[布尔转数字]
- Number(true) ->1
- Number(false) ->0
[其它]
- Number(null) ->0
- Number(undefined) ->NaN
- 把引用数据类型值转换为数字: 先把引用值调取 toString 转换为字符串, 然后再把字符串调取 Number 转换为数字
[对象]
({}).toString() ->'[object Object]' ->NaN
[数组]
- [12,23].toString() ->'12,23' ->NaN
- [12].toString() ->'12' ->12
[正则]
- /^$/.toString() ->'/^$/' ->NaN
- Number('') ->0
- [].toString() ->''
- => isNaN([]):false
2, 当前检测的值已经是数字类型, 是有效数字返回 false, 不是返回 true(数字类型中只有 NaN 不是有效数字, 其余都是有效数字)
parseInt / parseFloat
等同于 Number, 也是为了把其它类型的值转换为数字类型
和 Number 的区别在于字符串转换分析上
Number: 出现任意非有效数字字符, 结果就是 NaN
parseInt: 把一个字符串中的整数部分解析出来, parseFloat 是把一个字符串中小数 (浮点数) 部分解析出来
- parseInt('13.5px') =>13
- parseFloat('13.5px') =>13.5
parseInt('width:13.5px') =>NaN 从字符串最左边字符开始查找有效数字字符, 并且转换为数字, 但是一但遇到一个非有效数字字符, 查找结束
NaN 的比较
NaN==NaN:false NaN 和谁都不相等, 包括自己
思考题: 有一个变量 num, 存储的值不知道, 我想检测它是否为一个有效数字, 下面方案是否可以
- if(Number(num)==NaN){
- alert('num 不是有效数字!');
- }
NaN 和谁都不相等, 条件永远不成立(即使 num 确实不是有效数字, 转换的结果确实是 NaN, 但是 NaN!=NaN 的)
- if(isNaN(num)){
- //=>检测是否为有效数字, 只有这一种方案
- alert('num 不是有效数字!')
- }
来源: http://www.bubuko.com/infodetail-3235923.html