小菜鸟之JS在线

作为资深菜鸟，我又得开始翻越另一座山——JS，没有付出就没有收获，希望自己记住typeof null，每天高效率完成每天的任务，老调重弹，上课认真听讲，勤动手敲代码。每天保证不熬夜，身体没了啥也没了。

好啦，我们来看看今天的内容：

JS简介
1995年时，由Netscape公司的Brendan Eich ECMAScript： 标准

• 组成部分
  
  • ECMAScript 标准 ES3 ES5 ES6/ES2015 ES7 ES2017 ES2018
  • DOM（document object model 文档对象模型）
  • BOM （browser object model 浏览器对象模型）

• 历史版本

  • 1998年6月，ECMAScript 2.0版发布。

  • 1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。

  • 2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动;以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。

  • 2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony(和谐)。会后不久，ECMAScript 3.1就改名为ECMAScript 5。

  • 2009年12月，ECMAScript 5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6;一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。

  • 2011年6月，ECMAscript 5.1版发布，并且成为ISO国际标准(ISO/IEC 16262:2011)。

  • 2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。

  • 2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。

  • 2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。

  • ECMA的第39号技术专家委员会(Technical Committee 39，简称TC39)负责制订ECMAScript标准，成员包括Microsoft、Mozilla、Google等大公司。TC39的总体考虑是，ES5与ES3基本保持兼容，较大的语法修正和新功能加入，将由JavaScript.next完成。

引入方式

• 内联引入：以HTML标签属性的方式加入JS

<button onclick="alert('hello world')">按钮</button>

• 内嵌引入
  
  • 在HTML中使用script标签引入JS代码，
  • 引入位置： 理论上说位置没有严格限制，很多人会放到head标签中（为了外部文件CSS与JS都放到一起），规范推荐：放到结束标签之前。

<script> alert('你好，世界！')</script>

• 外部引入
  
  • 注意： CSS引入外部文件的时候用的是href属性，JS用的是src属性

<script src="js/01.js"></script>

小知识点

• 后缀名 .js
• 注释
  + 单行注释 //……
  + 多行注释 /……/

• 分号

  • 每一行结束语句应该在后边加 ; ，表示语句的结束
  • JS语法非常松散，可以加也可以不加;, 换行以后解释器自动认为是一个新的语句

  四种输出方式

//1.弹窗  alert('')
alert('hello world')
//2.document.write('...')
document.write('<h1>Hello world!</h1>')
//3.document.title="..."
document.title="你好！"
//4.console.log('') 控制台打印
console.log('hello')

获取元素

• 通过id获取 document.getElementById(‘id值’)
• 使用案例

document.getElementById('btn').onclick=function(){
  ...}

绑定事件

• onclick点击事件
  
  • 元素 .οnclick=function(){
    //…
    }

document.getElementById('btn').onclick = function(){
   
    alert('btn 被点击了')
}

• onmouseover鼠标移入

document.getElementById('btn').onmouseover = function(){
   
    alert('鼠标移入了btn')
}

变量

• JS是弱类型（动态类型）语言，变量是什么值，取决于 你给它赋的值的类型，是动态的可以改变的。
• 书写格式：var 变量名 = 值
• 命名规范
  
  • 不能使用关键字 作为变量名，如：var function…（×）
  • 不能以数字开头，如：var 3th=300（×） btn3（√）
  • 可以以英文字母、_、 开