前端三剑客之JavaScript初体验

为什么学习JavaScript？

从这两年的发展趋势来看，大前端应该是打了实锤了，而JavaScript作为web前端的主要编程语言，自然是不容小觑。HTML 定义了网页的内容，CSS 描述了网页的布局，而JavaScript 决定网页的行为。

JavaScript是什么？

• JavaScript是一种轻量级的编程语言
• JavaScript 是可插入 HTML 页面的编程代码。
• JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript直接写入Html输出流

JavaScript 能够直接写入 HTML 输出流中：





您只能在 HTML 输出流中使用 document.write。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

JavaScript：点击事件

 
 
 



	
我的第一个 JavaScript


JavaScript 能够对事件作出反应。比如对按钮的点击：


点我!
	

JavaScript：改变 HTML 内容

 
 
 



	
我的第一段 JavaScript


JavaScript 能改变 HTML 元素的内容。




点击这里
	

您会经常看到 document.getElementById(“some id”)。这个方法是 HTML DOM 中定义的。DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

JavaScript：改变 HTML 图像

 
 
 



	




点击灯泡就可以打开或关闭这盏灯
	

JavaScript：改变 HTML 样式

 
 
 




我的第一段 JavaScript


JavaScript 能改变 HTML 元素的样式。




点击这里
	

JavaScript:验证输入

 
 
 



	
我的第一段 JavaScript

请输入数字。如果输入值不是数字，浏览器会弹出提示框。





点击这里
	

JavaScript 显示数据

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

使用window.alert(),你可以弹出警告框来显示数据

我的第一个页面

我的第一个段落。


	

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容

 
 
 



	
我的第一个 Web 页面

我的第一个段落。


	

写到 HTML 文档

document.write() 仅仅向文档输出写内容,如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

 
 
 


	
我的第一个 Web 页面


浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。



	

JavaScript变量

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值

JavaScript 字面量

• 数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e),如3.14，100,123e5
• 字符串（String）字面量 可以使用单引号或双引号:如"Lee", ‘Lee’
• 表达式字面量 用于计算如：5+5,6*6
• 数组（Array）字面量 定义一个数组：[2,0,1,3,1,4]
• 对象（Object）字面量 定义一个对象：{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
• 函数（Function）字面量 定义一个函数,如下所示

function myFunction(a, b) { return a * b;}

JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

• var length = 10; // Number 通过数字字面量赋值
• var points = x * 10; // Number 通过表达式字面量赋值
• var lastName = “ljz”; // String 通过字符串字面量赋值
• var cars = [“lee”, “zhang”, “wang”]; // Array 通过数组字面量赋值
• var person = {firstName:“lee”, lastName:“zhang”}; // Object 通过对象字面量赋值

JavaScript函数

JavaScript 语句可以写在函数内，函数可以重复引用：
引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
   	return a * b;                                // 返回 a 乘以 b 的结果
}

JavaScript 字母大小写

JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。

JavaScript 语句标识符

JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。在 JavaScript中，几乎所有的事物都是对象。

对象定义

你可以使用字符来定义和创建 JavaScript 对象:

 
 
 




创建 JavaScript 对象。

访问对象属性

• 通过.property来访问对象属性

 
 
 




有两种方式可以访问对象属性：



你可以使用 .property 或 ["property"].

• 通过[“property”]来访问对象属性

 
 
 




有两种方式可以访问对象属性: 


你可以使用 .property 或 ["property"]。

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
该实例访问了 person 对象的 fullName() 方法

 
 
 




创建和使用对象方法。

对象方法作为一个函数定义存储在对象属性中。




	

如果你要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回

 
 




创建和使用对象方法。
对象方法是一个函数定义,并作为一个属性值存储。