JavaScript深入浅出

JavaScript是什么？

JavaScript简称js是一种简单的基于对象和事件驱动并具有安全性能的脚本语言，也称ECMAScript，是一种基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言

JavaScript的的组成

ECMAScript：描述了该语言的语法和基本对象；
文档对象模型（Document Object Model，简称DOM））：描述处理网页内容的方法和接口
浏览器对象模型（Browser Object Model，简称BOM））：描述与浏览器进行交互的方法和接

JavaScript的基本特点

1、 JavaScript是一种解释性脚本语言（代码不进行预编译）。
2、主要用来向 HTML 页面添加交互行为。

3、可以直接嵌入 HTML 页面，但写成单独的js文件有利于结构和行为的分离。

4、嵌入动态文本于HTML页面

5、对浏览器事件作出响应

6、读写HTML元素

7、在数据被提交到服务器之前验证数据

8、检测访客的浏览器信息

9、控制cookies，包括创建和修改等

JavaScript的特性

不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。

而随着服务器的强壮，虽然现在的程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。

JavaScript的使用方式

Javascript加入网页有两种方法：直接方式和引用方式。

直接方式

这是最常用的方法，大部分含有Javascript的网页都采用这种方法，例如：

<html>
   <head>
    　<title>简单的JavaScript Hello World</title>
        <script type="text/javascript">
            document.write("Hello, 杨先生");   // 在浏览器视窗内直接显示
            alert("Hello, 杨先生!");            //  弹窗显示
            console.log("Hello, 杨先生!");      // 在控制台(console)里显示，需要先开启开发工具控制台
        </script>
    </head>
    <body>
　　HTML页面内容……
    </body>
</html>

在这个例子中，我们可看到一个新的标签：<script>……</script>，而<script language="Javascript"> 用来告诉浏览器这是用Javascript编写的程序，需要调动相应的解释程序进行解释。（w3c已经建议使用新的标准：<script type="application/javascript">)

注意：在非xhtml文档中插入script标签时，如果不是引用外部文件，应该在script内加上cdata声明，避免大于和小于运算符引起的浏览器解析错误

引用方式

如果已经存在一个Javascript源文件（通常以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：

<script src=“url” type="text/javascript"></script>

其中的Url就是程序文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个Javascript源代码文件“Script.js”，其内容如下：

document.write("这是Javascript！采用直接插入的方法！");

在网页中可以这样调用程序：

<script src="Script.js" type="text/javascript"></script>

也可以同时在导入文件时制定javascript的版本，例如：

<script src="Script.js" type="text/javascript; version=1.8"></script>

注意：凡是指定了src属性的script标签里的内容都会被忽略。

JavaScript注解

1、// 单行注释

2、/**/ 多行注释

3、JavaScript的后缀名是 .js

4、JS的执行顺序：那个script标签在上，就先执行哪个script标签

JavaScript数据类型

1、基本数据类型

字符串（String），数值（number），布尔型（boolean）

2、符合数据类型

数组（array），对象（object）

3、特殊数据类型

空（null）未定义（undefind指的是未定义数据类型）

注意：未定义数据类型将会得到结果undefind，那么未定义变量，程序将会报错

定义变量

1、在js中定义变量都是通过var来定义的，格式 var 变量名 = 值

<script  type="text/javascript">
var ite = "<select><option value='-1'>===请选择===</option>"
</script>

2、命名原则

a、变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号

b、变量命名长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型

c、尽量避免使用没有意义的命名

d、禁止使用JavaScript关键词、保留字全名

e、变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法

匈牙利命名法：

①、语法：

变量名 = 类型 + 对象描述

类型指变量的类型
对象描述指对象名字全称或名字的一部分，要求有明确含义，命名要容易记忆容易理解。

通过在变量名前面添加相应小写字母的符号标示作为前缀，标示出变量的类型，前缀后面是一个或多个单词组合，单词描述了变量的用途。如果是 jquery 对象，则用 $ 作为变量名的前缀。

②、示例：

var aName = [1, 2, 3];
var oBtn = document.getElementById('btn');
function fnName(){};
var iCount = 0;
var sName = "zhuyujia"

驼峰命名法

当变量名和函数名称是由二个或多个单字链接在一起，而构成的唯一识别字时，利用“驼峰式大小写”来表示，可以增加变量和函数的可读性。

①、语法

变量名或函数名是由一个或多个单词连结在一起，其中第一个单词以小写字母开始，后面的所有单词的首字母都采用大写字母，这样的变量名看上去就像骆驼峰一样此起彼伏，故得名。

