<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>basic.html</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
// <![CDATA[
//如果你需要在没有硬编码的window标识符下访问全局对象，你可以在任何层级的函数作用域中做如下操作：
var global = (function () {
return this;
})();
function show(str) {
$("#div").append($("<p></p>").text("" + str));
}
$(document).ready(function() {
//HTML 中的脚本必须位于 <script> 与 <\/script> 标签之间。
//脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
//JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
//提示：外部脚本不能包含 <script> 标签。
//请使用 document.write()仅仅向文档输出写内容。
//如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
//分号 ;
//分号用于分隔 JavaScript 语句。
//通常我们在每条可执行的语句结尾添加分号。
//在 JavaScript 中，用分号来结束语句是可选的。
//JavaScript 对大小写敏感。
//提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。
//提示：关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
//空格
//JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。
//对代码行进行折行
//您可以在文本字符串中使用反斜杠对代码行进行换行。
show("hello \
world");
//提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
//JavaScript 注释可用于提高代码的可读性。
//单行注释以 // 开头。可以在行末使用注释。
//多行注释以 /* 开始，以 */ 结尾。
//JavaScript 变量
//•变量必须以字母开头
//•变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
//•变量名称对大小写敏感（y 和 Y 是不同的变量）
//当您向变量分配文本值时，应该用双引号或单引号包围这个值。
//提示：一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
//变量声明之后，该变量是空的（它没有值）。未使用值来声明的变量，其值实际上是 undefined。
var carname;
show(carname); //undefined
//如果重新声明 JavaScript 变量，该变量的值不会丢失，在进入执行上下文时，会把所有的变量和函数声明置顶解析
carname = "bmw";
var carname;
show(carname); //bmw
//JavaScript 数据类型: String、Number、Boolean、Array、Object、Null、Undefined
//JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。
//JavaScript Array
var cars1 = new Array();
cars1[0] = "Audi";
cars1[1] = "BMW";
cars1[2] = "Volvo";
var cars2 = new Array("Audi","BMW","Volvo");
var cars3 = ["Audi","BMW","Volvo"];
show([cars1, cars2, cars3]);
//JavaScript Object
var person = {
id: 5566,
firstname: "Bill",
lastname: "Gates",
valueOf: function () {
return "id(" + this.id +") " + this.firstname + " " + this.lastname; }
};
show(person); //id(5566) Bill Gates
show([person.id, person["firstname"], person.lastname]);
//Undefined 和 Null
//Undefined 这个值表示变量不含有值。
//可以通过将变量的值设置为 null 来清空变量。
var car_undefined;
person = null;
show(car_undefined + " " + person); //undefined null
//JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
//JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
//在 JavaScript 中，对象是拥有属性和方法的数据。
//创建 JavaScript 对象
person = new Object();
person.firstname = "jaeson";
person.lastname = "chen";
person.id = 1001;
person.valueOf = function () {
return "id(" + this.id +") " + this.firstname + " " + this.lastname; };
show(person); //id(1001) jaeson chen
//JavaScript局部变量
//在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
//只要函数运行完毕，本地变量就会被删除（闭包是例外）。
//全局 JavaScript 变量
//在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
//JavaScript 变量的生存期
//JavaScript 变量的生命期从它们被声明的时间开始。
//局部变量会在函数运行以后被删除。
//全局变量会在页面关闭后被删除。
//向未声明的 JavaScript 变量来分配值
//如果您把值赋给尚未声明的变量，即使它在函数内。该变量将被自动作为全局对象的属性声明。
//比较运算符
// == 等于
// === 全等（值和类型）
// != 不等于
// 条件运算符 variablename = (condition) ? value1 : value2
//JavaScript If Else 语句
//if (condition1) statement1 else if (condition2) statement2 else statement3
//提示：使用代码块被认为是一种最佳的编程实践，即使要执行的代码只有一行。这样做可以使每个条件要执行什么一目了然。
//JavaScript Switch 语句
//switch 语句可以用于字符串
//使用 break 来阻止代码自动地向下一个 case 运行。
//switch (expression)
// case value1: statement;
// break;
// case value2: statement;
// break;
// ...
// case valuen: statement;
// break;
// default: statement;
//JavaScript 循环
//•for - 循环代码块一定的次数 for (initialization; expression; post-loop-expression) statement
//•for/in - 严格的迭代语句，用于枚举对象的属性 for (property in expression) statement
//•while - 当指定的条件为 true 时循环指定的代码块 while (expression) statement
//•do/while - 同样当指定的条件为 true 时循环指定的代码块 do {statement} while (expression);
var str = "";
for(var i = cars1.length; i--;) {
str += cars1[i] + ", ";
}
show(str);
str = "";
for(p in person) {
str += person[p] + ", ";
}
show(str);
//break 语句用于跳出循环。
//continue 用于跳过循环中的一个迭代。
//标签语句 给语句加标签，以便以后调用：labelname : statement
//break 语句和 continue 语句都可以与有标签的语句联合使用，返回代码中的特定位置。
//通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。
//break labelname;
//continue labelname;
var iNum = 0;
outermost:
for (var i=0; i<10; i++) {
for (var j=0; j<10; j++) {
if (i == 5 && j == 5) {
continue outermost;
}
iNum++;
}
}
show(iNum); //95
//JavaScript 错误 - Throw、Try 和 Catch
//try 语句测试代码块的错误。
//catch 语句处理错误。
//throw 语句创建自定义错误。
//JavaScript 抛出错误
//当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。
var x = "a";
try {
if(x == "")
throw "empty";
if(isNaN(x))
throw "not a number";
if(x > 10)
throw "too high";
if(x < 5)
throw "too low";
} catch (error) {
show("Error: " + error);
}
//JavaScript Number 对象
//JavaScript 只有一种数字类型。
//所有 JavaScript 数字均为 64 位
//JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字。
//JavaScript 中的所有数字都存储为根为 2的 64 位（8 byte），浮点数。
//精度
//整数（不使用小数点或指数计数法）最多为 15 位。
//小数的最大位数是 17，但是浮点运算并不总是 100% 准确
//八进制和十六进制
//如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。
var eight = 0377;
var sixteen = 0xFF;
show([eight, sixteen, eight + sixteen]);
//JavaScript Date（日期）对象
//注释：Date 对象自动使用当前的日期和时间作为其初始值。
global.startTime = function () {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
// add a zero in front of numbers<10
m = checkTime(m);
s = checkTime(s);
$("#clock").html(h + ":" + m + ":" + s);
t = setTimeout('startTime()', 500);
};
global.checkTime = function (i) {
if (i < 10) {
i = "0" + i;
}
return i;
};
startTime();
var myDate = new Date();
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
show("今天是" + weekday[myDate.getDay()]);
show([myDate.getFullYear(), myDate.getTime(), myDate]);
//JavaScript Array 对象
var arr = [1, 3, 10, 20, 2, 4, 0, 15];
//Array.sort(sortby) 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序
show(arr.sort(function (a, b) { return a - b; }));
//Array.join(seperator) 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
show(arr.join("."));
var arrAnother = [30, 31, 40];
//Array.concat(arr...) 连接两个或更多的数组，并返回结果。
show(arr.concat(arrAnother));
//Array.pop() 删除并返回数组的最后一个元素
//Array.push(element1,element2...) 向数组的末尾添加一个或更多元素，并返回新的长度。 它直接修改 arrayObject，而不是创建一个新的数组。
//Array.reverse() 颠倒数组中元素的顺序。
//Array.shift() 删除并返回数组的第一个元素
//Array.unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
//Array.slice(start,end) 从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组。
//JavaScript Boolean（逻辑）对象
//Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。
//注释：如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。
//否则，其值为 true（即使当自变量为字符串 "false" 时）！
show([new Boolean(), new Boolean(0), new Boolean(-0), new Boolean(null), new Boolean(""),
new Boolean(undefined), new Boolean(false), new Boolean(NaN),
new Boolean(1), new Boolean("jaeson"), new Boolean("false")]);
//JavaScript Math（算数）对象
//Math 对象用于执行数学任务。
//Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
//返回一个介于 0 和 10 之间的随机数：
show(Math.floor(Math.random()*11));
//JavaScript RegExp 对象
//RegExp 对象用于存储检索模式。
//直接量语法 /pattern/attributes
//创建 RegExp 对象的语法：new RegExp(pattern, attributes);
//参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
//参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。
//RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
//test() 方法检索字符串中的指定值。返回值是 true 或 false。
//exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
//compile() 方法用于改变 RegExp。
//方括号
//[abc] 查找方括号之间的任何字符。
//[^abc] 查找任何不在方括号之间的字符。
//[0-9] 查找任何从 0 至 9 的数字。
//[a-z] 查找任何从小写 a 到小写 z 的字符。
//[A-Z] 查找任何从大写 A 到大写 Z 的字符。
//(red|blue|green) 查找任何指定的选项。
//元字符
//. 查找单个字符，除了换行和行结束符。
//\w 查找单词字符。
//\W 查找非单词字符。
//\d 查找数字。
//\D 查找非数字字符。
//\s 查找空白字符。
//\S 查找非空白字符。
//\n 查找换行符。
//\r 查找回车符。
//\t 查找制表符。
//量词
//n+ 匹配任何包含至少一个 n 的字符串。
//n* 匹配任何包含零个或多个 n 的字符串。
//n? 匹配任何包含零个或一个 n 的字符串。
//n{X} 匹配包含 X 个 n 的序列的字符串。
//n{X,Y}匹配包含 X 或 Y 个 n 的序列的字符串。 y >= x
//n{X,} 匹配包含至少 X 个 n 的序列的字符串。
//n$ 匹配任何结尾为 n 的字符串。
//^n 匹配任何开头为 n 的字符串。
//支持正则表达式的 String 对象的方法
//search 检索与正则表达式相匹配的值。 返回第一个与 regexp 相匹配的子串的起始位置。注释：如果没有找到任何匹配的子串，则返回 -1。
//match 找到一个或多个正则表达式的匹配。返回存放匹配结果的数组。
//replace 替换与正则表达式匹配的子串。
//split 把字符串分割为字符串数组。
show("how are you".split(/\s+/));
var strReplace = "Welcome to Microsoft! ";
strReplace += "We are proud to announce that microsoft has ";
strReplace += "one of the largest Web Developers sites in the world.";
show(strReplace.replace(/Microsoft/gi, "baidu"));
show("zq chen".replace(/(\w+)\s+(\w+)/, "$2 $1"));
show("1 a2 3 4a afa55a".match(/\d+./g));
show(strReplace.search(/microsoft/i));
//JavaScript 全局对象
//顶层函数（全局函数）
//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码，eval中声明的变量会成为全局变量。
//isNaN() 函数用于检查其参数是否是非数字值。
//Number() 函数把对象的值转换为数字。如果对象的值无法转换为数字，那么 Number() 函数返回 NaN。
//parseFloat() 函数可解析一个字符串，并返回一个浮点数。如果参数字符串的第一个字符不能被解析成为数字，则 parseFloat 返回 NaN。
//parseInt() 函数可解析一个字符串，并返回一个整数。如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。
//encodeURI(URIstring) 函数可把字符串作为 URI 进行编码。返回URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。
//该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
//对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,#
show(encodeURI("http://www.w3school.com.cn/My first/"));
//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
show(decodeURI("http://www.w3school.com.cn/My%20first/"));
//escape(string) 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。返回已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。
//该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。
show(escape("Visit W3School!"));
show(escape("?!=()#%&"));
//unescape() 函数可对通过 escape() 编码的字符串进行解码。
//该函数的工作原理是这样的：通过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码。
show(unescape("%3F%21%3D%28%29%23%25%26"));
//encodeURIComponent(URIstring) 函数可把字符串作为 URI 组件进行编码。
//该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
//其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。
//提示：请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。
//因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。
show(encodeURIComponent("http://www.w3school.com.cn/My first/"));
//decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
show(decodeURIComponent("http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F"));
//在 JavaScript 核心语言中，全局对象的预定义属性都是不可枚举的，所有可以用 for/in 循环列出所有隐式或显式声明的全局变量
var variables = "";
for (var name in global) {
variables += name + ", ";
}
show(variables);
});
// ]]>
</script>
</head>
<body>
<script>
document.write("<p>My First JavaScript</p>");
</script>
<p id="clock">This is a paragraph.</p>
<div id="div"></div>
</body>
</html>
JavaScript核心技术与应用
本文深入探讨JavaScript语言的基础知识，包括变量、数据类型、控制结构、函数、数组、对象、错误处理、日期、数字、数学、正则表达式、全局对象等核心概念与实践应用。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
