Hello Javascript

题外话：编程字体
编辑代码通常使用等宽字体
常见的等宽字体
Courier New
Consolas
Monaco
Lucida Console

添加脚本
使用script标签内嵌
使用元素属性
使用script标签外链

<!doctype html>
<html>
<head>
<script>
可以在这里写代码啦！！！
</script>
</head>
<body>
</body>
</html>

<!doctype html>
<html>
<head>
<script>
alert('Hello');
</script>
</head>
<body>
</body>
</html>

alert('Hello');
函数名字，alert是
⼀一个内置函数

alert('Hello');
括号表明要执行函数，
并告诉函数我传给你的
信息是啥

alert('Hello');
信息是啥
alert出现的文本，
需要用引号括起来

alert('Hello');
信息是啥
分号，表示语句结束
alert出现的文本，
需要用引号括起来

<!doctype html>
<html>
<head>
...
</head>
<body>
<img src="cat.png" onclick="alert('Meow~~~');" />
</body>
</html>

img元素的onclick属性内容为⼀一段代码，
这里执行了alert函数。onclick属性表示
当点击这个图片的时候做什么。

JavaScript的数据存储
数据是有类型的
string boolean number
Array Object...

变量 variables
用来保存数据
有唯⼀一标识的名字

创建⼀一个变量
var myPetName;

var myPetName;
var是js的关键字，用来创建⼀一个变量。

var myPetName;
var是js的关键字，用来创建⼀一个变量。
变量名称，⼀一般是名词性，要有意义。

给变量赋值
var myPetName;
myPetName = 'Alice';

给变量赋值
var myPetName;
要赋值的变量名称

给变量赋值
var myPetName;
要赋值的变量名称 “=”表示赋值

给变量赋值
var myPetName;
要赋值的变量名称 “=”表示赋值
赋值内容

给变量赋值
var myPetName = 'Alice';

给变量赋值
创建变量。

给变量赋值
创建变量。
变量名称

给变量赋值
创建变量。
变量名称
等号赋值

给变量赋值
创建变量。
变量名称
等号赋值
赋值内容

给变量赋值
创建变量。
变量名称
等号赋值
赋值内容
分号结束

数值和字符串操作
var price = 10;
var count = 5;
var totalPrice = price * count; // should be 50

数值和字符串操作
var price = 10;
var count = 5;
var totalPrice = price * count; // should be 50
var somethingToSay = 'I love my pet ' +
myPetName + '.';
// should be I love my pet Alice.

注意
var value1 = 1 + 2; // will be number 3
var value2 = '1' + '2'; // will be string '12'

数组 Array
可以放置⼀一系列的数据
通过索引访问

数组 Array
可以放置⼀一系列的数据
通过索引访问
3
2
1
0

数组 Array
可以放置⼀一系列的数据，通过索引访问
var myArray1 = []; // 创建⼀一个空数组，没有任何元素
var myArray2 = [1, 2, 3]; // 包含三个元素的数组
alert(myArray2[0]); // 会显示第⼀一个元素：1
var myArray3 = ['cat', 'dog', 'fish'];

如果... if...
if (weather == 'rainy') {
alert('Bring your umbrella!');
}

如果...否则... if...else...
if (price > 1000) {
alert("I won't buy it.");
} else {
alert("I will buy it.");
}

比较操作符
x == y // 表示相等
x != y // 表示不等
x < y // 表示小于
x > y // 表示大于
!x // 表示非
x >= y // 表示大于等于
x <= y // 表示小于等于

逻辑操作符
与、或、非 And、Or、Not

逻辑操作符
a && b // a并且b
a || b // a或者b
!a // 非a

逻辑操作符
if (youLoveMe == true &&
iLoveYou == true) {
alert("Let’s get married.");
} else {
alert("Bye bye!");
}

逻辑操作符
if (youLoveMe == true &&
iLoveYou == true) {
} else {
alert("Bye bye!");
}
if (youLoveMe && iLoveYou) {
} else {
alert("Bye bye!");
}

逻辑操作符
if (weather == 'sunny' ||
weather == 'cloudy') {
alert("Let's go outside!");
} else {
alert("We should stay at home.");
}

switch...case...
var icon;
if (weather == 'rainy') {
icon = 'rainy.gif';
} else if (weather == 'sunny') {
icon = 'sunny.gif';
} else if (weather == 'cloudy') {
icon = 'cloudy.gif';
} else if (weather == 'fog') {
icon = 'fog.gif';
} else if (weather == 'snow') {
icon = 'snow.gif';
}