②、示例

var myName = "zhuyujia";
var formSubmit = document.getElementById("submit");
function timeCount(){}

帕斯卡命名法

Pascal命名法（Pascal Case，巴斯卡命名法／帕斯卡命名法），电脑程序编写时的一套命名规则（惯例）。当变量名和函数名称是由二个或二个以上单字链接在一起，而构成的唯一识别字时，用以增加变量和函数的可读性

扫描二维码关注公众号，回复： 1436367 查看本文章

①、语法

和驼峰式命名法类似，只不过第一个单词的首字母需要大写

②、示例

var MyName = "zhuyujia";
var FormSubmit = document.getElementById("submit");
function TimeCount(){}

JavaScript运算符

1、特殊运算符

.	用于属性和方法的调用
[]	用于数组下标
,	多个变量或参数的间隔
new	创建新的对象
?:	条件运算符
typeof	用于返回数据类型

2、算术运算符

3、赋值运算符

4、字符串运算符

5、比较运算符

6、条件运算符

7、逻辑运算符

8、 JavaScript位运算符

控制语句

1、if语句，判断语句

if语句是基于条件成立才执行相应代码时使用的语句。

语法：

if(条件)
{

    条件成立时执行代码

注意：if小写，大写字母（IF）会出错！

图例：

<script type="text/javascript">
  var mycarrer = "HTML";
  if (mycarrer == "HTML")
  {
    document.write("你面试成功，欢迎加入公司。");
  }
</script>

2、if....else语句

if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。

语法：

if(条件)
{ 条件成立时执行的代码}
else
{条件不成立时执行的代码}

图例：

<script type="text/javascript">
  var mycarrer = "HTML"; //mycarrer变量存储技能
  if (mycarrer == "HTML")
    { document.write("你面试成功，欢迎加入公司。");  }
  else  //否则，技能不是HTML
    { document.write("你面试不成功，不能加入公司。");}
</script>

3、switch case语句

当有很多种选项的时候，switch比if else使用更方便

语法：

switch(表达式)
{
case值1:
  执行代码块 1
  break;
case值2:
  执行代码块 2
  break;
...
case值n:
  执行代码块 n
  break;
default:
  与 case值1 、 case值2...case值n 不同时执行的代码
}

语法说明：

Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。

图例：

4、for语句循环

语法：

for(初始化变量;循环条件;循环迭代)
{     
    循环语句 
}

图例：

<script type="text/javascript">
var num=1;
for (num=1;num<=6;num++)  //初始化值；循环条件；循环后条件值更新
{   document.write("取出第"+num+"个球<br />");
}
</script>

5、while语句

和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足

语法：

while(判断条件)
{
    循环语句
 }

图例：

<script type="text/javascript">
var num=0;  //初始化值
while (num<=6)   //条件判断
{
  document.write("取出第"+num+"个球<br />");
  num=num+1;  //条件值更新
}
</script>

6、do while语句

do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环

语法：

do
{
    循环语句
 }
while(判断条件)

图例：

<script type="text/javascript">
   num= 1;
   do
   {
     document.write("数值为:" +  num+"<br />");
     num++; //更新条件
   }
   while (num<=5)
</script>

7、for （in）语句

for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。

语法：

for (variable in object) {...}

variable: 在每次迭代时，将不同的属性名分配给变量。

object: 被迭代枚举其属性的对象。

图例：

var triangle = {a: 1, b: 2, c: 3};
function ColoredTriangle() {
  this.color = 'red';
}
ColoredTriangle.prototype = triangle;
var obj = new ColoredTriangle();
for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  } 
}
// Output:
// "obj.color = red"

8、break语句

在while、for、do...while、while循环中使用break语句退出当前循环，直接执行后面的代码。

语法：

for(初始条件;判断条件;循环后条件值更新)
{
  if(特殊情况)
  {break;}
  循环代码
}

图例：

9、continue语句

continue的作用是仅仅跳过本次循环，而整个循环体继续执行。

语法：

for(初始条件;判断条件;循环后条件值更新)
{
  if(特殊情况)
  { continue; }
 循环代码
}

图例：

10、with语句

with语句的作用是将代码的作用域设置到一个特定的作用域中

语法：

with （obj）{

    业务

}

图例：

