本文建议有html基础的人看,由于js内容过多,所以建议配合《javascript高级程序设计》服用。
在开始前我先简单介绍一下javascript这门语言吧。
javascript诞生于1995年,主要是用来表单的验证,虽然名字里面有java,但是和java毫无关系,甚至语法差别很大,据说是作者仅用了十天设计出来的,因为java当时很火,所以为了搭顺风车,作者将其命名为”javascript”,匆忙的设计也导致了这门语言有很多缺陷,曾经被滥用在弹窗上,导致了很多人的误解,所以js很长一段时间里都遭到程序员的厌恶,直到后来Google创造出了ajax,js这门语言才开始崭露头角,而之后的html5更是让js一下子变成了最流行的语言之一。
javascript一共由三部分组成,分别是ECMAScript(最新版本是ECMAScript2015,简称es6),DOM,BOM。其中ECMAScript提供核心语言功能(变量,面向对象,闭包等等),DOM提供访问网页的方法和接口(直观的理解就是实现网页中各种各样的效果),BOM提供与浏览器交互的方法和接口。
**
为什么js文件放到<body>底部很重要?
**
由于文档解析是从上向下的,所以一般会把js的引用放到body最底部,而不是放到头部,初学者经常会遇到的一个问题就是类似”Cannot read property ‘style’ of undefined”这样的,这是因为把js文件放到了头部,文档会先执行js文件,然后再解析DOM元素,如果在js里面进行了DOM操作,就会出现undefined错误,当然这个可以在js文件用window.onload方法来解决掉,不过如果js文件过多,会导致DOM一直等待渲染,页面会出现空白,这样不利于用户体验。
(小提示:<script>标签里面还有一个”defer”属性,这样脚本会被延迟到整个页面解析完毕后才执行,但是延迟脚本因为不确定性,并不一定会按照顺序执行,所以最好只包含一个延迟脚本)
标准模式和混杂模式
IE浏览器最先引入了文档模式的概念,文档模式一般是指标准模式和混杂模式,一般如果开头没有声明文档模式,浏览器会默认以混杂模式来渲染页面,这样会导致不同浏览器差别特别大,现在一般声明标准模式都是使用html5的文档类型<!DOCTYPE html>,js里面有document.compatMode属性,当值为CSS1Compat时为标准模式,当值为BackCompat时为混杂模式。标准模式和混杂模式在开发时的具体区别在后面会更详细的讲解。
严格模式
正如前面所说的,js是一门有缺陷的语言,所以也导致了开发中很多莫名其妙的bug出现,es5引入了严格模式的概念,只要在js文件最前面加上”use strict”;这段代码就可以开启严格模式,这样可以提前知道代码中会出现的错误,ie从10开始才支持严格模式。至于严格模式需要注意的事项,我会在后面碰到的时候提示的。
低耦合
虽然在这里就开始讲耦合似乎不太好,不过我还是要提一下。因为初学者一般都喜欢在DOM中直接嵌入js,比如<input type=”button” value=”submit” onclick=”alert(this.value)” />,这种写法实际上是很不友好的,不利于后期维护,就像现在流行的前后端分离一样,css和js文件也都需要从html里面分离出来,这样后期维护和复用就比较方便。
O(∩_∩)O~其实你们看到的这篇文章是我前一天熬夜写的,本来想直接讲变量和基本类型,但是感觉过于突兀,所以第一篇文章就先简单的解释一些基本概念,希望大家能够喜欢。
微信公众号叫泡芙前端(Geek-Fun)