switch...case...
var icon;
switch (weather) {
case 'rainy':
icon = 'rainy.gif';
break;
case 'snow':
icon = 'snow.gif';
break;
default:
icon = 'sunny.gif';
break;
}

编码风格和注释
代码适当增加空格
每行不宜过长
有注释说明

// 单行注释
/* 多行注释，我在这里可以写很多东西
但是⼀一行也不能写太多，注意换行。*/
/*
* 多行注释通常的写法，这样写看着
* 比较美观
*/

循环
循环主要用来处理重复有规律的任务
for循环
while循环

for循环
for (var i = 0; i < 10; i++) {
console.log(i);
}
// 遍历数组
for (var i = 0; i < someArray.length; i++) {
console.log(someArray[i]);
}

while循环
var i = 0;
while (i < 5) {
console.log(i);
i++;
}

函数是什么？
是⼀一段可重用的代码，用来完成某项工作任务。

function sum(a, b){
return a + b;
}

function sum(a, b){
return a + b;
}
JS关键字，表
示定义函数

function sum(a, b){
return a + b;
}
JS关键字，表
示定义函数
函数名字，通常
用动词描述。

function sum(a, b){
return a + b;
}
JS关键字，表
示定义函数
用动词描述。
括号包含可以传递
的信息，称为参数

function sum(a, b){
return a + b;
}
JS关键字，表
示定义函数
用动词描述。
大括号内为函数内部的代码

function sum(a, b){
return a + b;
}
JS关键字，表
示定义函数
用动词描述。
大括号内为函数内部的代码
表示函数
返回内容

函数
function sum(a, b) {
return a + b;
}
alert(sum(1, 2)); // equals alert(3);

对象
属性（数据） + 行为（函数）

对象，以车举例
属性
品牌
颜色
行为
驾驶

对象，以车举例
属性（变量）
品牌（brand）
颜色（color）
行为（函数）
驾驶（drive）

对象
var myCar = {
// 品牌
brand: 'Volkswagon',
// 颜色
color: 'yellow',
// 驾驶
drive: function(){
console.log('drive');
}
}

对象
console.log(myCar.color);
console.log(myCar.brand);
myCar.drive();

对象
var myCar = {};
myCar.color = 'red';
myCar.brand = 'Chevrolet';
console.log(myCar.color); // red
delete myCar.color;
console.log(myCar.color); // undefined
对象具有很高的灵活性，属性、方法都可以动态添加和删除。

对象
前端经常使用对象表示某事物
弹出框
按钮

JSON
JavaScript Object Notation
⼀一种结构化的数据描述形式，由JS语言中对象
的表达方式发展而来。

JSON
{'x': 116.4030113, 'y': 39.91453}

浏览器
可以执行JavaScript代码，给脚本执行提供环境
此外还有
浏览器自身信息
历史纪录
cookies
定时器
提供访问页面元素的接口
其他功能

var yourName = prompt('What is your name?');
alert('Hello ' + yourName + '!');

重要对象
window对象
浏览器环境中提供的全局对象
对象下包含所有浏览器和页面的数据和方法
访问window对象下内容时，window可以省略

重要对象
window对象
浏览器环境中提供的全局对象
对象下包含所有浏览器和页面的数据和方法
访问window对象下内容时，window可以省略
console.log(window);
console.log(window.innerWidth);
console.log(window.document);
console.log(innerWidth);
console.log(document);

DOM
Document Object Model
将文档进行模型化处理，以便用编程语言访问
和操控

获取页面元素
document.getElementById(id)
document.getElementsByTagName(name)
document.querySelector(selector);

<input id="input-text" type="text" />
<input type="button" onclick="checkMyValue()"
value="check" />
<script>
function checkMyValue(){
var inputText =
document.getElementById('input-text');
if (inputText.value == '') {
alert('你啥也没写呀！');
} else {
alert(inputText.value);
}
}
</script>

<input type="button" onclick="addRow()"
value="add" />
<ul id="list"></ul>
<script>
var counter = 1;
function addRow(){
var ul = document.getElementById('list');
ul.innerHTML = ul.innerHTML +
'<li>新的⼀一行' +
counter +
'</li>';
counter++;
}
</script>

Ajax
Asynchronous JavaScript And XML

Ajax
Jesse James Garrett

Ajax
Jesse James Garrett
I coined the
word Ajax!

Hello Javascript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Hello Javascript

Similar to Hello Javascript (20)

Hello Javascript