`
jaesonchen
  • 浏览: 311338 次
  • 来自: ...
社区版块
存档分类
最新评论

javascript 基础

 
阅读更多
<!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基础语法(ppt)

    JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)...

    JavaScript基础教程(第8版) 高清版 mobi

    《javascript基础教程(第8版)》循序渐进地讲述了javascript 及相关的css、dom、ajax、jquery 等技术。书中从javascript 语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并...

    JavaScript基础教程(pdf版)

    本教程旨在为初学者提供一个全面的JavaScript基础知识学习平台,帮助理解并掌握这种强大的脚本语言。 《JavaScript基础教程》首先会介绍JavaScript的历史背景和基本语法,包括变量、数据类型、操作符、流程控制...

    javascript基础语法总结.pdf

    这个资源是javaScript基础语法的总结,适合学完javascript基础语法的进行巩固、复习! 这...我是想免费给大家看的,这怎么还收费

    JavaScript基础知识例子

    总的来说,这个压缩包提供了一个全面的JavaScript基础知识教程,涵盖了数据类型、Object、内置对象和变量等核心概念,对于初学者或者需要巩固基础的开发者来说,是一份非常有价值的参考资料。通过学习这些内容,可以...

    JavaScript基础与案例开发详解/于坤, 周大庆编著

    《JavaScript基础与案例开发详解》根据JavaScript在各种类型的应用开发中(如B2B、B2C、C2C)的使用情况,有针对性地安排了丰富的案例,从基本的表格操作、表单操作,到构建浏览器端的富文本编辑器,再到实现像Windows...

    JavaScript基础知识总结

    JavaScript 基础教程 JavaScript 是一种广泛应用于网页和网络应用的轻量级编程语言,它主要用于增强网页的交互性和动态功能。JavaScript 能够直接嵌入 HTML 页面中,为设计师提供了一种无需深入编程就能实现动态...

    JavaScript基础与案例开发详解

    资源名称:Javascript基础与案例开发详解内容简介:《Java script基础与案例开发详解》根据Javascript在各种类型的应用开发中(如B2B、B2C、C2C)的使用情况,有针对性地安排了丰富的案例,从基本的...

    JavaScript基础与实践教程

    二、JavaScript基础语法 1. 变量:JavaScript中的变量使用var、let或const关键字声明。var适用于全局或函数作用域,let和const则属于块级作用域。const声明的变量不可重新赋值,但其引用的对象属性仍可修改。 2. ...

    javascript基础教程 从入门到精通

    javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript 基础 教程 入门 精通 javascript ...

    Javascript基础.xmind

    JavaScript基础三天总结

    JAVASCRIPT基础手册.rar

    本“JavaScript基础手册”旨在帮助初学者全面掌握JavaScript的核心概念和技术。 JavaScript语法基于ECMAScript规范,它包括变量、数据类型(如字符串、数字、布尔值、null、undefined、对象和数组)、运算符(算术...

    Javascript基础教程版

    这个"Javascript基础教程版"涵盖了JavaScript的核心概念,旨在为初学者提供一个清晰的学习路径。 在JavaScript的基础教程中,你将首先了解它的历史背景和应用领域,然后深入到语法层面。JavaScript语法基于...

    JavaScript基础大全 (1-4) 学习必备珍藏品

    这个名为"JavaScript基础大全 (1-4) 学习必备珍藏品"的资源显然是一个系列教程,包含了从初级到进阶的JavaScript基础知识。让我们深入探讨一下JavaScript的核心概念和技术。 1. **基础语法**:JavaScript是一种...

    javascript基础视频80集11

    本资源“javascript基础视频80集11”包含了80个视频教程,覆盖了JavaScript的基础概念到高级特性,适合初学者进行系统学习。 在JavaScript的基础阶段,通常会涉及以下知识点: 1. **变量与数据类型**:JavaScript...

    Javascript基础教程 文字版 代码可复制

    ### JavaScript基础教程核心知识点概述 #### 一、JavaScript简介与特性 - **JavaScript的作用**:JavaScript主要用于增强网页的交互性和动态效果,使网页能够实时响应用户的操作,提高用户体验。 - **减少HTML重复*...

    javascript基础视频80集8

    本套“JavaScript基础视频80集8”将深入浅出地介绍这一语言的基础知识,帮助初学者建立坚实的编程基础。 视频内容可能涵盖以下几个方面: 1. **变量与数据类型**:JavaScript支持多种数据类型,包括基本类型(如...

    JavaScript基础与实例教程

    本教程“JavaScript基础与实例教程”由中国电力出版社出版,旨在为初学者和有经验的开发者提供一个深入理解JavaScript核心概念和实践技巧的平台。 首先,JavaScript的核心概念包括变量、数据类型和操作符。变量是...

    JavaScript基础教程(.PDF)

    这个“JavaScript基础教程”PDF文件是初学者掌握JavaScript语法和概念的理想资源。下面,我们将深入探讨JavaScript的核心知识,包括变量、数据类型、控制流、函数、对象、数组、DOM操作以及事件处理等。 1. **变量...

Global site tag (gtag.js) - Google Analytics