JavaScript总结

Javascript的输出

JavaScript 可以通过不同的方式来输出数据：

·      使用 window.alert() 弹出警告框。

·      使用 document.write() 方法将内容写到 HTML 文档中。用来直接写到网页上，不需要在html标签内。

·      使用 innerHTML 写入到 HTML 元素。//用于修改标签如‘p’、‘h’等html标签内的内容。

·      使用 console.log() 写入到浏览器的控制台。

document.getElementById("demo") 使用 id 属性来查找 HTML 元素的 JavaScript 代码。

innerHTML = "段落已修改。" 用于修改元素的 HTML 内容(innerHTML)的 JavaScript代码。

Javascript的语法

固定值：

在编程语言中，一般固定值称为字面量，如 3.14。

数组字面量：[1, 3, 4, 5]

对象字面量：{firstName:"John", lastName:"Doe",age:50, eyeColor:"blue"}

函数字面量：functionmyFunction(a, b) { return a * b;}

变量：

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值【可以边定义边赋值】。

²  变量是一个名称。字面量是一个值。

注释：

用‘//’来注释

数据类型：

16+6+“john”，会输出 22john

注意：

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时，请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的。

JavaScript 使用 Unicode 字符集。

JavaScript 语句标识符

 

 

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

 

对代码行进行折行：

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("你好 \
世界!");

不过，您不能像这样折行：

document.write \ 
("你好世界!");

提示：

JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

JavaScript 数据类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

varx;              // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

数组：var cars=new Array();或者var cars=newArray("Saab","Volvo","BMW");

对象：var person={firstname:"John",lastname:"Doe", id:5566};例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。寻址方式，person.lastname和person[“lastname”]的输出结果都是“Doe”。

 

可以将变量赋值为null，来清空变量。

声明变量类型：var carname=new String;

²  注意：在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。可通过window.变量名，来访问全局数据变量，函数体内的变量，通过window.变量名，不可以访问，是undefined

JavaScript 事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

 

JavaScript 字符串

1、你可以使用索引位置来访问字符串中的每个字符：

实例

Var carname =“volvo xc60”;

var character = carname[7];

2、你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:

实例

var answer = "It'salright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

3、你也可以在字符串添加转义字符来使用引号：

实例

var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

4、可以使用内置属性 length 来计算字符串的长度：

5、通常， JavaScript 字符串是原始值，可以使用字符创建： varfirstName = "John"；但我们也可以使用 new 关键字将字符串定义为一个对象： varfirstName = new String("John")

²  不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用。

字符串属性

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

 

字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

 

JavaScript 比较和逻辑运算符

运算符	描述	比较	返回值
===	绝对等于（值和类型均相等）	x==="5"	false
		x===5	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true
		x!==5	false

 

²  可以使用 typeof 操作符来检测变量的数据类型。

²  可以设置为 null 来清空对象。

²  可以设置为 undefined 来清空对象。

JavaScript 类型转换

constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。

1、 将数字、布尔、日期转换为字符串

String() 可以将数字转换为字符串。如，String(123) ；Number 方法 toString() 也是有同样的效果，如，(123).toString()。

在 Date 方法 章节中，你可以查看更多关于日期转换为字符串的函数：

方法	描述
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、 将字符串转换为数字

（1）全局方法 Number() 可以将字符串转换为数字。

如，Number("3.14")    // 返回 3.14

Number("")       // 返回 0 
Number("")        // 返回 0
Number("99 88")   // 返回 NaN（NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

提示：请使用 isNaN() 全局函数来判断一个值是否是 NaN 值。）

（2）Operator + 可用于将变量转换为数字：

3、 将日期转换为数字

全局方法 Number() 可将日期转换为数字。

d = new Date();
Number(d)          // 返回 1404568027739

日期方法 getTime() 也有相同的效果。

d = new Date();
d.getTime()        // 返回1404568027739

4、自动转换类型

当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

以下输出结果不是你所期望的：

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1"  
"5" - 1     // 返回 4         "5" 转换为 5

JavaScript 正则表达式

1、在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

varstr = "Visit Runoob!"; varn =str.search(/Runoob/i);//返回6

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

varstr = document.getElementById("demo").innerHTML;

txt =str.replace(/microsoft/i,"Runoob");//替换microsoft为Runoob

2、正则表达式修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

 

4、 正则表达式模式

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找任何以 | 分隔的选项。

 

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

 

5、 使用RegExp对象

6、 使用test（）

test() 方法是一个正则表达式方法。test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

JavaScript 错误、调试

