1 引言
为什么要学习JavaScript？
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
2 JS的使用
2.1 如何编写
- HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
- 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>
2.2 输出方式
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
<script>
window.alert(5 + 6);
</script>
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
<script>
document.write(Date());
</script>
该方法会直接添加一行
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
输出到控制台
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)
{
代码
}
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>
2.5 事件
以下是 HTML 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
//与前一行代码区别在于使用this调用的是该button
<button onclick="this.innerHTML=Date()">The time is?</button>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点我</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
一些常见的事件如下：
- 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"：
<script>
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
</script>
//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)
{
//在这里处理错误
}
例子
<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()">
</body>
</html>
- Throw 语句
例子
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
//抛给catch
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
3 函数
- 将函数存储到变量中,变量即可当做函数使用
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
//output = function (a, b) {return a * b}
//匿名函数
var x = function (a, b) {return a * b};
var z = x(4, 3);
- 自调用函数
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>
- 函数是对象
在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
//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"
- 使用构造函数调用函数
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName;
</script>
- 作为函数方法调用函数
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
- 闭包
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
这里需要注意的是，add变量代表的是一个方法function () {return counter += 1;}
