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

More Related Content

What's hot

Viewers also liked

Similar to Hello Javascript

Hello Javascript