JavaScript第一讲
一、简介
HTML、CSS、JavaScript被称为“前端三剑客”，它们各司其职，共同完成网页前端的酷炫功能。其中，HTML负责一个页面的结构，CSS负责一个页面的样式，JavaScript则是负责与用户进行交互。JavaScript，简称js，是前端开发的一门语言。其作用是验证发往服务端的数据、增加Web互动、加强用户体验度。它有三个特点：交互性（信息的动态交互）、安全性（不可以直接访问本地硬盘）、跨平台性（浏览器就可以解析js）。
js由三大部分组成：1、核心：语法部分2、文档对象模型DOM 3、浏览器对象模型BOM。
二、JS语法
2.1准备工作
编写JavaScript脚本不需要任何特殊的软件，只需一个普通的文本编辑器和一个Web浏览器就足够了。用JavaScript编写的代码必须通过HTML/XHTML文档才能执行。
方法一：将JavaScript代码放到文档<head>标签中的<script>标签之间。
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Document</title>
6. <script type="text/javascript">
7. JavaScript goes here...
8. </script>
9. </head>
10. <body>
11. Mark-up goes here...
12. </body>
13. </html>
方法二：将JavaScript代码存为一个扩展名为.js的独立文件。典型做法是在文档的<head>部分放一个<script>标签，并把它的src属性指向该文件。
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Document</title>
6. <script src="file.js"></script>
7. </head>
8. <body>
9. Mark-up goes here...
10. </body>
11. </html>
最好的做法是把<script>标签放到HTML文档的最后，</body>标签之前，这样浏览器能够更快的加载页面：
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Document</title>
6. </head>
7. <body>
8. Mark-up goes here...
9. <script src="file.js"></script>
10. </body>
11. </html>
2.2语法
2.2.1语句
JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。
程序员只需将各条语句放在不同的行上就可以分隔它们，如下所示：
1. first statement
2. second statement
也可将其放在同一行上：
first statement;second statement;
但我们建议养成良好的编程习惯：
1. first statement;
2. second statement;
2.2.2注释
不是所有的语句都需要JavaScript解释器去解释并执行。有时需要在脚本中添加一些仅供自己参考或提醒自己的信息，这类语句称为注释。
注释分为两种：
① 单行注释：使用这种注释就必须在每个注释行的开头加上//。
错误写法：
1. //自我提醒：
2. 有注释是好事
正确写法：
1. //自我提醒：
2. //有注释是好事
② 多行注释:在注释内容的开头加上一个斜线和一个星号（/*），在注释内容的末尾加上一个星号和一个斜线（*/）。
正确写法：
1. /*自我提醒：
2. 有注释是好事*/
这种注释在需要插入大段注释时可以提高整个脚本的可读性。
2.2.3变量
什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。
1、定义变量使用关键字var,语法如下：
var 变量名
2、变量名可以任意取名，但要遵循命名规则:
①变量允许包含字母、数字、下划线(_)或者美元符($)，第一个字符不允许是数字，且不允许变量名中包含空格或标点符号，$除外。
②可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
③不能使用JavaScript关键词与JavaScript保留字。
3、变量要先声明再赋值，如下：
1. var mychar;
2. mychar="javascript";
3. var mynum = 6;
4、变量可以重复赋值，如下：
1. var mychar;
2. mychar="javascript";
3. mychar="hello";
注意:
①在JS中区分大小写，如变量mood与Mood是不一样的，表示是两个变量。
②变量虽然也可以不声明，直接使用，但不规范，提前声明是一种良好的编程习惯。
2.2.4数据类型
1、字符串：字符串由零个或多个字符构成。字符包括（但不限于）字母、数字、标点符号和空格。字符串必须包在引号里，单引号或双引号都可以。下面两条语句含义是完全相同的：
1. var mood='happy';
2. var mood="happy";
注意：选用引号时最好根据字符串中包含的字符来选择。如果字符串包含双引号，就把整个字符串放在单引号里；反之，则放在双引号里：
var mood="don't ask";
如果想在上面这条语句中使用单引号，就必须保证字幕“n”和“t”之间的单引号能被当成这个字符串的一部分。这种情况我们需对这个字符进行转义。在JavaScript里用反斜线对字符进行转义：
var mood='don\'t ask';
双引号亦然。作为一个好的编程习惯，不管选择双引号还是单引号，在整个脚本中保持一致，提高脚本的可读性。
2、数值：JavaScript允许使用带小数点的数值，并且允许任意位小数，这样的数称为浮点数：
var age=33.25;
也可使用负数：
var temperature=-20.333333;
3、布尔值：布尔数据只有两个可选值——true或false。假设需要这样一个变量：如果我正在睡觉，这个变量将存储一个值；如果我没有睡觉，这个变量将存储于另一个值，此时使用布尔数据类型显然是一个更好的选择：
var sleeping=true;
作为最基本的事实，所有的电子电路智能识别和使用布尔数据：电路中有电流或是没有电流。
注意：布尔值不是字符串，千万不要把布尔值用引号括起来。布尔值false和字符串“false”是两码事！
2.2.5数组
1、数组是指用一个变量表示一个值的集合，集合中的每个值都是这个数组的一个元素。
2、在JavaScript中，数组用关键字Array声明。在声明数组的同时可以指定数组初始元素个数，也就是这个数组的长度：
var team=Array(4);
但JavaScript不要求在声明数组时必须给出元素个数：
var team=Array();
3、向数组中添加元素的操作称为填充。在填充数组时，不仅需要给出 新元素的值，还需要给出新元素在数组中的存放位置，这个位置就是这个元素的下标。下标必须用方括号括起来：
1. team[0]="John";
2. team[1]="Ringo";
3. team[2]="Amy";
4. team[3]="Paul";
注意：下标是从0开始的！
有一种相对简单的方式：在声明数组的同时对它进行填充，这种方式要求用逗号把各个元素隔开：
var team=Array("John","Ringo","Amy","Paul");
甚至不用明确地表明我们是在创建数组，只需用一对方括号把各个元素的初始值括起来：
var team=["John","Ringo","Amy","Paul"];
数组元素不必非得是字符串，可以把多种数据类型混合在一起，可以是布尔值、数值，甚至可以是变量：
1. var lennon=["John",1940,false];
2. var beatles=[];
3. var name="Ringo";
4. beatles[0]=lennon;
5. beatles[1]=name;
4、关联数组：在为新元素给出下标时，不必局限于使用整数数字，也可以使用字符串。
1. var lennon=Array();
2. lennon["name"]="John";
3. lennon["year"]=1940;
4. lennon["living"]=false;
2.2.6对象
在JavaScript中，所有变量实际上都是某种类型的对象。比如，一个布尔值就是一个Boolean类型的对象，一个数组就是一个Array类型的对象。上面这个例子中实际是给lennon数组添加了name、year和living三个属性，可以建成如下的对象：
1. var lennon=Object();
2. lennon.name="John";
3. lennon.year=1940;
4. lennon.living=false;
创建对象使用Object关键字，并使用点号来获取属性。创建对象还有一种更简洁的语法，即花括号法：
var lennon={name:"John",year:1940,living:false};
用对象来代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们。这大大提高了脚本的可读性。
2.3操作
加法、减法、除法、乘法这些算术操作都是必须借助于相应的操作符才能完成，操作符是JavaScript为完成各种操作而定义的一些符号，包括=，+，-、/、*、++、--。
变量可包含操作：
var total=(1+4)*5;
也可以对变量进行操作：
1. var temp1=95;
2. var temp2=(temp1-32)/1.8;
加号（+）是比较特殊的操作符，它既可以用于字符串：
var message="I am feeling"+"happy";
像这样把多个字符串首尾相连在一起的操作叫做拼接。这种拼接也可以通过变量来完成：
1. var mood="happy";
2. var message="I am feeling"+mood;
甚至可以把数值和字符串拼接在一起：
1. var year=2005;
2. var message="The year is"+year;
注：如果把字符串和数值拼接在一起，其结果将是一个更长的字符串；但如果用同样的操作符来拼接两个数值，其结果将是那两个数值的算术和。
1. alert("10"+20);
2. alert(10+20);
另一个非常有用的操作符是+=（同时完成“加法和赋值”）
1. var year=2010;
2. var message="The year is";
3. message+=year;
4. alert(message);
2.4条件语句
2.4.1比较操作符
如大于（>）、小于（<）、大于或等于（>=）、小于或等于（<=）、等于（==）、不等于（！=）等。
注：这里的相等操作符==并不表示严格相等于
1. var a=false;
2. var b=" ";
3. if(a==b){ alert("a equal b"); }
运行会有对话框弹出，因为相等操作符==认为空字符串与false的含义相同。
要进行严格比较，就要使用另一种等号（===）。这个全等操作符会执行严格的比较，不仅比较值，而且会比较变量的类型。
1. var a=false;
2. var b=" ";
3. if(a===b){
4. alert("a equals b");
5. }
对于不等操作符！=也是如此。如果想比较严格不想等，就要用！==。
2.4.2逻辑操作符
1、逻辑与&&：操作只有在它的两个操作数都是true时才会是true。
1. var num=6;
2. if(num>=5&&num<=10)
3. {
4. alert("The number is in the right range.");
5. }
2、逻辑或||：操作只有在它的两个操作数都是false时才会是false。
1. if(num>10||num<5)
2. {
3. alert("The number is not in the right range.");
4. }
3、逻辑非！：如果那个逻辑操作数所返回的布尔值是true，“逻辑非”操作符将把它取反为false。
1. if(!(1>2))
2. {
3. alert("All is well with the world");
4. }
2.5循环语句
2.5.1while循环
while循环
1. var count=1;
2. while(count<11){
3. alert(count);
4. count++;
5. }
这一操作将重复执行10次，如果用Web浏览器来观察这段代码，你将会看到alert对话框闪现了10次。最后，count的数值为11。
do...while循环
对于do...while循环语句来说，花括号里的语句至少会被执行一次。
1. var count=1;
2. do{
3. alert(count);
4. count++;
5. }while(count<11);
同样，alert对话框会闪现10次。最后，count的数值为11。
2.5.2 for循环
相较于while循环，for循环的好处是循环控制结构更加清晰。
1. for(var count=1;count<11;count++){
2. alert(count);
3. }
for循环最常见的用途之一是对某个数组里的全体元素进行遍历处理。这需要array.length属性，数组的下标从0开始：
1. var team=Array("A","B","C","D","E");
2. for(var count=0;count<team.length;count++)
3. {
4. alert(team[count]);
5. }//运行这段代码，将看到4条alert消息
2.6函数
函数（function）是一组允许在你的代码里随时调用的语句。每个函数实际上是一个短小的脚本。
作为一种良好的编程习惯，应该先对函数做出定义再调用它们。
1. function shout(){
2. var team=Array("A","B","C","D","E");
3. for(var count=0;count<team.length;count++)
4. {
5. alert(team[count]);
6. }
7. }
8. shout();
在定义函数时，可以声明任意多个参数，只要用逗号把它们分隔开来：
1. function multiply(num1,num2){
2. var total=num1*num2;
3. alert(total);
4. }
5. multiply(10,2）；//此时，屏幕上会弹出一个显示乘法运算（20）的alert对话框。
函数不仅可以（以参数的形式）接收数据，也能够返回数据。
我们可以创建一个函数并让它返回一个数值、一个字符串、一个数组或一个布尔值。这时需要用到return语句：
1. function multiply(num1,num2){
2. var total=num1*num2;
3. return total;
4. }
5. alert(multiply(10,2))；//此时，屏幕上会弹出一个显示乘法运算（20）的alert对话框。
变量的作用域
1、全局变量可以在脚本的任何位置被引用。一旦你在某个脚本里声明了一个全局变量，就可以从这个脚本的任何位置—包括函数内部—引用它。全局变量的作用域是整个脚本。
2、局部变量只存在于声明它的那个函数内部，在那个函数的外部是无法引用它的。局部变量的作用域仅限于某个特定的函数。
3、为了防止全局变量和局部变量发生混淆，我们可以使用var关键字明确地为函数变量设定作用域。如果在某个函数中使用了var，那个变量就将被视为一个局部变量，它只存在于这个函数的上下文中；反之，如果没有使用var，那个变量就将被视为一个全局变量，如果脚本里已经存在一个与之同名的全局变量，这个函数就会改变那个全局变量的值。
1. function square(num){
2. total=num*num;
3. return total;
4. }
5. var total=50;
6. var number=square(20);
7. alert(total);
这段代码的本意是让square函数把它计算出来的平方值返回给变量number，但因为未把这个函数内部的total变量明确地声明为局部变量，这个变量把同样是total的那个全局变量的值也改变了。
1. function square(num){
2. var total=num*num;
3. return total;
4. }
5. var total=50;
6. var number=square(20);
7. alert(total);
现在，全局变量total变得安全了，无论怎么调用square函数也不会影响到它了。
三、互动方式
3.1 JavaScript-输出内容（document.write）
document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
第一种:输出内容用""括起，直接输出""号内的内容。
1. <script type="text/javascript">
2. document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
3. </script>
第二种:通过变量，输出内容
1. <script type="text/javascript">
2. var mystr="hello world!";
3. document.write(mystr); //直接写变量名，输出变量存储的内容。
4. </script>
第三种:输出多项内容，内容之间用+号连接。
1. <script type="text/javascript">
2. var mystr="hello";
3. document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
4. </script>
第四种:输出HTML标签，并起作用，标签使用""括起来。
1. <script type="text/javascript">
2. var mystr="hello";
3. document.write(mystr+"<br>");//输出hello后，输出一个换行符
4. document.write("JavaScript");
5. </script>
在写JS代码的时候，大家可以会发现这样现象:
document.write(" 1 2 3 ");
结果:1 2 3
无论在输出的内容中什么位置有多少个空格，显示的结果好像只有一个空格。
这是因为浏览器显示机制，对手动敲入的空格，将连续多个空格显示成1个空格。
解决方法:
1. 使用输出html标签 来解决
document.write(" "+"1"+" "+"23");
结果: 1 23
2. 使用CSS样式来解决
document.write("<spanstyle='white-space:pre;'>"+" 1 2 3 "+"</span>");
结果: 1 2 3
在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"
3.2 JavaScript-警告（alert 消息对话框）
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。
语法:alert(字符串或变量);
看下面的代码:
1. <script type="text/javascript">
2. var mynum = 30;
3. alert("hello!");
4. alert(mynum);
5. </script>
注:alert弹出消息对话框(包含一个确定按钮)。
结果:按顺序弹出消息框
注意:
1. 在点击对话框"确定"按钮前，不能进行任何其它操作。
2. 消息对话框通常可以用于调试程序。
3. alert输出内容，可以是字符串或变量，与document.write 相似。
3.3 JavaScript-确认（confirm 消息对话框）
confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
语法:confirm(str);
参数说明:
str：在消息对话框中要显示的文本。
返回值:Boolean值。
返回值：
当用户点击"确定"按钮时，返回true;当用户点击"取消"按钮时，返回false。通过返回值可以判断用户点击了什么按钮。
以下面代码为例，尝试运行：
1. <script type="text/javascript">
2. var mymessage=confirm("你喜欢JavaScript吗?");
3. if(mymessage==true)
4. { document.write("很好,加油!"); }
5. else
6. { document.write("JS功能强大，要学习噢!"); }
7. </script>
注: 消息对话框是排它的，即用户在点击对话框按钮前，不能进行任何其它操作。
3.4 JavaScript-提问（prompt 消息对话框）
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法:prompt(str1, str2);
参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
返回值:
1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null
以下面的代码为例：
1. var myname=prompt("请输入你的姓名:");
2. if(myname!=null)
3. { alert("你好"+myname); }
4. else
5. { alert("你好 my friend."); }
注:在用户点击对话框的按钮前，不能进行任何其它操作
3.5 JavaScript-打开新窗口（window.open）
open()方法可以查找一个已经存在或者新建的浏览器窗口。
语法：
window.open([URL],[窗口名称], [参数字符串])
参数说明:
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
例如:打开http://www.imooc.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：
1. <script type="text/javascript">
2. window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
3. </script>
注意：运行结果考虑浏览器兼容问题。
3.6 JavaScript-关闭窗口（window.close）
close()关闭窗口
用法：
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
例如:关闭新建的窗口。
1. <script type="text/javascript">
2. var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
3. mywin.close();
4. </script>
注意:上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口
HTML表单
HTML 表单用于搜集不同类型的用户输入
<form> 元素定义 HTML 表单
实例
<form>
.
form elements
.
</form>
1、HTML 表单元素
1.1 <input> 元素
最重要的表单元素是 <input> 元素。<input> 元素根据不同的 type 属性，可以变化为多种形态。
1.2 <select> 元素
<select> 元素定义下拉列表：
实例
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><option> 元素定义待选择的选项，列表通常会把首个选项显示为被选选项，您能够通过添加 selected 属性来定义预定义选项。
1.3 <textarea> 元素
<textarea> 元素定义多行输入字段（文本域）：实例
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>1.4 <button> 元素
<button> 元素定义可点击的按钮：实例
<button type="button" οnclick="alert('Hello World!')">Click Me!</button>1.5 HTML5 <datalist> 元素
<datalist> 元素为 <input> 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
实例
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>2、HTML 输入类型
2.1输入类型：text
<input type="text"> 定义供文本输入的单行输入字段：
实例
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
2.2 输入类型：password
<input type="password"> 定义密码字段：
实例
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form> 2.3输入类型：submit
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。在表单的 action 属性中规定表单处理程序（form-handler）：
实例
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 2.4输入类型: radio
<input type="radio"> 定义单选按钮。Radio buttons let a user select ONLY ONE of a limited number of choices:
实例
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 2.5输入类型: checkbox
<input type="checkbox"> 定义复选框。复选框允许用户在有限数量的选项中选择零个或多个选项。
实例
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form> 2.6输入类型: button
<input type="button> 定义按钮。
实例
<input type="button" οnclick="alert('Hello World!')" value="Click Me!">3、HTML 输入属性
3.1 value 属性
value 属性规定输入字段的初始值：
实例
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> 3.2 readonly 属性
readonly 属性规定输入字段为只读（不能修改）：
实例
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form> 3.3 disabled 属性
disabled 属性规定输入字段是禁用的，被禁用的元素是不可用和不可点击的，被禁用的元素不会被提交。
实例
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form> 3.4 size 属性
size 属性规定输入字段的尺寸（以字符计）：
实例
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> 3.5 maxlength 属性
maxlength 属性规定输入字段允许的最大长度：
实例
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> 注释：输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
