1. JavaScript 变量
变量是用于存储信息/数据的"容器"
在程序运行的过程中可以随时改变变量中存储的数据
通过var关键词声明（创建）定义 JavaScript 变量
格式 : var 变量名称；
var main;变量声明之后，该变量是空的（它没有值）。
如果我们需要给这个变量保存信息/数据，就需要给变量赋值
如需向变量赋值，请使用等号。
格式 ： 变量名称 = 数据;
main = 100;您也可以在声明变量时对其赋值
var main = 100; 一条语句可以声明多个变量，该语句以 var 开头，并使用逗号分隔变量即可
var main1 , main2, main3; 可以逐个为声明的变量赋值
main1 = "字符串",
main2 = 333,
main3 = "中文";同样也可以在声明时赋值
var main1 = "字符串",main2 = 333,main3 = "中文";输出
alert(main1 + "," + main2 + "," + main3); 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var main1 , main2, main3;
main1="字符串";
main2=666;
main3="中文";
alert(main1+","+main2+","+main3);
</script>
</head>
<body>
</body>
</html>
2. JavaScript 数据类型
数据类型实际上是用来决定所定义的变量将来所能进行那些操作。
JavaScript中 的数据类型有2大类：值类型(基本类型)和引用数据类型
值类型(基本类型): 字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、 未定义（Undefined）、Symbol[ES6]
引用数据类型：对象(Object)、数组(Array)、函数(Function)
1. 值类型(基本类型)
值类型(基本类型): 字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、 未定义（Undefined）、Symbol[ES6]
1. 字符串（String）
字符串（比如 "字符串"）是存储字符的变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var str = "字符串";
alert(str);
</script>
</head>
<body>
</body>
</html>字符串可以是引号[''/""]中的任意文本 双引号中的双引号用单引号代替
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var str = "字符串里的'单双引号'";
alert(str);
</script>
</head>
<body>
</body>
</html>
2. JavaScript 数字
JavaScript 只有一种数字类型，数字可以带小数点，也可以不带
<script type="text/javascript">
var num1 = 52.1;
alert(num1);
</script> 
极大或极小的数字可以通过科学（指数）计数法来书写
var y=123e5; // 结果为12300000
var z=123e-5; // 结果为0.00123“0” 开头的是8进制 “0x”开头的是16进制
<script type="text/javascript">
var num8 = 050;
var num16 = 0X522;
alert(num8);
alert(num16);
</script> |  |
3. JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false 布尔常用在条件判断中
<script type="text/javascript">
var true1 = true;
var false1 = false;
alert(true1);
alert(false1);
</script> |  |
4. null undefined
在 JavaScript 中 null 表示 "空"
null 是一个只有一个值的特殊类型。表示一个空对象引用
undefined 什么都没有
<script type="text/javascript">
var un;
var nul = null;
alert(un);
alert(nul);
</script> |  |
2. 引用数据类型
引用数据类型：对象(Object)、数组(Array)、函数(Function)
1. JavaScript 对象
对象由{}表示
{}内部可以出现2中元素
1.属性：属性名称 : 属性值 ，属性与属性之间/属性与方法之间使用","分割
2.方法：方法名称 ：function(){} ,方法与方法之间/方法与属性之间使用","分割
对象中的属性访问
1.得到对象中的属性值
对象名称.属性名称 / 对象名称["属性名称 "]
alert(student.name);
alert(student["address"]);
2.修改对象中的属性值
对象名称.属性名称 = 新值
student.name="小暖";
alert(student.name);
3.调用对象中的方法
对象名称.方法名称()
student.getInfo();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var student = {
name: "苏小暖",
age: 21,
address: "西安",
getInfo: function() {
alert("我的名字叫苏小暖，请多指教。");
},
};
alert(student.name);
alert(student.age);
alert(student["address"]);
student.name = "小暖";
alert(student.name);
student.getInfo();
}
</script>
</head>
<body>
</body>
</html>
2. JavaScript 数组(Array)
数组：一组数据，使用一个变量来保存一组数据 （三种方法）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var arr = new Array();
arr[0]= "甘雨";
arr[1]= "刻晴";
arr[2]= "我们是又甘又刻组合";
alert(arr[0]+","+arr[1]+","+arr[2]);
}
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var arr = new Array("甘雨","刻晴","我们是又甘又刻组合");
alert(arr[0]+","+arr[1]+","+arr[2]);
}
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var arr = new Array("甘雨","刻晴","我们是又甘又刻组合");
alert(arr[0]+","+arr[1]+","+arr[2]);
}
</script>
</head>
<body>
</body>
</html>
数组的 length 属性：得到数组中的元素的个数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var arr = new Array();
arr[0]= "甘雨";
arr[1]= "刻晴";
arr[2]= "我们是又甘又刻组合";
alert(arr.length);
}
</script>
</head>
<body>
</body>
</html> 
3. JavaScript 函数
函数(Function) 实现某一个功能的代码块
格式:function 函数名称(参数列表){函数体 [return xxxx]}
function：声明函数的关键词
函数名称的规则
1.可以是字母，数字，$ , _ ,不能用数字开头
2.$ , _ 可以作为开头，单不推荐使用
3.函数名称对大小写敏感
4.不能使用关键字
关键字是javascript语言为一个单词赋予特殊的含义，这些赋予特殊的含义的单词就是关键字
5.全字母小写，如果有多个单词组成可以用$ , _ ,连接
1. JavaScript 函数参数列表
参数---接收函数之外的数据进入本函数中进行运算
没有参数--()
有一个参数----(变量名称)
有多个参数(变量名称，变量名称，变量名称)
{}--函数体包含的是具体功能实现的代码
[return xxxx]--函数的执行结果，有结果就写在函数体的最后一行，没有结果就不写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
function test1() {
alert("没有参数，没有返回值的函数");
}
function test2(num1) {
alert("有一个参数，没有返回值的函数,参数是==" + num1);
}
function test3(num1, num2, num3) {
alert("有3个参数，没有返回值的函数,参数是==" + num1 + "," + num2 + "," + num3);
}
function test4() {
alert("没有参数，有返回值的函数");
return "返回值";
}
function test5(num1, num2, num3) {
alert("有3个参数，有返回值的函数,参数是==" + num1 + "," + num2 + "," + num3);
return "返回值";
}
test1();
test2("苏小暖");
test3("苏小暖", 21, "西安");
var res = test4();
alert(res);
var res = test5("苏小暖", 21, "西安");
alert(res);
}
</script>
</head>
<body>
</body>
</html>
总结: 要什么，给什么;给什么，收什么
2. JavaScript 的作用域
1. 局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量
所以只能在函数内部访问它（该变量的作用域是局部的）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
function xiaonuan(){
//局部变量
var name="小暖";
alert("局部变量"+name);
}
xiaonuan();
function suxiaonuan(){
//局部变量
alert("局部变量"+name);
}
suxiaonuan();
}
</script>
</head>
<body>
</body>
</html> |  |
可以看到函数suxiaonuan是无法用到函数xiaonuan中的变量的
局部变量只可本函数使用
2. 全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
//全局变量
var name="小暖";
function xiaonuan(){
alert("全局变量"+name);
}
function suxiaonuan(){
alert("全局变量"+name);
}
xiaonuan();
suxiaonuan();
}
</script>
</head>
<body>
</body>
</html> |  |
可以看到函数都可以被作用，所有函数都可以访问
局部变量会在函数运行以后被删除
全局变量会在页面关闭后被删除
如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
name="小暖";
function xiaonuan(){
alert("window属性"+name);
}
xiaonuan();
}
</script>
</head>
<body>
</body>
</html>
4. JavaScript 运算符
1. JavaScript 算术运算符 [+ - * / % ++ --]
+ 用于把文本值或字符串变量加起来（连接起来）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var str1 = "苏";
var str2 = "小暖";
alert(str1 + str2);
}
</script>
</head>
<body>
</body>
</html>
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var num1 = 7;
var num2 = 33;
var num3 = 100;
alert( num2 + num1 );//结果为40
alert( num2 - num1 );//结果为26
alert( num2 * num1 );//结果为231
alert( num2 / num1 );//结果为4.714285714285714
alert( num2 % num1 );//结果为5
alert( num3++);//结果为100
var num3 = 100;
alert( ++num3);//结果为101
var num3 = 100;
alert( num3--);//结果为100
var num3 = 100;
alert( --num3);//结果为99
}
</script>
</head>
<body>
</body>
</html>2. JavaScript比较运算符 [> < >= <= == === !=]
比较运算符在逻辑语句中使用，以测定变量或值是否相等。
运算结果是boolean值【true [正确] / false[错误]】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var num1 = 520;
var num2 = 521;
alert(num1 > num2);//结果为false
alert(num1 < num2);//结果为true
alert(num1 >= num2);//结果为false
alert(num1 <= num2);//结果为true
alert(num1 == num2);//结果为false
alert(num1 != num2);//结果为true
alert(num1 === num2);//结果为false
}
</script>
</head>
<body>
</body>
</html>
3. JavaScrip 逻辑运算符 [ || && ! ]
|| ： 左右都为false是结果为false,其他都是true
&& ： 左右都为true是结果为true,其他都是false
! : 取反
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
alert(true || false);//结果为true
alert(false || true);//结果为true
alert(true || true);//结果为true
alert(false || false);//结果为false
alert(true && false);//结果为false
alert(false && true);//结果为false
alert(true && true);//结果为true
alert(false && false);//结果为false
}
</script>
</head>
<body>
</body>
</html>
4. JavaScrip条件运算符
格式: var res=(表达式)?value1:value2;
判断表达式的结果
1. true value1数据值赋值给res
2. false value2数据值赋值给res
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var xiao = (3 < 5) ? "小" : "大";
alert(xiao);
}
</script>
</head>
<body>
</body>
</html>
5. typeof 操作符
操作符 检测变量的数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num = 333;
var str = "hello";
var boool = false;
var nul = null;
var un;
var student = {
name: "xiaonuan"
};
var arr = ["苏小暖", "小暖"];
var fun = function test1() {
alert("函数");
}
alert(typeof num);//结果为number
alert(typeof str);//结果为string
alert(typeof bool);//结果为undefined
alert(typeof nul);//结果为object
alert(typeof un);//结果为undefined
alert(typeof student);//结果为object
alert(typeof arr);//结果为object
alert(typeof fun);//结果为function
</script>
</head>
<body>
</body>
</html>
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
