作为web前端开发人员来说，等级的高低取决于对JavaScript的理解和使用。当然Html、CSS也是很重要的，在后期的文章里会陆陆续续写到。在接下来的几篇中，我把JavaScript分为以下几部分讲解：

  • JavaScript基础
  • JavaScript高级
  • JavaScript设计模式
  • JavaScript扩展

1.什么是JavaScript？

我不是很推崇拿着不会的词汇就去百度百科看词汇的定义，因为即使你记住了它的定义，也没有真正理解它里面的含义。 个人认为对于一个新东西或新词汇应该有属于自己的理解。 比如看下百度百科对JavaScript的定义，

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

如果对于接触过JavaScript的人来说完全可以理解上面所传达的意思，但是如果对于没有一点编程经验的人来说，它在说什么火星语。 说下我对JavaScript通俗易懂的理解：

1.JavaScript是一门弱类型的语言 （是什么） 2.JavaScript可以在浏览器里执行 （在哪用） 3.JavaScript可以操作Html、CSS （干什么）

2.重要类型

JavaScript数据类型分为：

  • 基本类型
  • 引用类型

判断类型使用typeof，判断一个实例是否属于某种类型使用instanceof

基本类型：

typeof 1 //"number" 数字
typeof '1' //"string" 字符串
typeof true //"boolean" 布尔

引用类型：

typeof Window //"function" 函数
typeof undefined //"undefined" 未定义
typeof null、[]、{} //"object" 对象

3.常用方法

字符串String

var str = 'Hello World!'
str.substr(0, str.indexOf(' ')) //"Hello" substr截取 indexOf、lastIndexOf索引
str.slice(0, -1) //"Hello World" slice截取
str.concat('你好!') //"Hello World!你好!"  concat添加
str.replace(/\l/g, 'L') //"HeLLo WorLd!"    replace替换
str.trim() //"HeLLo WorLd!" trim去掉两边空格
var str = '1,2,3,4'
str.split(',') //["1", "2", "3", "4"] splite字符串分割

数组Array

var arr = [1, 2, 3, 4, 5]
arr.concat(6) //[1, 2, 3, 4, 5, 6] concat添加
arr.push(6) //6 push从最后一个元素添加
arr.pop() //5 pop从最后一个元素删除
arr.unshift(6) //6 unshift从开头一个元素添加
arr.shift() //1 shift从开头一个元素删除
arr.join(',') //"1,2,3,4,5,6" join数组放入字符串
var arr = [1, 5, 3, 6, 7, 2, 4]
arr.sort() //[1, 2, 3, 4, 5, 6, 7] sort升序
arr.sort().reverse() //[7, 6, 5, 4, 3, 2, 1] reverse颠倒顺序

日期Date

var date = new Date() //时间2015-09-17 18:39:20:759
date.getFullYear() //2015 返回年份
date.getMonth() //8 返回月份，从0开始，写这篇文章是9月份
date.getDay() //4 返回每周第几天 从0（星期日）开始
date.getDate() //17 返回日份
date.getHours() //18 返回时
date.getMinutes() //39 返回分
date.getSeconds() //20 返回秒
date.getMilliseconds() //759 返回毫秒
date.getTime() //1442486360759 返回1970年1月1日至今的毫秒

日期初始化的5种方法

new Date() //Thu Sep 17 2015 18:39:20 GMT+0800 (中国标准时间)
new Date(1442486360759) //传时间戳
new Date(2015, 8, 17) //传年月日
new Date(2015, 8, 17, 18, 39, 20) //传年月日时分秒
new Date(2015, 8, 17, 18, 39, 20, 759) //传年月日时分秒毫秒

数学Math

Math.PI //3.141592653589793 圆周率
Math.abs('-10') //10 绝对值
Math.ceil(4.1) //5 上舍入
Math.floor(4.1) //4 下舍入
Math.round(4.1) //4
Math.round(4.6) //5 四舍五入
Math.pow(2, 3) //8 2的3次幂
Math.random() //0~1之间的随机数
Math.sqrt(9) //9的平方根

函数Function

btoa(encodeURIComponent('你好')) //"JUU0JUJEJUEwJUU1JUE1JUJE" btoa 进行base64编码
decodeURIComponent(atob('JUU0JUJEJUEwJUU1JUE1JUJE')) //"你好" 解码base64
escape('你好') //"%u4F60%u597D" 进行16进制的编码
unescape('%u4F60%u597D') //"你好" 解码16进制
encodeURI('你好') //"%E4%BD%A0%E5%A5%BD" 编码成URI
decodeURI('%E4%BD%A0%E5%A5%BD') //"你好" 解码URI
eval("console.log('Hello World!')") //Hello World! 执行js语句
parseInt('10') //10 String类型转成Number类型
parseFloat('10.25') //10.25 String类型转成Number类型

encodeURI对具有特殊含义的ASCII标点符号（即：;/?:@&=+$,#）是不会进行编码的，而encodeURIComponent会进行编码。

JavaScript对象有Array、Boolean、Date、Math、Number、String、RegExp、Events，详情可以去w3school查看 Browser对象有Window、Navigator、Screen、History、Location DOM对象有Document、Element、Attribute、Event

4.window对象

弹出框类：

alert('Hello World!') //弹出浏览器警告框
confirm('Are you like JavaScript?') //弹出浏览器对话框 返回true或false
prompt("What's your hobby?") //弹出浏览器确认框 返回输入的内容

页面类：

window.open() //打开新的空白页
window.close() //关闭当前页面

定时器类：

var getDate = setInterval(function () {
  console.log(new Date())
}, 1000) //每秒显示时间 执行n次
clearInterval(add) //取消显示时间
var print = setTimeout(function () {
  console.log('Hold on 5 seconds')
}, 5000) //等5秒显示信息 执行1次
setTimeout(print) //取消显示信息

事件类：

var clickFun = function () {
  alert('Hello World!')
}
window.addEventListener('click', clickFun) //注册点击事件
window.removeEventListener('click', clickFun) //注销点击事件

下面一些东西后续会慢慢写到，现在只是简单介绍下

其他类：

缓存：applicationCache
为动画提供：requestAnimationFrame、cancelAnimationFrame，类似setTimeout
捕获释放的事件：captureEvents、releaseEvents，可以同setCapture、releaseCapture一起使用
控制台输出：console
设备像素比：devicePixelRatio
获取当前元素CSS值：getComputedStyle
获取当前元素的事件：getEventListeners
获得页面中选中信息：getSelection
判断对象是否有给出名称的属性或对象：hasOwnProperty
检查其原型链的对象是否存在于指定对象实例中：isPrototypeOf
加载history列表中的url：window.history属性
当前 URL 的信息：window.location属性
DOM操作：window.document属性
窗口的文档显示区的高度和宽度：innerHeight、innerWidth
nosql本地存储：indexedDB
本地存储：localStorage、sessionStorage
检测无穷数：isFinite
是否是非数字值：isNaN

这篇就讲到这，下章更精彩。。。