@[toc]
1. 从一个脚本开始
点击按钮执行JavaScript脚本，并输出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<p>谜面：小鸟归巢</p>
<button onclick="myFunction()">查看答案</button>
<p id="aaa"></p>
<script>
function myFunction(){
var name="关羽";
document.getElementById("aaa").innerHTML=name;
}
</script>
</body>
</html>
- 效果
点击“查看答案”显示出谜底
image.png
2. 数据类型
注意：JavaScript 拥有动态类型！
2.1 字串型（string）
- 定义字串
var name="LiuBei"
- 用位置索引访问字串
var character = name[3];
输出 B
- 字串长度
语法
变量.length
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<script>
var txt = "Hello World!";
document.write("<p>" + txt.length + "</p>");
</script>
</body>
</html>
2.2 数字型（number）
2.2.1 定义和赋值
只有一种数字类型，可以是小数也可以是整数
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
用科学技术法表示
var y=123e5; // 12300000
var z=123e-5; // 0.00123
2.2.2 算数运算
下表已知：y=5
| 运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
|---|---|---|---|---|
| + | 加法 | x=y+2 | 7 | 5 |
| - | 减法 | x=y-2 | 3 | 5 |
| * | 乘法 | x=y*2 | 10 | 5 |
| / | 除法 | x=y/2 | 2.5 | 5 |
| % | 取余 | x=y%2 | 1 | 5 |
| ++ | 自增 | x=++y | 6 | 6 |
| ++ | 自增 | x=y++ | 5 | 6 |
| -- | 自减 | x=--y | 4 | 4 |
| -- | 自减 | x=y-- | 5 | 4 |
2.2.3 赋值运算
+=、-+、*=、/=、%=、=
2.2.4 字串数字混合计算
x=5+5; //10
y="5"+5; //10
z="Hello"+5; //Hello5
2.3.5 比较运算
下表已知 ： x=10 和 y=5
运算符| 描述| 比较| 返回值|
|:-:|:-:|:-:|:-:|:-:|
|== |等于 |x==8 |false |
|=== |绝对等于（值和类型均相等）| x==="5" |false|
|!= |不等于 |x!=8| true|
|!== |不绝对等于（值和类型有一个不相等，或两个都不相等） |x!=="5" |true|
|> |大于 |x>8| false
|< |小于 |x<8 |true
|>= |大于或等于| x>=8 |false
|<= |小于或等于| x<=8 |true
2.3.6 逻辑运算
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| | | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
2.3 布尔值 （boolean）
var x=true;
var y=false;
2.4 常用对象（object）
Array、Date、null 属性都显示 object
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
2.4.1 一般对象（Object）
- 定义对象
var person={
name : "关羽",
age : 20,
email : "guanyu@xishu.com"
};
- 访问对象属性
name=person.name;
name=person["name"];
- 对象方法
定义对象方法
var person={
name : "关羽",
age : 20,
email : "guanyu@xishu.com",
fullInfo : function(){
return this.name + " " + this.age + " " + this.email
}
}
使用
fullInfo =person.fullInfo();
2.4.2 数组（Array）
var name=new Array();
name[0]="刘备";
name[1]="关羽";
name[2]="张飞";
或
var name=new Array("刘备","关羽","张飞");
或
var name=["刘备","关羽","张飞"];
2.4.5 Data
Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
| 函数 | 描述 |
|---|---|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
2.4.4 null
null的数据类型为 object
2.5 undefined
未定义变量的数据类型为 undefined
3. 变量
3.1 基本使用
- 声明变量
var name;
注意：
- 没有赋值时，值为 undefined
- 赋值后，若重新声明变量，变量值不变
- 赋值
name = "关羽"
- 给未定义的变量赋值
可以被 delete 删除（var 定义的不可被删除）
delete var1;
3.2 变量类型
3.2.1 获取变量（数据）类型
- 使用
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<p> typeof 操作符返回变量、对象、函数、表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof NaN + "<br>" +
typeof false + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof {name:'john', age:34} + "<br>" +
typeof new Date() + "<br>" +
typeof function () {} + "<br>" +
typeof myCar + "<br>" +
typeof null;
</script>
</body>
</html>
3.2.2 声明变量类型
var name=new String;
var x=new Number;
var y=new Boolean;
var cars=new Array;
var person=new Object;
JavaScript 拥有动态类型。但如果不定义，有的时候系统会"误会"。
3.3 Undefined 和 Null
- Undefined
表示变量不含有值。
该变量类型为 Undefined - Null和Undefined的区别
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
3.4 变量的类型转换
4. 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<p id="demo"></p>
<script>
//定义函数
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3); //引用函数
</script>
</body>
</html>
- 效果
12
image.png
网友评论