1 引言
为什么要学习JavaScript？
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
2 JS的使用
2.1 如何编写
- HTML 中的脚本必须位于 标签之间。
- 脚本可被放置在 HTML 页面的 和 部分中。
.
.
.
.
2.2 输出方式
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
我的第一个 Web 页面
我的第一个段落
该方法会直接添加一行
输出到控制台
2.3变量
- 变量的定义
var pi=3.14;
var person="John Doe";
var answer='Yes I am!';
这里不需要对各种变量定义时进行区分。
注意未赋值的的变量值是undefined并不是Null
- 数组的定义
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];
- 对象的定义
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
对象属性的调用：
name=person.lastname;
name=person["lastname"];
2.4函数的使用
语法如下：
function myFunction(var1,var2)
{
代码
}
2.5 事件
以下是 HTML 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
//与前一行代码区别在于使用this调用的是该button
W3Cschool教程(w3cschool.cn)
点击按钮执行 displayDate() 函数.
一些常见的事件如下：
- onchange HTML 元素改变
- onclick 用户点击 HTML 元素
- onmouseover 用户在一个HTML元素上移动鼠标
- onmouseout 用户从一个HTML元素上移开鼠标
- onkeydown 用户按下键盘按键
- onload 浏览器已完成页面的加载
2.6 字符串
- 可使用单引号或者双引号
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
//使用转义字符
var answer = ''He is called\"Johnny\" '';
- 索引
var character = carname[7];
- 长度
var sln = txt.length;
2.7 类型转换
- typeof 操作符
返回变量的类型
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [ 1,2,3,4] // 返回 object
typeof {name: 'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (if myCar is not declared)
typeof null // 返回 object
- constructor 属性
返回所有 JavaScript 变量的构造函数。
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2, 3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function() {}.constructor // 返回函数 Function(){ [native code] }
使用该属性同样可以判断变量的类型
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
- 将数字转换为字符串
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String( 100+ 23) // 将数字表达式转换为字符串并返回
x.toString()
(123).toString()
(100 + 23).toString()
2.8 正则表达式的一些方法的使用
- search
//用于检索字符串中指定的子字符串，
//或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置。
var str = "Visit w3cschool";
var n = str.search(/w3cschool/i);
var n = str.search("w3cschool");
//output = 6
- replace
//用于在字符串中用一些字符替换另一
//些字符，或替换一个与正则表达式匹配的子字符串。
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "w3cschool");
var res = str.replace("Microsoft", "w3cschool");
// output = "Visit w3cschool!"
- test()
//用于检测一个字符串是否匹配某个模式，如果字符串
//中含有匹配的文本，则返回 true，否则返回 false。
//以下实例用于搜索字符串中的字符 "e"：
//output = true
- compile()
//方法用于改变 RegExp。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
//output = truefalse
2.9 异常处理
- try catch语法
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
例子
- Throw 语句
例子
My First JavaScript
Please input a number between 5 and 10:
3 函数
- 将函数存储到变量中,变量即可当做函数使用
//output = function (a, b) {return a * b}
//匿名函数
var x = function (a, b) {return a * b};
var z = x(4, 3);
- 自调用函数
- 函数是对象
在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。
//output = 2
- 函数显式参数与隐藏参数(arguments)
//parameter1，parameter2, parameter3为显式参数
functionName(parameter1, parameter2, parameter3) {
code to be executed
}
//1, 123, 500, 115, 44, 88作为隐式参数传递
//JavaScript 函数有个内置的对象 arguments 对象.
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i, max = arguments[0];
if(arguments.length < 2)return max;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
- 函数调用的四种方式
- 作为函数被调用
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) 返回 20
window.myFunction(10, 2); //同上行
- 作为对象的方法被调用
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
- 使用构造函数调用函数
- 作为函数方法调用函数
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
- 闭包
这里需要注意的是，add变量代表的是一个方法function () {return counter += 1;}