<!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 基础
猜你喜欢
转载自jaesonchen.iteye.com/blog/2287496
今日推荐
周排行