JavaScript简介
JavaScript起源
早年间,人们上网都是使用速度很慢的”猫“(调制调解器)上网。想象一下这样一个场景:你好不容易填写完了注册表单,点击【提交】按钮,然后等待 30 秒,最终服务器返回的消息说密码的长度不能少于 6 位,让你重新填写整个表单,这时你是不是很想 😭,这该是多么糟糕的用户体验呀。
为了解决此类问题,当时走在技术革新最前沿的网景(Netscape)公司,决定着手开发一种客户端语言,用来处理这种简单的表单验证。
当时就职于网景公司的 布兰登.艾奇 负责该项目的实施,开始着手为计划于1995年2月发布的Netscape Navigator 2 浏览器开发一种名为 LiveScript 的脚本语言。为了赶在发布日期前完成 LiveScript 的开发,Netscape 与 Sun 公司建立了一个开发联盟,共同开发 LiveScript。在 NetScape Navigator 2 发布前夕,网景为了更好地推广这个脚本语言(利用 Java 语言的知名度),临时把 LiveScript 改名为 JavaScript,实际上两者没有任何关系。
浏览器战争
JavaScript 1.0 发布之后获得了巨大的成功,Netscape 随即在 Netscape Navigator 3 中又发布了JavaScript 1.1。与此同时,微软公司在推出 IE 3 的时候也发布了自己的脚本语言,JScript。JScript 和 JavaScript 差异很大,互不兼容,编程人员不得不痛苦地为两种浏览器分别编写脚本。 例如,你想获得 id 属性值为 myid 元素的 left 位置,并把它赋值给变量 xpos ,那么在 Netscape Navigator 4 浏览器里必须这样写:
var xpos = document.layers['myid'].left;
而在 IE 4 浏览器中,需要这样写:
var xpos = document.all['myid'].leftpos;
制定标准
1997年,网景公司给欧洲计算机制造商协会(ECMA, European Computer Manufacturers Association)提了一个建议,以 JavaScript 1.1 为蓝本,由该协会主导制定了一套 JavaScript 语言开发规范。于是 ECMAScript
诞生了,这是一个国际标准化的 JavaScript 开发标准,所有浏览器厂商在开发浏览器脚本语言时,都要准守这套规范。这样的话,编程人员在写代码时只要写一次,就可以在所有的浏览器上执行了。在新的规范下,操作DOM元素
的的语法就可以统一写成这样:
var xpos = document.getElementById('myid').style.left;
使用JavaScript
行内代码
使用 javascript: 前缀构建执行 JavaScript 代码的 URL。
<a href="javascript:alert('Hello JavaScript')">点我</a>
所有可以设置 URL 的地方都可以使用这种以 javascript: 作为前缀的 URL,当用户触发该 URL 时,javascript: 之后的 JS 代码就会获得执行。
将 JS 代码写到元素的事件属性值中
<div onclick="window.alert('Hello JavaScript!')"></div>
这两种方式只适用于代码量比较少的时候,如果代码比较多,建议使用内部代码或写到单独的 JS 文件中。
内部代码
如果页面需要中包含大量的 JavaScript 代码,则建议将这些JavaScript脚本放在
<script type="text/javascript">
alert('Hello JavaScript')
</script>
外部代码
为了让 HTML 页面和 JavaScript 脚本更好地分离,我们可以将 JavaScript 脚本单独保存在一个 .js 文件中,HTML 页面导入该 .js 文件即可。
<script src="test.js" type="text/javascript"></script>
理解Window对象
在页签浏览器(比如 Chrome)中,每个页签具有自己的 window 对象。也就是说,同一个窗口的页签之间不会共享一个 window 对象。window 对象给我们提供了一些方法、属性和事件。
Window对象的方法
window 提供的几个关于对话框的方法。
// 警告框
window.alert('哈哈');
// 确认框
window.confirm('确认退出该应用吗?');
// 输入框
window.prompt('请输入密码?');
window对象的属性
window对象的console属性也是一个对象,它提供了几个可以在控制台输出信息的方法。
// 日志信息
window.console.log('日志信息');
// 错误信息
window.console.error('错误信息');
// 警告信息
window.console.warn('警告信息');
// 普通信息
window.console.info('普通信息');
// 调试信息
window.console.debug('调试信息');
JavaScript语法
标识符
所谓标识符,就是指变量、函数、属性,或者函数参数的名字。
标识符的组合规则:
-
第一个字符必须是一个字母、下划线(_)或一个美元符号($)其他字符可以是字母、下划线、美元符号或数字。
-
只能由英文字母、数字、下划线(_)、美元符号($)构成,并且不能以数字开头,不能使用 ECMAScript 的关键字和保留字。
命名书写规范:
推荐采用第一个单词的首字母小写,其余单词首字母大写的方式,例如:firstName、getUserInfo。
大小写敏感
JS 中的标识符是区分大小写的,也就是说变量 name 和 Name 是两个不同的标识符。
注释
// 单行注释
/*
这是内容比较多的,
多行注释。
*/
/* 多行注释 /* 不能嵌套使用, */ 否则会导致语法错误! */
关键字
这些标识符已经被 ECMAScript 收录(使用)了,它们被赋予特殊的意义(功能)了,所有我们不能使用它们作为标识符。
break | export | super |
case | extends | switch |
catch | finally | this |
class | for | throw |
const | function | try |
continue | if | typeof |
debugger | import | var |
default | in | void |
delete | instanceof | while |
do | new | with |
else | return | yield |
保留字
虽然这些标识符并没有被 ECMAScript 收录,但是将来的某个时候,可能会被ECMAScript 收录,变成关键字,也就是说,这些标识符已经被预定了,因此我们也不能使用它们。
implements | package | public | await |
interface | private | static | |
let | protected | enum |
除此之外,字面量null,true和false也不能用作标识符。
代码规范
- JavaScript对换行、缩进、空格不敏感。也就是说: