声明:本系列笔记为本人在w3school网站上学习Javascript的笔记,所有权利归该网站所有。
1 规则
1.1 标识和位置
HTML 中的脚本必须位于 <script> 与</script> 标签之间,脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
那些老旧的实例可能会在<script> 标签中使用type="text/javascript"。现在已经不必这样做了。JavaScript是所有现代浏览器以及 HTML5 中的默认脚本语言。
1.2 用法之一:直接插入<body>中的JavaScript
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1> Welcome to my website </h1>");
document.write("<p>But while she was still very young,oh,very…</p>");
</script>
</body>
</html>
1.3 用法之二:<head>中的 JavaScript 函数
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="How are you!";
}
</script>
</head>
<body>
<h1>Welcome to my website </h1>
<p id="demo"> But while she was still very young,oh,very…</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
document.getElementById(id)方法是 HTML DOM (文档对象模型)中定义的,DOM是用以访问 HTML 元素的正式 W3C 标准。
注意,大小写敏感,“onclick”的值中要有“()”。
1.4 用法之三:<body> 中的JavaScript 函数
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">AParagraph</p>
<button type="button"οnclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="How are you!";
}
</script>
</body>
</html>
把script放在h1标签的前面也是一样的。
1.5 用法之四:外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码,外部 JavaScript 文件的文件扩展名是 .js,如需使用外部文件,请在 <script> 标签的"src" 属性中设置该 .js 文件:
<!DOCTYPE html>
<html>
<body>
<scriptsrc="myScript.js"></script>
</body>
</html>
在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致,外部脚本不能包含 <script> 标签。
2 关于document.write
document.write() 仅仅向文档输出写内容,如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to my website</h1>
<p>But while she was very young ,oh,very…</p>
<script>
document.write("<p>There was once a child..</p>");
</script>
<button οnclick="myFunction()">Click here</button>
<script>
function myFunction()
{
document.write("See you later.");
}
</script>
</body>
</html>
注:加载完成的意思是已经执行到</html>,但不包含其中的事件方法。
3 语句
JavaScript语句可用分号分隔,也可不用。览器会按照语句顺序来执行每条Javascript语句,JavaScript 对大小写是敏感的。JavaScript会忽略多余的空格。
4 注释
与C#同。
5 变量
变量用于存储信息,变量必须以字母或$ 和 _开头,向变量分配文本值时,应该用双引号或单引号包围这个值,向变量赋的值是数值时,不要使用引号。
var x=2;var name="Bill Gates";var y; y="you";var name="Gates", age=56, job="CEO";
6 数据类型
包括字符串、数字、布尔、Null、Undefined。JavaScript 拥有动态类型,相同的变量可用作不同的类型。
6.1 字符串
可以在字符串中使用引号,只要不匹配包围字符串的引号即可:
var answer="He is called 'Bill'";
var answer='He is called "Bill"';
6.2 数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带,极大或极小的数字可以通过科学(指数)计数法来书写:
var y=123e5; // 12300000
var z=123e-5; // 0.00123
6.3 布尔
var x=true;
6.4 数组
三种定义方法:
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"];
注意 Array是类,用大写。可以看出在Javascript中,类大写,对象小写,方法小写,属性小写。
6.5 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"Bill",lastname:"Gates", id:5566};
注意与 var person["Tom","Jack","Max"”];的区别,后者是数组。
空格和折行无关紧要,声明可横跨多行:
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
6.6 Undefined 和 Null
Undefined 这个值表示未定义的变量或已定义但未赋值的变量的值。
可以通过将变量的值设置为 null 来清空变量。
null是一个对象,但是为空。因为是对象,所以 typeof null 返回 'object' 。null 是 JavaScript 保留关键字。null 参与数值运算时其值会自动转换为 0 ,因此,下列表达式计算后会得到正确的数值:
表达式:123 + null 结果值:123
表达式:123 * null 结果值:0
undefined是全局对象(window)的一个特殊属性,其值是未定义的。但typeof undefined 返回 'undefined' 。
虽然undefined是有特殊含义的,但它确实是一个属性,而且是全局对象(window)的属性。请看下面的代码:
alert('undefined' in window); //输出:true
varanObj = {};
alert('undefined' in anObj); //输出:false
从中可以看出,undefined是window对象的一个属性,但却不是anObj对象的一个属性。
注意:尽管undefined是有特殊含义的属性,但却不是JavaScript的保留关键字。
undefined参与任何数值计算时,其结果一定是NaN。
随便说一下,NaN是全局对象(window)的另一个特殊属性,Infinity也是。这些特殊属性都不是JavaScript的保留关键字。
6.7 声明变量类型
声明新变量时,可以使用关键词"new" 来声明其类型:
var name=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。
注意:类,以大写开头。
7 对象
JavaScript 中的所有事物都是对象:字符串、数字、数组,等等,在 JavaScript 中,对象是拥有属性和方法的数据。
字符串对象的属性有length等,方法有indexOf()、replace()、search()、toUpperCase()等。属性和方法均以小写开头。
8 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
8.1 JavaScript 函数结构
function functionname(var1,var2)
{
这里是要执行的代码
}
保留字 function 必须是小写的,函数名称开头字母一般小字,声明函数时,不指定参数的类型,不指定返回在值类型。
8.2 返回值
通过使用 return 语句可以实现函数将值返回调用它的地方。
function myFunction()
{
var x=5;
return x;
}
返回值是可选的:
function myFunction(a,b)
{
if (a>b)
{
return; //仅仅退出函数,没有返回值。
}
return a+b
}
8.3 局部 JavaScript 变量和全局 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。
只要函数运行完毕,局部变量就会被删除。
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它,全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值,该变量将被自动作为全局变量声明。如:
carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。
9 运算符
如果把数字与字符串相加,结果将成为字符串。
==和===区别,==指经自动转换到的值相等,===指值和类型都相等。Var x=”5”;x==5 为 true;x===5 为 false又Var x=5;x==”5” 为 true;x===”5”为false。
10 If...else if...else 语句
基本与C#同。