错误：try{//在这里运行代码}catch(err){//在这里处理错误}

调试：console.log() 方法、debugger关键字

²  Javascript允许先使用后声明变量和函数，但必须先复制才能有值，否则值为undefined。

²  "usestrict" 指令只运行出现在脚本或函数的开头。

²  只有return、没有加分号时，会自动加上分号。

JavaScript 函数

1、  JavaScript 函数有个内置的对象 arguments 对象。argument 对象包含了函数调用的参数数组。

2、  一般而言，在Javascript中，this指向函数执行时的当前对象。

3、  call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

JavaScript HTML DOM

1、 查找HTML元素

·      通过 id 找到 HTML 元素：varx=document.getElementById("intro");

·      通过标签名找到 HTML 元素：var y=x.getElementsByTagName("p");

·      通过类名找到 HTML 元素：var x=document.getElementsByClassName("intro");

2、 改变HTML属性

<imgid="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

3、 改变HTML样式

document.getElementById(id).style.property=新样式

4、 对事件做出反应

（1）<h1 οnclick="this.innerHTML='Ooops!'">点击文本!</h1>

（2）<button id="myBtn">点这里</button>

<script>document.getElementById("myBtn").onclick=function(){displayDate()};

（3）onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。

（4）onchange 事件（鼠标离开之后）：onchange 事件常结合对输入字段的验证来使用。

（5）onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

（6）onmousedown, onmouseup 以及onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

5、EventListener

（1）addEventListener（）方法

<button id="myBtn">点击</button>

<script>

document.getElementById("myBtn").addEventListener("click", displayDate);

functiondisplayDate() {

   document.getElementById("demo").innerHTML = Date();

}

</script>

l  addEventListener() 方法用于向指定元素添加事件句柄。

l  addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

l  你可以向一个元素添加多个事件句柄。

例：var x = document.getElementById("myBtn");

x.addEventListener("click", myFunction);

x.addEventListener("click", someOtherFunction);

l  你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

例：varx = document.getElementById("myBtn");

x.addEventListener("mouseover",myFunction);

x.addEventListener("click",mySecondFunction);

x.addEventListener("mouseout",myThirdFunction);

l  你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML元素。如： window 对象。

例：window.addEventListener("resize",function(){
    document.getElementById("demo").innerHTML= sometext;
});

l  addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

l  当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

l  你可以使用 removeEventListener() 方法来移除事件的监听。

 

²  注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

语法：

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如"click" 或"mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

第三个参数：

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的"click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

²  默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

（2）removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。

6、HTML DOM元素

(1)添加元素

<script>

varpara=document.createElement("p");//这段代码创建新的<p> 元素

varnode=document.createTextNode("这是一个新段落。");//这段代码创建了一个文本节点

para.appendChild(node);//向 <p> 元素追加这个文本节点

varelement=document.getElementById("div1");//找到一个已有的元素

element.appendChild(para);//在已存在的元素后添加新元素

</script>

（2）删除已有元素

<script>
varparent=document.getElementById("div1");
varchild=document.getElementById("p1");
parent.removeChild(child);
</script>

²  如果能够在不引用父元素的情况下删除某个元素，就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

JavaScript 浏览器BOM

1、window.location.assign("http://www.w3cschool.cc")//用来加载新的文档，可在出一个新的网页

2、history.back() - 与在浏览器点击后退按钮相同。history.forward() - 与在浏览器中点击向前按钮相同

3、window.navigator 对象包含有关访问者浏览器的信息。

<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script> 

5、 提示框：window.prompt("sometext","defaultvalue");

varperson=prompt("请输入你的名字","HarryPotter");

6、 计时器

·      setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

实例

每三秒弹出 "hello" ：

setInterval(function(){alert("Hello")},3000);

²  clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

·      setTimeout() - 暂停指定的毫秒数后执行指定的代码

varmyVar=setInterval(function(){myTimer()},1000);

²  clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

7、Cookie

（1）创建cookie

document.cookie="username=JohnDoe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

expires是告诉浏览器cookie的过期时间，path是告诉浏览器cookkie的路径。

（2）读取cookie

var x = document.cookie;

²  document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

（3）修改cookie

修改 cookie 类似于创建 cookie，如下所示：

document.cookie="username=JohnSmith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

（4）删除cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00GMT";

（5）cookie简述

document.cookie 属性看起来像一个普通的文本字符串，其实它不是。即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。

如果您设置了新的 cookie，旧的 cookie 不会被覆盖。新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：

（6）设置cookie的函数

function setCookie(cname,cvalue,exdays)

{

  var d =newDate();

  d.setTime(d.getTime()+(exdays*24*60*60*1000));

  var expires ="expires="+d.toGMTString();

  document.cookie = cname +"="+ cvalue +"; "+ expires;

}

（7）获取cookie值得函数

function getCookie(cname)

{

  var name = cname +"=";

  var ca = document.cookie.split(';');

  for(var i=0; i<ca.length; i++)

  {

    var c = ca[i].trim();

    if(c.indexOf(name)==0)return c.substring(name.length,c.length);

  }

  return"";

}

（8）检测cookie值得函数

function checkCookie()

{

  var username=getCookie("username");

  if(username!="")

  {

    alert("Welcome again "+ username);

  }

  else

  {

    username = prompt("Please enter your name:","");

    if(username!=""&& username!=null)

    {

      setCookie("username",username,365);

    }

  }

}