function funcWith() {
  console.time("funcWith");
  var obj = {
    a: [1, 2, 3]
  };
  with (obj) {
    for (var i = 0; i < 100000; i++) {
      var v = a[0];
    }
  }
  console.timeEnd("funcWith");//88.260ms
}
funcWith();

JavaScript函数

1、函数格式

语法：

function 函数名（参数）{函数内容}

注意：①、参数之间使用，间隔而且这时候参数不需要定义参数类型

②、在js中不存在函数的重载，可以在函数定义的时候定义足够多的参数，但是在调用的时候需要传几个参数就可以传几个参数

③、函数不需要有返回值类型，如果需要返回直接在最后一行return即可

图例：

function changeCode() {
   // 获取时间戳，保证验证码的唯一性，防止缓存
   var t = new Date().getTime();
   $("#imageCode").attr("src", "<%=request.getContextPath()%>/validate/imageCode?t="+t);
}

2、全局变量和局部变量
在函数内部定义的变量叫做局部变量，在函数外部定义的变量叫做全局变量

在函数内部定义的变量在不写var的情况下默认为全局变量

JavaScript数组

1、数组定义方式

var 数组名 = new Array（””,””）

var 数组名 = new Array(数组的长度)；

var 数组名 = [元素1，元素2，，，，];

注意：如果()中写的是一个正整数的情况下，那么代表的是数组的长度

2、数组遍历

for (var 一个下标变量 in 数组名){

alert(数组名[下标变量])；

}

3、数组常用方法

concat()	输出数组中所有元素结合的完整字符串
join([字符])	《[]在这里代表可有可无》使用什么字符来连接数组中的元素形成新的字符串，不写的话代表使用默认（默认的是，）
reverse()	将数组反转后形成新的字符串
sort()	将数组进行从小到大排序
toString()	输出以字符串表示的所有元素《将数组对象转化成字符串》
slice(start, [end])	以数组的形式返回数组的一部分

内置对象

String对象

1、String类型定义两种方式

var 变量名 = “”; //类型为String

var 对象名 = new String(“”);//类型为object

2、常用属性

length：用于获得字符串的长度

在js中String字符串的length是属性，数组中length是属性，java中数组的length是属性，对于String来说，length是方法

我们一般使用toString（）方法将数值转化为字符串类型，或者我们可以在指定的数值后拼接一个空的字符串形成字符串

3、格式化文本的常用方法

big()	输出大字体
small()	输出小字体
bold()	输出粗黑字体
italics()	输出斜体字体
sub()	输出下标字
sup()	输出上标字
link(连接网址)	产生超链接
fontcolor(color)	指定使用某颜色
fontsize(size)	指定使用某字级大小，< FONT>//可选值为1-7，调试网页中的字体大小

4、document对象

①、根据ID获得指定标签的文本内容

var 变量名=document.getElementById(“”).innerHTML

如果要给该标签赋值的话，直接在后面写等号

document.getElementById(“”).innerHTML=“”

②、根据ID获取指定文本框的值

var 变量名 = document.getElementById(“”).value

如果重新赋值的话则使用

var 变量名 = document.getElementById(“”).value=“”

③、根据Name获取指定文本元素

var 变量名 = getElementsByName（"name"）

根据name获取指定文本的值

var 变量名 = getElementsByName（"name"）.value

④、根据class获取指定文本元素

var 变量名 = getElementsByClassName("class")

根据class获取指定文本的值

var 变量名 = getElementsByClassName("class").class

⑤、 document对象集合

⑥、document对象属性

⑦、document对象方法

5、String常用方法

indexOf(””,[起始值])	从起始值开始从左至右找到该字符所对应的下标，没有则返回-1，若省略起始值那么就是从0开始依次查找
lastIndexOf(" ",[起始值])	从起始值开始从右至左找到该字符所对应的下标，没有则返回-1，若省略起始值那么就是从最后开始依次查找
charAt(索引)	根据索引查找对应的字符，没有找返回空的。什么都没有
substring（索引A[,索引B]）	一个参数的时候是从索引A直接截取到字符串结束，两个参数时是从索引A截取到索引（B-1）的位置
substr(索引，长度)	从指定的索引位置截取多少个字符
toLowerCase()	将大写转化为小写
toUpperCase()	将小写转化为大写
split(“”)	使用指定字符将字符串进行分割
replace(“”,””)	将指定字符替换为自己想要的字符，（仅替换第一次出现的）
concat(str[,str])	将多个字符串拼接形成一个新的字符串

math对象

Math对象包含标准的数学常量和数学函数（方法）

