javascript基础知识概念
2015-06-25 14:42
639 查看
一、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)的数据类型为 objectnull 的数据类型是 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 x = myFunction(4, 3);
实际上,你不必使用构造函数。上面实例可以写成:
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 属性返回函数调用过程接收到的参数个数:
return arguments.length;
}
5.4、JavaScript 函数参数
argument 对象包含了函数调用的参数数组。
通过这种方式你可以很方便的找到最后一个参数的值:
function findMax() {
var i, max = 0;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
或者创建一个函数用来统计所有数值的和:
function sumAll() {
var i, sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
如果函数修改参数的值,将不会修改参数的初始值(在函数外定义)。
函数参数的改变不会影响函数外部的变量(局部变量)。
因此我们在函数内部修改对象的属性就会修改其初始的值。
修改对象属性可作用于函数外部(全局变量)。
5.5、javascript函数调用
在 web 浏览器中全局对象是浏览器窗口(window 对象)。
该实例返回 this 的值是 window 对象:
实例
function myFunction() {
return this;
}
myFunction(); // 返回 window 对象
以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和lastName), 及一个方法 (fullName):
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。
return a * b;
}
myFunction.call(myObject, 10, 2); // 返回 20
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 时, 事件使用捕获传递。
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 n=str.replace("Microsoft","w3cschool");
var txt1=txt.toUpperCase(); // txt1 is txt converted to upper
var txt2=txt.toLowerCase(); // txt2 is txt converted to lower
txt.split(","); // Split on commas
txt.split(" "); // Split on spaces
txt.split("|"); // Split on pipe
查看如下 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.
下表列出其他特殊字符,可以使用反斜线转义特殊字符:
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);
注意: 如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。
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 - 浏览器对象模型
由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
与此相同:
document.getElementById("header");
对于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 方案(涵盖所有浏览器):
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
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)的数据类型为 objectnull 的数据类型是 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!"; // Stringvar 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" // Stringtxt.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 | 回车 |
\t | tab |
\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() - 调整当前窗口的尺寸
相关文章推荐
- JS基础
- Js基础学习之-- 利用GET方法实现ajax请求
- Js基础学习之-- 利用正则表达式验证 模拟注册界面
- js基础学习之--DOM总结
- js基础学习之--BOM基础知识总结
- 解析处理常用json数据总结
- JavaScript:exec()方法的用法及说明
- Javascript类继承-机制-代码Demo【原创】
- 直接读取服务器的一个json 文件
- 从零开始构建实现一个JavaScript模块化加载器
- 简单的jsTree运用
- 动态调试JS代码
- js 监听整个页面的回车事件
- js正则对象RegExp的$1...$9 属性
- javascript eval和JSON之间的联系
- AJAX 跨域请求 - JSONP获取JSON数据
- JavaScript读取XML
- js 打印网页指定内容
- javascript实现跨域的方法汇总
- JS日期时间选择器