JavaScript基础巩固

1，javaScript介绍

      JavaScript 是互联网上最流行的脚本语言，插入 HTML 页面后，可由所有的现代浏览器执行。

      JavaScript和Java的关系？它们的关系就像雷锋和雷峰塔的关系一样，没有一点关系，只是当时java比较火，为了蹭热度才取名为JavaScript。

2，javaScript基本用法

     HTML 中的脚本必须位于 标签之间。

     脚本可被放置在 HTML 页面的 和 部分中。

如下

 
 



    
我的 Web 页面
一个段落。
点击这里
    

3，JavaScript 数据类型

      字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

      3.1，字符串是存储字符（比如 "Bill Gates"）的变量。 字符串可以是引号中的任意文本。您可以使用单引号或双引号：

       var carname = "Volvo XC60";
       va rcarname = 'Volvo XC60';

       var answer = "It's alright";
       var answer = "He is called 'Johnny'";

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

     字符串常用的一些方法：

方法	描述
charAt()	返回指定索引位置的字符
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

       3.2，JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

        var x1=34.00;      //使用小数点来写
        varx2=34;         //不使用小数点来写

       3.3，布尔（逻辑）只能有两个值：true 或 false。

           varx=true;
           var y=false;

       3.4，数组

          下面的代码创建名为 cars 的数组：

           var cars=new Array();
            cars[0]="Saab";
            cars[1]="Volvo";
            cars[2]="BMW";

         或者 (condensed array):

          var cars=new Array("Saab","Volvo","BMW");

         或者 var cars=["Saab","Volvo","BMW"];

         3.5，对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

                var person={firstname:"John", lastname:"Doe", id:5566};

                对象属性有两种寻址方式：name=person.lastname; name=person["lastname"];

          3.6 ，Undefined和null

               Undefined 这个值表示变量不含有值。

              可以通过将变量的值设置为 null 来清空变量。

4，JavaScript事件

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

事件                描述

onchange        HTML 元素改变

onclick             用户点击 HTML 元素
onmouseover  用户在一个HTML元素上移动鼠标
onmouseout    用户从一个HTML元素上移开鼠标
onkeydown     用户按下键盘按键
onload              浏览器已完成页面的加载
onfocus           获取焦点时
onblur              失去焦点时     

更多可以参考：http://www.runoob.com/jsref/dom-obj-event.html

5，JavaScript类型转换

常见把数字转换为字符串:

全局方法 String() 可以将数字转换为字符串:

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回

" "+3 //  自动转换

把字符串转换为数字；全局方法 Number() 可以将字符串转换为数字：

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

6，一些容易出错的地方

在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号(==)。

if 条件语句返回 false (是我们预期的)因为 x 不等于 10:

var x =0;
if (x == 10)

if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true:

var x =0;
if (x = 10)

if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false:

var x =0;
if (x = 0)

比较运算符错误：在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true：

var x =10;
var y = "10";
if (x == y)

在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false：

var x =10;
var y = "10";
if (x === y)

这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较:

以下实例会执行 alert 弹窗：

var x =10;
switch(x) {
    case 10: alert("Hello");
}

以下实例由于类型不一致不会执行 alert 弹窗：

var x =10;
switch(x) {
    case "10": alert("Hello");
}
浮点类型数据运算需要注意：

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：

var x =0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.3
if (z == 0.3)            // 返回 false

为解决以上问题，可以用整数的乘除法来解决：

实例

var z = (x *10 + y *10) /10;      // z 的结果为 0.3

7，DOM文档对象模型（Document Object Model）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

如需做以上工作，要先找到要修改的元素，在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id:

var x=document.getElementById("intro");

还有通过签名：var y=x.getElementsByTagName("p");

7.1，如何改变 HTML 元素的内容 (innerHTML)

     一，改变输出流，在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

        例如：

     二，改变HTML内容，改 HTML 内容的最简单的方法时使用 innerHTML 属性。

         例如：

     三，改变HTML的属性

             如需改变 HTML 元素的属性，请使用这个语法：document.getElementById(id).attribute=新属性值；

        的属性：

7.2，改变HTML样式   

如需改变 HTML 元素的样式，请使用这个语法：

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

下面的例子会改变

元素的样式：

7.3，增加监听addEventListener()方法：

element.addEventListener( event, function, useCapture);

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

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

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

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

7.4，创建新的元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

实例：

这是一个段落。
这是另一个段落。

这段代码创建新的

元素：

var para=document.createElement("p");

如需向

元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是一个新段落。");

然后您必须向

元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

varelement=document.getElementById("div1");

以下代码在已存在的元素后添加新元素：

element.appendChild(para);

如要删除元素 与上面类似:parent.removeChild(child);

 

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

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);
8，计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

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

例如：显示当前时间

Stop time

然后你可以使用clearInterval() 方法来停止执行。

setTimeout() - 暂停指定的毫秒数后执行指定的代，如下：

var myVar;

function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}

function myStopFunction()
{
clearTimeout(myVar);
}

9，其他

变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。

"use strict" 的目的是指定代码在严格条件下执行。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。