JavaScript基础
JavaScript基本概念
JavaScript简介
JavaScript是什么？
JavaScript是一种小型的、轻量级的、面向对象的、跨平台的客户端脚本语言。
-
JavaScript是嵌入到浏览器软件当中的去的，只要你的电脑有浏览器就可以执行JS程序了。
-
JavaScript是一种面向对象的程序语言。
-
在程序中，对象是由“属性”和“方法”构成。
-
在现实中，男女朋友就是一个“对象”。“东西”就是“对象”。一个“物体”就是“对象”。
-
“对象”有各种各样的特征(属性)，如：姓名、身高、体重、年龄等。
-
“对象”有很多方法。“人”这个对象，可以干什么？或者“人的行为”。如：去上班、去爬山、去旅行等。
注：JS中的对象只要会用就可以了，不需要我们自己去开发对象。
- 跨平台：JS程序可以在多种平台下运行，如：windows、linux、mac、IOS等。
- 客户端脚本程序：JS只能在客户端的浏览器来运行，不能在服务器端来运行。
- 浏览器是一个翻译器，可以翻译三种代码：HTML代码、CSS代码、JavaScript代码。
JavaScript能干什么？
- 表单验证：是JS最基本的功能。
- 动态HTML：可以实现一些动态的、重复的效果。
- 交互式：人机交互，通过键盘或鼠标，与网页中的元素进行交互。
JavaScript名称的由来？
JavaScript最初叫“LiveScript”，是网景公司(Netscape)公司开发，为自己的浏览器Navigator2.0开的客户端语言。
想借助Java的名气很快成长起来，因此改名为JavaScript。
如他们所愿，JavaScript最终确实火了起来
<script> </script>标记
JS代码也是嵌入到HTML文档中去的。
同一个网页中，可以有HTML代码、CSS代码、JavaScript代码。
通过<script></script>来引入JS程序代码
实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
window.alert("欢迎大家学习我们的JavaScript课程，一分耕耘一分收获，希望大家多多练习代码");
</script>
</head>
<body>
</body>
</html>
JS中的注释
顺便总结下页面中其它两种注释
- HTML的注释：<!—注释内容-->
- CSS注释：/* 注释 */
- JavaScript的注释：// 或 /* 多行注释 */
给上面的例子加上注释：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
//在当前窗口弹出以一个对话框
window.alert("欢迎大家学习我们的JavaScript课程，一分耕耘一分收获，希望大家多多练习代码")
</script>
</head>
<body>
</body>
</html>
常用的两个客户端输出方法
document.write(str)
- 描述：在网页的<body>标记，输出str的内容。
- document意思“文档”，就是整个网页了。
- document是一个文档对象，代表整个网页。
- write()是document对象的一个输出方法。
- “.”小数点：通过小数点(.)来调用对象的方法。
- str：表示要输出的内容。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
//在<body>中输出一句话
document.write("欢迎来到php.cn");
</script>
</head>
<body>
</body>
</html>
window.alert(str)
- 描述：在当前窗口中弹出一个警告对话框，str为对话框中显示的内容。
- window代表当前浏览器窗口，window是一个窗口对象。
- alert()方法：弹出一个对话框。
- str：表示要输出的内容。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
//打开网页时，弹出一个对话框
window.alert("欢迎来到php.cn");
</script>
</head>
<body>
</body>
</html>
基础语法
JavaScript变量概念引入
变量的概念
- 变量是变化的一个量。
- 变量可以看作是一个容纳数据的容器
- 变量可以看成是一个“未知数”。 x = 10
- 变量可以看成是一个“符号”“代号”。
- 变量一般是指程序的数据。
- 变量是在内存中存在和运行的。
- 变量是临时存在的数据。我们可以把计算机内存看成是一个一个的“小格子”。每个“小格子”里可以存储一个变量的名称和变量的值。
变量的声明
-
变量的声明，就相当于预订宾馆的“房间”。
-
语法格式：var 变量名 = 变量值
-
声明变量是使用系统关键字var来进行的。
-
举例：
-
var name; //声明一个变量
-
var name,like,age; //同时声明多个变量，多个变量间用英文下的逗号隔开
-
var name = “小明”; //一边声明一边赋值
变量的命名规则
-
变量名可以包含字母、数字、下划线。
-
变量名不能以数字开头，可以以字母或下划线开头。如：var _name;(正确的) var 3abc;(错误的)
-
变量名不能是系统关键字。如：var、switch、for、try、case、else、while等。
-
JS中的变量名是区分大小写的。如：name和Name是两个变量
-
JS中变量的名称一定要有意义。
-
如果变量名由多个单词构成的话，该如何表示呢？
-
“驼峰式命名”：第一个单词全小写，后面的每一个单词首字母大写。如：var getUserName
-
“下划线式命名”：所有单词全小写，中间用下划线连接。如：var get_user_name
给变量赋值
- 给变量赋值，就是往“空间”中装东西。
- 使用赋值号“＝”来给变量赋值。
语法：var 变量名 = 变量值
举例：var name = “小明”;
注：“＝”的理解
- 将“=”右边的“运算结果”赋给左边的变量名。
- 应该是“=”右边先运算，再把运算的结果，赋给左边的变量。
- “＝”左边只能是一个变量名，而不能是“运算表达式”。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<script>
//声明变量x，然后把8赋值给x
var x = 8;
//声明变量y，然后把x+80的结果赋值给y
var y = x+80;
//分别输出x，y
document.write(x);
document.write(y);
</script>
</head>
<body>
</body>
</html>
注：
-
JS中每一条语句，一般以英文下的分号(;)结束。这个分号不是必须的。为了向PHP兼容，最好加上分号。
-
运算符和变量，以及操作之间可以使用空格分开，这样的程序较容易阅读。
-
var a = 100 和 var a=100 是一样的
JavaScript中变量的数据类型
变量数据类型简介
变量是有数据类型的，这个类型来源于“变量的值”，换句话说：值是什么类型的，变量就是什么类型的。
JS中变量的类型有：
数值型、字符型、布尔型、undefined、null、array、object、function
这八种数据类型，又分为两大类：
- 基本数据类型：数值型、字符型、布尔型、未定义型、空型。很显著的特点：一个变量名只能存一个值。
举例：var a = 10;
-
复合数据类型：数组、对象、函数。显著的特点：一个变量名，可能存多个值。
举例：var arr = [10,20,30,40]
数值型：变量能进行数学运算的
数值型包括：整型、浮点型、NaN。
var a = 100;
var a = 0.9;
var a = 0;
注数：值型中还有一个很特殊的值NaN。NaN(not a number)不是一个数字。
当将其它数据类型，转成数值型，转不过去，但程序又不能报错，这时将返回一个NaN的值。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
//现在我们想让一个东西的长度变成原来的10倍
var length = "300m";
/*
一个字符串，是不能转换成有意义的数值的，只能转换成NaN
一个含纯数字的字符串，可以转成有意义的数值，大家可以修改length为纯数字的字符串，输出查看结果
*/
length = length*10;
document.write(length);
</script>
</head>
<body>
</body>
</html>
字符型：用单引号或双引号，引起来的一个字串。
var a = “这是一个字符串”;
var b = ‘这也是一个字符串’;
var c = “”;
单引号和双引号之间可以相互嵌套
- 单引号内只能嵌套双引号；
- 双引号内只能嵌套单引号。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
var name = "小明";
//加号为字符串连接符，我们之后会介绍
var str = "我的名字叫做'" +name+"'"
document.write(str)
</script>
</head>
<body>
</body>
</html>
如果想在双引号内，再嵌套双引号，里面的双引号，一定要进行转义(\”)。
JS中的转义字符是反斜杠（\）。
常用的转义字符有：\’、\”、\、\r、\n等。
也就是，当浏览器遇到反斜杠()时，将会对其后的一个字符进行特殊对待，当成普通字符来对待。所谓“普通”字符就是a、b、c、&等。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
var name = "小明";
//加号为字符串连接符，我们之后会介绍
var str = "我的名字叫做\"" +name+"\""
document.write(str)
</script>
</head>
<body>
</body>
</html>
布尔型
布尔型又称逻辑型。只有两个值：true(真)、false(假)。
布尔型只有两个状态。如：性别、婚否、灯的开关、是否列入黑名单等。
var a = true;
var b = false;
布尔型常用if条件判断语句中(条件判断语句我们在之后章节介绍，大家先观察结果)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
var x = 10;
var y = 110;
//x>y比较出来的结果是布尔值
if(x>y){
document.write(x+"比"+y+"大些");
}else{
document.write(y+"比"+x+"大些");
}
</script>
</head>
<body>
</body>
</html>
未定义型
当一个变量定义，但未赋值时，将返回未定义型，未定义型的值只有一个undefined。
当一个对象的属性不存在，也返回未定义型。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
var x;
document.write(x);
</script>
</head>
<body>
</body>
</html>
空型
当一个对象不存在时，将返回空型，空型的值只有一个null。
也可以理解为：是一个对象的占位符。
如果你想清除一个变量的值的话，可以给赋一个null的值。
var a = 100;
var a = null ; //将一个null赋给一个变量，用于清除它的值
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
var x = null;
document.write(x);
</script>
</head>
<body>
</body>
</html>
JavaScript变量的数据类型转换
变量的类型转换，一般情况是JS自动转换的，但也有些时候需要手动转换。
其它类型转成布尔型
首先介绍一个系统内置函数Boolean()，用于将数据强制转换成布尔型。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var x1 = "abc"; //true
var x2 = "110"; //true
var x3 = ""; //false
var x4 = 110; //true
var x5 = 0; //false
var x6 = NaN; //false
var x7 = undefined; //false
var x8 = null; //false
//验证我们的注释结果是否正确
//使用Boolean()全局函数，强制将变量转化成布尔型
var result = Boolean(x1);
//输出变量的类型和结果
document.write(x1+"转布尔型的转换结果为："+result);
</script>
</head>
<body>
</body>
</html>
其它类型转成字符型
这次我们使用String()函数将其它类型强制转换成字符型
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var x1 = true; //true
var x2 = false; //false
var x4 = 110; //110
var x5 = 0; //0
var x6 = NaN; //NaN
var x7 = undefined; //undefined
var x8 = null; //null
//验证我们的注释结果是否正确
//使用String()全局函数，强制将变量转化成字符型
var result = String(x1);
//输出变量的类型和结果
document.write(x1+"转字符型的转换结果为："+result);
</script>
</head>
<body>
</body>
</html>
其它类型转成数值型
这个我们使用Number()函数将其它类型强制转换成字符型
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var x1 = true; //1
var x2 = false; //0
var x3 = "120px"; //NaN
var x4 = 100; //100
var x5 = ""; //0
var x6 = undefined; //NaN
var x8 = null; //0
//验证我们的注释结果是否正确
//使用Number()全局函数，强制将变量转化成数值型
var result = Number(x1);
//输出变量的类型和结果
document.write(x1+"转数值型的转换结果为："+result);
</script>
</head>
<body>
</body>
</html>
JavaScript中变量的几个相关函数
判断变量的数据类型：
typeof()
- 使用typeof()，可以测试一个变量的类型。
- typeof()测试的结果是一个类型字符串。
typeof()的结果字符串有几种情况： “string” 、 “number” 、 “boolean” 、 “undefined” 、 “object” 、 “function”
另外：null、对象、数组这三种类型，都将返回 “object”。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var x1 = "abc"; //string
var x2 = 110; //number
var x3 = true; //boolean
var x4; //undefined
var x5 = null; //object
//使用typeof()判断变量的数据类型
var result = typeof(x5);
//输出变量的类型和结果
document.write(x5+"的数据类型为："+result);
</script>
</head>
<body>
</body>
</html>
从字符串中提取整数和浮点数函数
parseInt()系统函数、全局函数
功能：在一个字符串中，从左往右提取整型。如果遇到非整型的内容，则停止提取，并返回结果。
注：如果第一个字符就是非整数，则立即停止，并返回NaN。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
document.write(parseInt("500eps")+"<br/>");
document.write(parseInt("500.88")+"<br/>");
document.write(parseInt("a120px")+"<br/>");
</script>
</head>
<body>
</body>
</html>
parseFloat()系统函数、全局函数
功能：在一个字符串中，从左往右提取浮点型；遇到非浮点型内容，则停止提取，并返回结果。
注：如果第一个字符是非浮点型，则立即停止，并返回NaN。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
document.write(parseFloat("500eps")+"<br/>");
document.write(parseFloat("500.88")+"<br/>");
document.write(parseFloat("a120px")+"<br/>");
</script>
</head>
<body>
</body>
</html>
JavaScript中的运算符
要进行各种各样的运算，就要使用不同的运算符号。
算术运算符：+、-、*、/、%、++、--
A = 10 + 20;
A = 10 – 20;
A = 10 * 20;
A = 10 / 20;
（1）“%”取余运算符，两个数相除，取余数。
A = 10 % 3; // A = 1，如果余数不为0，则两个不能整除
A = 10 % 2; // A = 0，如果余数为0，则两个数能除尽
（2）“++”加1运算符、自加15
“++”可以作前缀(++i)，也可以作后缀(i++)。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var a = 1;
var b = 1;
document.write(++a);
document.write("<hr>")
document.write(b++);
</script>
</head>
<body>
</body>
</html>
观察上面例子的输出结果
- 当++a时，无论如何，都会先执行a=a+1,然后执行输出其它操作，如在页面输出、运算之类的
- 当b++时，会先执行其它操作，如输出、运算之类的，最后等这条语句结束时，执行a=a+1，然后这条语句结束
（3）“--”减1运算符，自减1
“--”可以作前缀(--i)，也可以作后缀(i--)。
“--”的例了与“++”例子一样，请大家自己尝试进行测试。
赋值运算符：=、+=、-=、*=、/=
“+=”先加后等。如：a += 10 //展开后 a = a + 10
“-=”先减后等。如：a -= 10 //展开后 a = a - 10
“*=”先乘后等。如：a *= 10 //展开后 a = a * 10
“/=”先除后等。如：a /= 10 //展开后 a = a / 10
字符串运算符：+、+=
字符串只能进行“连接”运算，不能进行其它运算。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var name = "php.cn";
var str = "欢迎来到"+name;
document.write(str);
</script>
</head>
<body>
</body>
</html>
比较运算符：>、<、>=、<=、、!=、=、!==
比较运算符的运算结果是布尔值(true或false)。
A = 10 > 20; // 结果A=false
A = 20>=20; // 结果A=true
A = 10%2 == 0; // 结果A=true
A = 10%2 == “0”; // 结果A=true
A = 10%3 != 0; // 结果A=true
A = 10%2 === “0”; //结果A=false
**注：
**
“=”是赋值号。如：a = 10
“==”等于。只比较两个变量的值，而不管类型。只要值一样，就返回true，否则返回false。
“===”全等于。既比较变量，也判断类型。如果类型和值都一样，返回true，否则返回false。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
//比较字符串数值和数值
var name1 = "520";
var name2 = 520;
document.write(name1==name2);
document.write("<hr>");
document.write(name1===name2)
</script>
</head>
<body>
</body>
</html>
逻辑运算符：&&、||、!
逻辑运算符的运算结果有两个true或false。
“&&”逻辑与(并且关系)。如果左右两个操作数都为true，则结果为true，否则，结果为false。
逻辑与，就是两个条件同时满足时，则结果为true。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
//给一个成绩
var score=61;
//判断成绩所属级别
if(score<60){
document.write("对不起，您没有及格");
}else if (score>=60&&score<70){
document.write("您刚好及格");
}
</script>
</head>
<body>
</body>
</html>
“||”逻辑或。左右两个条件，只要有一个满足，则返回true，否则，返回false。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var age=79;
if(age<10||age>60){
document.write("您好，您符合我们店的优惠条件，今天买东西全场5折");
}else if (age>=10&&age<=60){
document.write("不好意思，您不符合我们店的优惠条件，今天买东西不享受折扣");
}
</script>
</head>
<body>
</body>
</html>
“!”取反运算。!true = false 、 !false = true 、 !100 = false
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var a=true;
document.write(a);
document.write("<br/>");
document.write(!a);
</script>
</head>
<body>
</body>
</html>
三元运算符：?:
所谓“三元运算符”就是指三个操作数。
语法：条件表达式 ? 结果1 : 结果2
语法：操作数1 ? 操作数2 : 操作数3
含义：如果条件为true，则执行“结果1”的代码；如果条件为false，则执行“结果2”的代码。
其实：三元运算符，就是if else的变形形式。(if else我们下一章节学习)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script>
var a=10;
var b=20;
//判断a和b那个大，把大的那个赋值给max
var max=a>b?a:b;
document.write("最大值："+max);
</script>
</head>
<body>
</body>
</html>
JavaScript特殊运算符及运算符优先级
特殊运算符
- new运算符：创建一个对象。如：var today = new Date(); //创建一个当前系统日期时间对象
- delete运算符：删除数组的元素，或者对象的属性。
- typeof运算符：一元运算符，主要功能：判断变量的类型的。如：typeof name 或 typeof(name)
- 点运算符(.)：主要应用在对象中，通过点运算符(.)去调用属性或方法。如：window.alert(“OK”)
- [ ]中括号：主要用来访问数组元素的。如：arr[0] = 100; //找到下标为0的数组元素，并重新赋值
运算符优先级
注：在实际的使用中，如果分不清优先级的话，就直接使用我们小学学到的知识，想要哪个先运算的话，直接加括号包起来，简单粗暴效果好