调用方式：Math.函数名（），Math.属性

abs(数值)	绝对值
random()	随机数（取值范围0-1包含0不包含1）
round(数值)	四舍五入
ceil(数值)	上取整
floor(数值)	下取整
sqrt(数值)	输出平方根值
max(值1，值2，，，)	输出最大值
min(值1，值2，，，)	输出最小值
pow(底数，指数)	输出底数之指数次方值

1、Date对象

①、创建方式

var date = new Date();//获取当前的系统时间

var date1 = new Date(年，月，日)

var date2 = new Date(年，月，日，时，分，秒);//set的时候，放置的月份应该比实际月份少1

②、Date对象属性

③、Date对象方法

正则表达式

1、正则表达式的作用

规定或记录字符串以及文本的格式

2、预定义字符集

.	除换行符以外的任意字符
\w	字母，数字，下划线
\s	匹配任意的空白符（空格，以及Tab键）
\d	数字
\b	匹配单词的开始或结束
^	字符串的开始
$	字符串的结束

3、反（预定）义字符

\W	匹配除字母，数字，下划线以外的所有字符
\S	匹配所有的非空白符
\D	匹配除数字外的所有字符
\B	匹配不是单词的开始结束的任意位置
^	取反

4、字符的转义

.	转义为：\.
*	转义为:\*
\本身	转义为：\\

5、重复

*	代表0到多次
+	代表1到多次
?	0或1次
{n}	重复n次
{n,}	至少n次到多次
{n,m}	n到m次

注：1. [\u4e00-\u9fa5] 代表汉字

2. 判断该字符串是否符合正则表达式使用正则表达式的test函数

3．正则表达式的声明：var reg = /正则表达式/;

内建函数

1、number()

作用：将字符串类型转换为数值类型

用法：Number(字符串) 若该字符串无法转换成数值，那么将返回NaN(Not a Number);

2、isNaN()

作用：判断指定的字符串是不是数值

用法 :isNaN( 测试值 ) 结果为 true 或 false( 不是数值为true ，是数值则结果为false )

3、parseInt()

作用：将字符串转换为指定进制的整数（不写默认为 10 进制）

用法： parseInt(“ 字符串 ”[, 进制 ])

注意：如果中间遇到不合法的字符，返回已经解析过的数值，如果开始就遇到不合法字符，那么将返回NaN

4、 parseFloat()

作用：将字符串转换成浮点数

用法： parseFLoat( 字符串 )

注意：如果中间遇到不合法的字符，返回已经解析过的数值，如果开始就遇到不合法字符，那么将返回NaN

5、 eval()

作用：将指定的字符串作为代码在上下文环境中执行，并返回执行的结果

用法： eval( 字符串 )

注意：

如果参数是一个字符串的表达式，那么将返回表达式的值，如果参数不是表达式没有返回值则返回“undefined“；

参数字符串作为代码执行时和调用eval()的上下文相关的，即其中出现的变量或者函数调用必须是在eval()的上下文环境中可用的

常用事件

1、一般事件

onFocus()	获得焦点事件
onBlur()	失去焦点事件
onChange()	内容改变事件(仅用于下拉列表框)

2、页面事件

onLoad()	页面加载事件
onUnLoad()	页面关闭事件

3、鼠标事件

onclick()	鼠标单击事件
onmouseover()	鼠标上移事件
onmouseout()	鼠标移开事件
onmousemove()	鼠标移动事件
onmouseup()	鼠标抬起事件
onmousedown()	鼠标按下事件

4、键盘事件

onkeydown()	键按下事件
onkeyup()	键抬起事件
onkeypress()	键按下并抬起事件

5、表单事件

onsubmit()	表单提交事件（该标签写在form标签上，必须有返回值，返回值为true或false，返回false则提交不成功）针对submit按钮
onreset()	表单重置事件针对reset按钮

JS常用的Windows对象及方法

1、 Window对象

window对象代表浏览器所开启的视窗

window对象是Javascript中的默认对象，调用其属性或方法时可以省略” window” 这个前缀，直接调用。例如：alert(“hello”)

2、常用属性

status	浏览器状态栏信息用来设置状态栏的信息
document	window对象中的文档对象
location	window对象中的location对象
history	window对象中的history对象

3、 Window常用方法

