JavaScript基础
2016-07-06 09:19
645 查看
为什么学习 JavaScript?
JavaScript web 开发人员必须学习的 3 门语言中的一门:HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
本教程是关于 JavaScript 及介绍 JavaScript 如何与 HTML 和 CSS 一起工作。
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据:使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
常见的HTML事件
下面是一些常见的HTML事件的列表:事件 | 描述 |
---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
JavaScript 数据类型
在 JavaScript 中有 5 中不同的数据类型:string
number
boolean
object
function
3 种对象类型:
Object
Date
Array
2 个不包含任何值的数据类型:
null
undefined
JavaScript JSON
JSON 实例
以下 JSON 语法定义了 employees 对象: 3 条员工记录(对象)的数组:JSON Example
{"employees":[{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
JSON 格式化后为 JavaScript 对象
JSON 格式在语法上与创建 JavaScript 对象代码是相同的。由于它们很相似,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。
JSON 语法规则
数据为 键/值 对。数据由逗号分隔。
大括号保存对象
方括号保存数组
JavaScript 内嵌函数
所有函数都能访问全局变量。实际上,在 JavaScript 中,所有函数都能访问它们上一层的作用域。
JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。
该实例中,内嵌函数 plus() 可以访问父函数的 counter 变量:
实例
function add() {var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
JavaScript 闭包
还记得函数自我调用吗?该函数会做什么?实例
var add = (function () {var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// 计数器为 3
尝试一下 »
实例解析
变量 add 指定了函数自我调用的返回字值。自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护,只能通过 add 方法修改。
JavaScript HTML DOM
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树:
HTML DOM 树
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
JavaScript Window - 浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。浏览器对象模型 (BOM)
浏览器对象模型(Browser Object Model (BOM))尚无正式标准。由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。
JavaScript 库
JavaScript 库 - jQuery、Prototype、MooTools。JavaScript 框架(库)
JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。为了应对这些调整,许多的 JavaScript (helper) 库应运而生。
这些 JavaScript 库常被称为 JavaScript 框架。
在本教程中,我们将了解到一些广受欢迎的 JavaScript 框架:
jQuery
Prototype
MooTools
相关文章推荐
- javascript内建对象Date
- 比较正宗的验证邮箱的正则表达式js代码详解
- JS代码优化技巧之通俗版
- JavaScript学习笔记十五:箭头函数
- Javascript 基础---Ajax入门必看
- JS中Unexpected identifier异
- js单选框、复选框练习
- 洛谷 P1197 [JSOI2008]星球大战
- etxjs
- javascript策略模式(strategy)
- 年月日三级联动(纯JS)
- 我对Backbone.js的一些认识
- javascript 更新联动下拉列表框
- [Canvas] Introduction to drawing with p5js
- ejs判断变量是否为空并输出
- JavaScript网页编程之------函数(一般函数、动态函数、匿名函数)
- Javascript 基础---Ajax入门必看
- 快速解决js动态改变dom元素属性后页面及时渲染的问题
- js中window.open的参数及注意注意事项
- JS如何判断json是否为空