一:以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 能干什么
ES 6+ 能干什么
声明:写此博文,并不是为了显摆什么,仅是用于个人以后的复习学习,好记性不如烂笔头,东西多了就容易产生混肴,此博汇总了个人的日常工作学习整理内容,多数参考与官方文档,此文适合初学者,觉得对你有所帮助就收藏,对于各路大神大将,就麻烦一下,抬抬“腿”,绕绕道吧!
相信除了此片博文记录 JavaScript 的基础知识外,网上随便一搜索,大把大把的文章,视频教程也一大把,博主也是看着别人(例:阮大神的网络日志)的文章视频学习过来的,只是把自己的学习心得记录下来,关于如何去做学习关联笔记,博主觉得不要边看教程编写笔记,这种方式不好,即使你过后再去复习,你所能得到的知识只会少不会多,再就是边看教程编写笔记,仅是把官方上的一些已有东西给记录下来,并没什么实际意义(_~~实际工作中都是没事翻翻文档的)。每次看别的大神文章感觉多少都会有些收获,所以,就算是学习笔记,也是需要用心思考、用心去写的。
对于我们工作者来说,学习 JavaScript 是用来工作的,至于为什么学习它,间接的说是提高个人技能水平,提高处理工作项目的开发能力,说直白一点:就是为了拿更高的工资呗~
在这个如火如荼的社会,每天的繁重工作,哪有半点时光给你做学术研究什么的,几乎大多公司的现状都是:市场赶产品,产品赶研发,一切以进度为准。没功夫去深入研究我们学的是什么,它是从哪里来的,它要从哪儿去?哦弥陀佛,产品不要再发 BUG 修复任务啦,快要下班啦~~
呵呵,每到下班前,总是会有一大堆的 BUG 修复任务从测试发过来,从而导致太多的“义务班”啦。打铁还需自身硬,多看别的大神学术研究成功,多积累自身,此文着重记录 JavaScript 重点,避免误区,多方考量
回到问题原点:JavaScript 能干什么?
早期,它是用于处理浏览器不能与访问者进行互动的能力;如今,还可以开发移动 APP 应用(ionic-cordova、react-nactive、weex)、桌面应用(electron-react)以及服务端应用(NodeJs、Koa2),此篇博文仅针对浏览器客户端而言
语言简介
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备
- JavaScript 是一种高级轻量型的 —— 解释性语言,是前端开发工程师用来呈现浏览器实现数据交互行为的一门非编程语言
- JavaScript 是可插入 HTML 页面的脚本代码,可由所有的现代浏览器执行的脚本语言,它不受外界硬件设备、软件应用影响
运行原理
组成结构
- ECMAS 是 JavaScript 核心语法标准,是由 ECMA 组织指定的一套脚本语言的标准,也符合 W3C 标准,目前使用最前沿版本是 ES 6+
- HTML DOM 是 JavaScript 操作网页 HTML 树结构操作上的一套整理节点 API 文档,改变 HTML 树节点对象:内容、样式以及行为控制
- BOM 对象是 JavaScript 操作浏览器对象模型管理的一套整理 窗体 API 文档,用于获取浏览器窗体信息或监听浏览器窗体的一些行为规则
初始体验
回顾一下 HTML 知识,如果我们需要通过一个链接跳转到百度页面,很明显,对于 HTML 而言,只需要使用一个超链接标签就可以,对于这种访问者通过鼠标点击触发的跳转,也可以看成是一次交互,将以下代码赋值生成一个静态的 HTML 网页文档:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS 初始体验</title>
</head>
<body><a href="http://www.baidu.com/" target="_self">百度一下</a><button onclick="window.open('http://www.baidu.com/', '_self')">百度一下</button>
</body>
</html>
通过以下 HTML 代码执行效果,发现超链接和按钮点击都是同一样的效果——跳转到百度首页,其中按钮使用的是 JS 的方式跳转,代码分析:
- HTML 超链接 a 标签具有 href 属性用于指定链接的目录地址,还有一个 target 指定的链接方式,默认 _self 本窗口打开
- HTML 超链接 a 标签并没有写死 target 就已经默认在本窗口打开方式,说明 超链接 a 标签同样具有一个点击事件去触发链接跳转
- 以面向对象的思维方式可以得到 HTML 的按钮 button 标签同样具有点击事件,只是没有隐藏表现出来,需要使用 onclick 去触发
- 按钮 button 对象触发了点击 onclick 事件,执行了 BOM 浏览器内置对象 window 的 open() 方法,表示窗口以何种方式打开链接
引入方式
- 行内执行:可以直接在 HTML 标签内部直接使用,但前提是需要一个事件去触发它才能被执行
- 标签执行:同样也在 HTML 代码任意区域,通过使用 script 标签来编码,JavaScript 执行代码在 script 元素标签内
- 引入执行:有点类似于 HTML 的样式表 CSS 引入一个外文件,知识对于 JavaScript 的引入还是使用的是 script 元素标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个 JavaScript 练习</title>
</head>
<body><script language="javascript">document.write('Hello World'); // document 是一个 BOM,write() 是一个动作,组合表示将 'Hello World' 写到浏览器内</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------
# demo.js
document.write('Hello World');# demo.html 在 HTML 中,通过 script 标签引入 dome.js 文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个 JavaScript 练习</title>
</head>
<body><script language="javascript" src="./demo.js"></script>
</body>
</html>
注释语法
JavaScript 注释用来解释某段程序或某行代码是什么意思、什么作用,方便开发者之间的交流,注释内容不会被浏览器解析出来,常用于开发者模式中
- 单行注释:// 后面的代码必须另启行,否则为注释内容
- 多行注释:/**/ 注释内容从 /* 到 */ 之间的内容,也可以用于局部注释
- 文档注释:/**… */ 常用于函数注释,用来解释函数体,类似于一个 API 文档
// document.write('Hello World'); 我已经不需要了这行代码了,这里把它给注释掉了
--------------------------------------------------------------------------------------------------------------------------------
function Person(name, age) {/*这点代码可以使用下方代码替换方式return {name: name,age: age};*/this.name = name;this.age = age;
}
--------------------------------------------------------------------------------------------------------------------------------
/*** [Person description]* @param {[type]} name [description]* @param {[type]} age [description]*/
function Person(name, age) {this.name = name;this.age = age;
}
保留关键字
关键字 | |||||||||
---|---|---|---|---|---|---|---|---|---|
abstract | boolean | break | byte | case | catch | char | class | const | continue |
debugger | default | delete | do | double | else | enum | export | extends | final |
finally | float | for | function | goto | if | implements | import | in | instanceof |
int | interface | long | native | new | package | private | protected | public | return |
short | static | super | switch | synchronized | this | throw | throws | transient | try |
typeof | var | void | volatile | while | with |
PS:保留关键字不能用作变量或函数的命名,使用关键字容易导致程序解析错误,会执行保留关键字的动作
一:以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 能干什么相关推荐
- 十一:以理论结合实践方式梳理前端 React 框架 ———框架架构
前言书明观念 从第一代码农写下第一行代码开始到上个世纪的80年代的软件危机,码农一直在考虑一个问题,怎么让代码写起来更容易.更简单.更舒适?抛开大牛.大神(大牛.大神哪那么容易找到啊 _-)级别的人员 ...
- 二:以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 基础语法
ES 6+ 基础语法 虽说 JavaScript 是一门非编程式语言,但它又具备编程思想,这也是因为 JavaScript 在设计之初参考了 Java 的设计思路所带来的捆绑思想,也间接的导致了前期的 ...
- 十:以理论结合实践方式梳理前端 React 框架 ———集成框架
dva 框架简介 dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个 ...
- 九:以理论结合实践方式梳理前端 React 框架 ——— 简述中间件
redux-saga 基本简介 中间件是一种独立运行于各个框架之间的代码,以函数的形式存在,连接在一起,形成一个异步队列,可以访问请求对象和响应对象,可以对请求进行拦截处理,再将处理后的控制权向下传递 ...
- 一:以理论结合实践方式梳理前端 CSS 3 ———真正了解样式表
真的了解 CSS 3 吗 在学习 CSS 3 之前,首先要了解的是,什么是 CSS 3.CSS 3 能做什么?学习 HTML 的都知道,HTML 是网页的结构,那么 CSS 就是网页的表现,就像美女和 ...
- 八:以理论结合实践方式梳理前端 CSS 3 ——— 弹性布局特性
基本概念 设置 display: flex; 的元素称为 Flex 容器,其中所有的子元素称为 Flex 项目 容器存在两根用于定位的轴,分别是水平的 主轴 和垂直的 交叉轴,项目默认沿主轴排列 容器 ...
- 七:以理论结合实践方式梳理前端 CSS 3 ——— 字体颜色独特性
样式单位 相对长度单位指定了一个长度相对于另一个长度的属性,对于不同的设备相对长度更适用 绝对长度单位是一个固定的值,它反应一个真实的物理尺寸,绝对长度单位视输出介质而定,不依赖于环境(显示器.分辨率 ...
- 四:以理论结合实践方式梳理前端 React 框架 ——— React 高级语法
事件处理 react 内置组件的事件处理 react 内置组件是指 react 中已经定义好的,可以直接使用的如 div.button.input 等与原生 HTML 标签对应的组件 <!DOC ...
- 五:以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 全局对象
全局对象 全局属性 属性描述 Infinity 代表正的无穷大的数值. NaN 指示某个值是不是数字值. undefined 指示未定义的值 函数 描述 函数 描述 decodeURI() 解码某个编 ...
- 最佳实践系列:前端代码标准和最佳实践
最佳实践系列:前端代码标准 @窝窝商城前端(刘轶/李晨/徐利/穆尚)翻译于2012年 版本0.55 @郑昀校对 isobar的这个前端代码标准和最佳实践文档,涵盖了Web应用开发的方方面面,我们翻译了 ...
最新文章
- java 方法执行结束局部变量释放_JAVA-方法在执行过程中,JVM的内存分配和变化情况,栈(stack)的情况浅析...
- 方舟原始恐惧mod生物代码_重磅!命令与征服和红色警戒源代码在GitHub公布了
- python输出字符串的后两位_Python字符串三种格式化输出
- Docker整合dockerfly实现UI界面管理(单机版)
- scp 免输入密码的方法
- XML解析成实体类统一工具类
- 集成电路封测行业科普
- json多层集合转对象
- 网络安全实验四 防火墙技术的具体应用
- APP上架因收集个人信息问题被拒绝该怎么解决?
- 硬件基础之继电器互锁工作原理
- 这是最坏的时代,也是最好的时代
- Kotlin by lazy解析及在findviewById场景中的使用
- [Oracle] 一个通过添加本地分区索引提高SQL性能的案例
- python输入一个三位数输出它的百位十位个位_python输入一个水仙花数(三位数) 输出百位十位个位实例...
- 架构演进|研究mvp到mvvm(传统架构mvvm和Jetpack下的区别)
- JavaSwing实现贷款计算器
- Sketch 56 中文版发布 最佳产品原型设计工具
- 【HTML | CSS | JAVASCRIPT】再见2022,一起来写一个响应式跨年倒计时吧(附源码)
- gt800打印测试软件,zebra GT800 高级桌面条码标签打印机
热门文章
- 买卖股票的最佳时机 II Java (贪心算法)
- Android中屏蔽返回键,HOME键以及模拟HOME键返回效果的方法
- php递归算法计算n 介乘,递归算法示例——计算N的阶乘
- 万字实录:从DDCTF大赛看当前网络安全新趋势 | 硬创公开课总结文+视频(上篇)...
- 1068 万绿丛中一点红 (20分)测试点分析
- ffmpeg+java截取视频帧
- PhantomJS+Selenium+Scrapy抓取巨潮资讯网企业信息
- M1芯片MacBook安装手机app
- PVR个人视频录像机 - XBMC 12.0(Frodo)新功能
- 河南财经政法大学计算机基础,河南财经政法大学就“忘开必修课”情况说明