alert()	提示警告信息用法：alert(“信息”)
confirm()	提示确认信息,用法：confirm(“信息”),根据返回值来判断点击的是确定还是取消，确定返回true，取消返回false
prompt()	提示输入信息，用法：prompt(“信息”,[初始默认值])，当点击确定时返回的是输入的值，点击取消时。返回的是" face="Calibri, sans-serif" color="inherit">null
open()	开启新浏览视窗，用法：视窗对象名称 =open (‘url‘ , ‘新视窗名’ , ‘规格‘ )，在被open的新浏览视窗中引用打开它的那个窗口对象用opener 通过opener调用父窗口的功能和信息也可以调用父窗口的函数
close()	关闭已开启的浏览视窗用法：视窗对象名称.close( )
setInterval()	从载入后,每隔指定的时间就执行一次某程序用法：temp = setInterval(“函数( )”,毫秒)
clearInterval( )	取消某setInterval ( )的设置用法：clearInterval(temp )
setTimeout( )	在载入后延迟指定时间后,去执行某程序(记住,次数是一次)，用法：timer = setTimeout("函数()",毫秒)
clearTimeout( )	取消某setTimeout ( )的设置用法：clearTimeout(timer)

模态窗口

1 、打开模态窗口 showModalDialog

只要当前窗口不关闭，则无法操作其他窗口

vReturn = showModalDialog(sURL [, vArgs] [,sFeatures])

参数说明：

sURL用来指定对话框要显示的文档的URL(；路径必须是相对路径)

vArgs用来向对话框传递参数。

sFeatures用来描述对话框的外观等信息。

注意：window.dialogArguments;//获得父级传的参数《从弹出框中获得父级传的参数》

2、打开非模态窗口showModelessDialog

3、模态对话框规格参数

dialogHeight	对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位
dialogWidth	对话框宽度
dialogLeft	离屏幕左的距离
dialogTop	离屏幕上的距离
center: {yes \| no \| 1 \| 0 }	窗口是否居中，默认yes，但仍可以指定高度和宽度
help: {yes \| no \| 1 \| 0 }	是否显示帮助按钮，默认yes
resizable: {yes \| no \| 1 \| 0 } ［ＩＥ５＋］	是否可被改变大小。默认no
status: {yes \| no \| 1 \| 0 } ［IE5+］	是否显示状态栏。默认为yes[ Modeless]或no[Modal]
scroll:{ yes \| no \| 1 \| 0 \| on \| off }	指明对话框是否显示滚动条。默认为yes
dialogHide:{ yes \| no \| 1 \| 0 \| on \| off }	在打印或者打印预览时对话框是否隐藏。默认为no
edge:{ sunken \| raised }	指明对话框的边框样式。默认为raised
unadorned:{ yes \| no \| 1 \| 0 \| on \| off }	默认为no

location对象

1、location属性

2、 location对象

reload()	重新载入目前的文件(刷新)，ocation.reload() 与history.go(0)效果等同
replace()	以指定的文件取代目前的文件，location.replace(“another.html”)页面替换，无法回到上一页面，与location.href=“another.html”效果等同
location.href	跳转到指定路径，可以返回上一页面

history对象

history.back()	等同于按浏览器的后退按钮
history.forward()	等同于按浏览器的前进按钮
history.go(索引)	history.go(1) 等同于history.forward() 前进 history.go(-1) 等同于history.back() 后退 history.go(0) 等同于location.reload()，location.href=location; 刷新

DOM操作

1、通过Dom操作获取相应的对象

getElementById(id)	通过id获取指定的对象
getElementsByName(name)	通过name获得所有name与指定name相同的数组
getElementsByTagName(标签名)	通过标签名获得所有指定标签组成的数组

2、通过Dom操作对表格进行操作

insertRow()	往表格中动态添加一行
insertCell()	给新创建的行添加内容
deleteRow()	删除当前行;可写为deleteRow(i)传的参数是索引
parentNode	查找当前节点的父节点
rowIndex	查找当前“tr”节点所在的行数
cells []	返回单元格集合的数组
window.opener	调用当前open窗口的父窗口

3、删除步骤

①、在表格中加入 ’ 操作 ’ 列，加入按钮用于进行删除操作，并且在添加的时候也加入操作（删除）单元格

②、在点击删除的时候，将当前对象传入函数中

③、首先通过传入的当前对象找到对应的行使用parentNode属性

④、然后通过当前行. rowIndex找到当前行所对应的索引

⑤、找到当前行所对应的表格，可以通过document.getElementById的方式，或者当前行. parentNode的方式

⑥、最后通过表格.deleteRow(行的索引)删除指定的行