Javascript的介绍
一、为什么学习 JavaScript?
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门:
1、HTML 定义了网页的内容
2、CSS 描述了网页的布局
3、JavaScript 控制了网页的行为
二、javascript的是什么呢?
1、JavaScript 是脚本语言
2、JavaScript 是一种轻量级的编程语言。
3、JavaScript 是可插入 HTML 页面的编程代码。
4、JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
三、JavaScript 如何使用?
HTML 中的脚本必须位于 <script>
与 </script>
标签之间。
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body>
或 <head>
部分中,或者同时存在于两个部分中。
通常的做法是把函数放入 <head>
部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在 <script>
标签的 “src” 属性中设置该 .js 文件。
例:<script src="myScript.js"></script>
四、JavaScript 如何输出?
JavaScript 可以通过不同的方式来输出数据:
1、使用 window.alert() 弹出警告框。
2、使用 document.write() 方法将内容写到 HTML 文档中。
3、使用 innerHTML 写入到 HTML 元素。
4、使用 console.log() 写入到浏览器的控制台。
javascript的基础知识
一、JavaScript 字面量
1、数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e);
2、字符串(String)字面量 可以使用单引号或双引号;
3、数组(Array)字面量 定义一个数组。
二、JavaScript 变量
在编程语言中,变量用于存储数据值。
1、JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值。
三、JavaScript 操作符
JavaScript使用 算术运算符 来计算值。
四、JavaScript 语句
在 HTML 中,JavaScript 语句向浏览器发出的命令,语句是用分号分隔。
五、JavaScript 关键字用于标识要执行的操作。
和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。
var 关键字告诉浏览器创建一个新的变量。
以下是 JavaScript 中最重要的保留关键字(按字母顺序):
六、JavaScript 注释
不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后和/* */内的内容将会被浏览器忽略。
七、数据类型的概念
编程语言中,数据类型是一个非常重要的内容;
为了可以操作变量,了解数据类型的概念非常重要。
八、JavaScript 函数
JavaScript 语句可以写在函数内,函数可以重复引用;
引用一个函数 = 调用函数(执行函数内的语句)。
九、JavaScript 字母大小写
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
十、JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符,包含标点等字符。
十一、JavaScript对象
创建对象
使用关键字调用的函数,是构造函数constructor,构造函数是专门用来创建对象的函数 var obj = new boject();console.log(obj);
在对象中保存的值称为属性,向对象添加属性
语法:对象 . 属性名=属性值;obj.name="属性值"
读取对象中的属性值
语法:对象 . 属性名 console.log(obj.name);
然后对象读取的对象中没有属性,不会报错而是会返回undefined.
修改对象的属性值
语法:对象 . 属性名=新值
obj.name = "tom";
删除对象属性
语法:delete 对象.属性名
delete obj.name;
注:对象的属性名不强制遵守标识符的规范,但是尽量按照标识符的规范去写,特殊的属性名不能采用 . 的方法操作,而使用另外一种方式。
语法:对象[“属性名”] = 属性值
obj.["123"] = 456;
JS对象的属性值可以是任意的数据类型。
对象字面量
使用对象字面量,可以在创建对象是,直接指定对象中的属性。
语法:{属性名:属性值,属性名:属性值…}
var obj = {name:"小马", age:23};
注:对象字面量的属性名可以家引号,也可以不加,建议不加。如果要使用一些特殊的名字,则必须加引号。
十二、Javascript函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname()
{
// 执行代码
}
当调用该函数时,会执行函数内的代码。
可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
注:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。
在调用函数时,您可以向其传递值,这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数,由逗号 (,) 分隔:
myFunction(argument1,argument2)
当您声明函数时,请把参数作为变量来声明:
function myFunction(var1,var2)
{
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
有时,我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
function myFunction()
{
var x=5;
return x;//5
}
整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。
函数调用将被返回值取代:
var myVar=myFunction();
myVar 变量的值是 5,也就是函数 “myFunction()” 所返回的值。
即使不把它保存为变量,您也可以使用返回值:
document.getElementById("demo").innerHTML=myFunction();
demo" 元素的 innerHTML 将成为 5,也就是函数 “myFunction()” 所返回的值。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
在函数内部在声明一个函数
function fun3(){
function fun4(){
alert("这是另外一个函数");
}
}
return fun4;
//return fun4() 将fun4函数作为返回值
a = fun3();
fun3()(); //返回fun4
立即执行函数
函数对象()
函数定义完,立即被调用,这种函数叫做立即执行函数,而立即执行函数往往只会执行一次
(function(){
alert("我是一个立即执行函数");
})();//我是一个立即执行函数
注:javascript函数需要return作为返回值, 如果return语句后不跟任何值相当于返回一个undefined,函数中不写return,则也会返回undefined,并且return后可以跟任意类型的值
十三、javascript作用域
javascript作用域有两种,分别是局部作用域和全局作用域。
avaScript 局部作用域
变量在函数内声明,变量为局部作用域。
局部变量:只能在函数内部访问。
// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
JavaScript 全局变量
变量在函数外定义,即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
JavaScript 变量生命周期
JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。
HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
//此处可使用 window.carName
function myFunction() {
carName = "Volvo";
}
十四、javascript - this关键字
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
在方法中,this 表示该方法所属的对象。
如果单独使用,this 表示全局对象。
在函数中,this 表示全局对象。
在函数中,在严格模式下,this 是未定义的(undefined)。
在事件中,this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
方法中的 this
在对象方法中, this 指向调用它所在方法的对象。
在上面一个实例中,this 表示 person 对象。
fullName 方法所属的对象就是 person。
fullName : function() {
return this.firstName + " " + this.lastName;
}
单独使用 this
单独使用 this,则它指向全局(Global)对象。
在浏览器中,window 就是该全局对象为 [object Window]:
var x = this;
严格模式下,如果单独使用,this 也是指向全局(Global)对象。
"use strict";
var x = this;
函数中使用 this(默认)
在函数中,函数的所属者默认绑定到 this 上。
在浏览器中,window 就是该全局对象为 [object Window]:
function myFunction() {
return this; //[object Window]
}
函数中使用 this(严格模式)
严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined。
"use strict";
function myFunction() {
return this;
}
事件中的 this
在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素:
<button onclick="this.style.display='none'">
点我后我就消失了
</button>
对象方法中绑定
下面实例中,this 是 person 对象,person 对象是函数的所有者:
var person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
注: this.firstName 表示 this (person) 对象的 firstName 属性。
显式函数绑定
在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。
在下面实例中,当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法:
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // 返回 "John Doe"