javascript基础知识概念

  一、javascript数据类型

  1、5种数据类型 

   string,number,boolean,object,function

      2、3种对象类型

2.1、Object

2.2、Date

2.3、Array

  3、2 个不包含任何值的数据类型：

3.1、null

3.2、undefined

二、typeof 操作符

你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

请注意：

• NaN 的数据类型是 number
• 数组(Array)的数据类型是 object
• 日期(Date)的数据类型为 object
• null 的数据类型是 object
• 未定义变量的数据类型为 undefined

如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是 返回 Object。

三、自动类型转换

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

5 + null    // 返回 5        
"5" + null  // 返回"5null"  
"5" + 1     // 返回 "51"     
"5" - 1     // 返回 4     

四、JavaScript 正则表达式
 4.1、 实例：

var patt = /w3cschool/i

实例解析：

/w3cschool/i  是一个正则表达式。

w3cschool  是一个模式 (用于检索)。

i  是一个修饰符 (搜索不区分大小写)。

五、javascript函数定义

5.1、Function() 构造函数

实例

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

实际上，你不必使用构造函数。上面实例可以写成：

实例

var myFunction = function (a, b) {return a * b}

var x = myFunction(4, 3);

5.2、函数提升

在之前的教程中我们已经了解了 "hoisting(提升)"。

提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为。

提升（Hoisting）应用在变量的声明与函数的声明。

因此，函数可以在声明之前调用：

myFunction(5);

function myFunction(y) {
    return y * y;
}

使用表达式定义函数时无法提升

5.3、函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

但，JavaScript 函数描述为一个对象更加准确。

JavaScript 函数有 属性 和 方法。

arguments.length 属性返回函数调用过程接收到的参数个数：

实例

function myFunction(a, b) {
    return arguments.length;
}

5.4、JavaScript 函数参数

 Arguments 对象

JavaScript 函数有个内置的对象 arguments 对象.

argument 对象包含了函数调用的参数数组。

通过这种方式你可以很方便的找到最后一个参数的值：

实例

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
    var i, max = 0;
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
} 

或者创建一个函数用来统计所有数值的和：

实例

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
} 

通过值传递参数

在函数中调用的参数是函数的参数。

如果函数修改参数的值，将不会修改参数的初始值（在函数外定义）。

函数参数的改变不会影响函数外部的变量（局部变量）。

---

通过对象传递参数

在JavaScript中，可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部（全局变量）。

5.5、javascript函数调用

this 关键字

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

全局对象

当函数没有被自身的对象调用是， this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口（window 对象）。

该实例返回 this 的值是 window 对象:

 实例

function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象 

函数作为方法调用

在 JavaScript 中你可以将函数定义为对象的方法。

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和lastName), 及一个方法 (fullName):

实例

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe" 

作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

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

实例

function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 10, 2);      // 返回 20

实例

function myFunction(a, b) {
    return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);   // 返回 20

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。 

5.6、JavaScript HTML DOM EventListener

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

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

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

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

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

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

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

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

事件冒泡或事件捕获？

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

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

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

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

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

addEventListener(event, function, useCapture);

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

实例

document.getElementById("myDiv").addEventListener("click", myFunction, true);

 removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

实例

element.removeEventListener("mousemove", myFunction);

5.7、浏览器支持

实例

跨浏览器解决方法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

5.8、JavaScript 字符串（String） 对象

一个字符串用于存储一系列字符就像 "John Doe".

一个字符串可以使用单引号或双引号：

实例

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

你使用位置（索引）可以访问字符串中任何的字符：

实例

var character=carname[7];

内容匹配

match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

替换内容

replace() 方法在字符串中用某些字符替换另一些字符。

实例

str="Please visit Microsoft!"
var n=str.replace("Microsoft","w3cschool");

字符串大小写转换

字符串大小写转换使用函数 toUpperCase() / toLowerCase():

实例

var txt="Hello World!";       // String
var txt1=txt.toUpperCase();   // txt1 is txt converted to upper
var txt2=txt.toLowerCase();   // txt2 is txt converted to lower

字符串转为数组

字符串使用strong>split()函数转为数组:

实例

txt="a,b,c,d,e"   // String
txt.split(",");   // Split on commas
txt.split(" ");   // Split on spaces
txt.split("|");   // Split on pipe  

特殊字符

Javascript 中可以使用反斜线（\）插入特殊符号，如：撇号,引号等其他特殊符号。

查看如下 JavaScript 代码:

var txt="We are the so-called "Vikings" from the north.";
document.write(txt);

在JavaScript中，字符串的开始和停止使用单引号或双引号。这意味着，上面的字符串将被切成： We are the so-called

解决以上的问题可以使用反斜线来转义引号：

var txt="We are the so-called \"Vikings\" from the north.";
document.write(txt);

JavaScript将输出正确的文本字符串：We are the so-called "Vikings" from the north.

下表列出其他特殊字符，可以使用反斜线转义特殊字符：

代码输出\'单引号\n换行\r回车\ttab\b空格\f换页\\斜杆

字符串属性和方法

属性:

• length
• prototype
• constructor

方法:

• charAt()
• charCodeAt()
• concat()
• fromCharCode()
• indexOf()
• lastIndexOf()
• match()
• replace()
• search()
• slice()
• split()
• substr()
• substring()
• toLowerCase()
• toUpperCase()
• valueOf()

5.9、JavaScript Date（日期） 对象

实例化一个日期的一些例子：

var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)

设置日期

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

在下面的例子中，我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)：

var myDate=new Date();
myDate.setFullYear(2010,0,14);

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

注意: 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

两个日期比较

var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
  {
  alert("Today is before 14th January 2100");
  }
else
  {
  alert("Today is after 14th January 2100");
  }

5.10、JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM)

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header"); 

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 

其他 Window 方法

一些其他方法：

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