`
z_xiaofei168
  • 浏览: 197891 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript基础知识之详解

 
阅读更多

JavaScript基础知识之详解

作者:张小飞 iteye  账号:z_xiaofei168

JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。JavaScript 是因特网上最流行的脚本语言。

在数百万张页面中,JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer MozillaFirefoxNetscape、和 Opera

下面给大家详细介绍下JavaScript的基础知识。

页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时,我们希望当页面载入时执行脚本,而另外的时候,我们则希望当用户触发事件时才执行脚本。所以把JavaScript放在什么地方,这是有讲究的。一般情况下,会放在head部分、body部分和外部文件。

1、    位于head部分的脚本

当脚本被调用时,或者当事件被触发时,脚本就会被执行。当你把脚本放置到 head 部分后,就可以确保在需要使用脚本之前,它已经被载入了。

<html>
<head>
<script type="text/javascript">....</script>
</head>
<body></body>
</html>

 

 

 

2、    位于body部分的脚本

在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后,它就会生成页面的内容。

<html>
<head></head>
<body>
<script type="text/javascript">....</script>
</body>
</html>

 

 

3、    位于外部文件的脚本

有时,你也许希望在若干个页面中运行 JavaScript,同时不在每个页面中写相同的脚本。为了达到这个目的,你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。然后把 .js 文件指定给 <script> 标签中的 "src" 属性,就可以使用这个外部文件了:

<html>
<head>
<script src="xxx.js">....</script>
</head>
<body></body>
</html>

 

注意:外部文件不能包含 <script> 标签。

 

 

 

    1、JavaScript注释和语句

 

// 多行注释以 /* 开头,以 */ 结尾。
/**
 * JavaScript基础知识之详解
 */
// 单行的注释以 // 开始。
// 在前台页面输出"Hello World!2013"
document.write("Hello World!2013");
document.write("<br/>");

 2、JavaScript变量

   

// 变量是用于存储信息的容器
x = 5;
y = 66.10;
// JavaScript 变量名称的规则:
// 变量对大小写敏感(y 和 Y 是两个不同的变量)
// 变量必须以字母或下划线开始
// 声明(创建) JavaScript 变量,在 JavaScript 中创建变量经常被称为“声明”变量。
// 您可以通过 var 语句来声明 JavaScript 变量:
var x;
var carname;
//如果您所赋值的变量还未进行过声明,该变量会自动声明。
x=5;
carname="Volvo"; 
// 与这些语句的效果相同:
var x=5;
var carname="Volvo"; 

   3、JavaScript运算符[算术运算符、 赋值运算符]

// 3.1 算术运算符用于执行变量与/或值之间的算术运算。给定 y=5,下面的表格解释了这些算术运算符:
/*
	运算符	描述	 			例子		 	结果 
	  + 	  加 				x=y+2 			x=7  
	  - 	减 				x=y-2 	 		x=3 
	  * 	乘 				x=y*2 	 		x=10 
	  / 	除 				x=y/2 	 		x=2.5 
	  % 	求系数 (保留整数)			x=y%2 			x=1 
	  ++ 	累加 				x=++y			x=6  
	  --    递减				x=--y			x=4  
 */
var b = 5;
a=b/2;
document.write(a); //2.5和java不同,如果是java就为2,取整数
document.write("<br/>");

 

 

//3.2 JavaScript 赋值运算符赋值.给定 x=10 和 y=5,下面的表格解释了赋值运算符:
/*
	运算符	 例子 	等价于 	结果 
	  = 	 x=y   		x=5 
	 += 	 x+=y 	x=x+y 	x=15 
	 -=	 x-=y 	x=x-y 	x=5 
	 *= 	 x*=y 	x=x*y 	x=50 
	 /= 	 x/=y 	x=x/y 	x=2 
	 %= 	 x%=y 	x=x%y 	x=0 
 */

 

   4、JavaScript 比较和逻辑运算符

// 比较和逻辑运算符用于测试 true 或 false。
// 4.1、比较运算符,给定 x=5,下面的表格解释了比较运算符
/*
	运算符 			描述 			例子 
	== 			等于 			x==8 为 false 
	=== 			全等(值和类型)   	x===5 为 true;x==="5" 为 false 
	!= 			不等于			x!=8 为 true 
	> 			大于 			x>8 为 false 
	< 			小于 			x<8 为 true 
	>= 			大于或等于 		x>=8 为 false 
	<= 			小于或等于 		x<=8 为 true 
 */
 var age = 15;
if (age<18) document.write("Too young");
document.write("<br/>");

// 4.2、逻辑运算符,给定 x=6 以及 y=3,下表解释了逻辑运算符
/**
	运算符 			描述 		例子 
	&& 			and 		(x < 10 && y > 1) 为 true 
	|| 			or 		(x==5 || y==5) 为 false 
	! 			not 		!(x==y) 为 true 
 */

   5、JavaScript If...Else 语句

/** 语法
 	if (条件1)
	{
		条件1成立时执行代码
	}
	else if (条件2)
	{
		条件2成立时执行代码
	}
	else
	{
		条件1和条件2均不成立时执行代码
	}
 */
var d=new Date()
var time=d.getHours()
if (time<10) 
	document.write("<b>Good morning</b>");
else if (time>=10 && time<16)
	document.write("<b>Good day</b>");
else
	document.write("<b>Hello World!</b>")
document.write("<br/>");

    6、JavaScript Switch 语句

 

 

 

/** 语法
 	switch(n)
    {
    case 1:
      执行代码块 1
      break
    case 2:
      执行代码块 2
      break
    default:
      如果n即不是1也不是2,则执行此代码
    }
    switch 后面的 (n) 可以是表达式,也可以(并通常)是变量。
    然后表达式中的值会与 case 中的数字作比较,如果与某个 case 相匹配,
    那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行
 */
theDay=d.getDay()
switch (theDay)
   {
   case 5:
     document.write("Finally Friday")
     break
   case 6:
     document.write("Super Saturday")
     break
   case 0:
     document.write("Sleepy Sunday")
     break
   default:
     document.write("I'm looking forward to this weekend!")
}
document.write("<br/>");

   7、JavaScript 消息框

// 6.1 警告框 
alert("警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作");
alert("警告框经常用于确保用户可以得到某些信息。\n 当警告框出现后,用户需要点击确定按钮才能继续进行操作");
// 6.2 确认框 
confirm("确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。");
// 6.3 提示框 
prompt("提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。","默认值");
document.write("<br/>");

   8、JavaScript 函数

 

 

 

// 不带参数的函数
function dismsg(){
	alert("Hello World!")
}
// 带参数的函数
function dismsg(manager){
	alert("Hello "+manager)
}
// 带参数的并由返回值函数
function prod(a,b){
	x=a*b
	return x
}

 

/**
 	JavaScript 变量的生存期
	当您在函数内声明了一个变量后,就只能在该函数中访问该变量。
	当退出该函数后,这个变量会被撤销。这种变量称为本地变量。
	您可以在不同的函数中使用名称相同的本地变量,这是因为只有声明过变量的函数能够识别其中的每个变量。
	
	如果您在函数之外声明了一个变量,则页面上的所有函数都可以访问该变量。
	这些变量的生存期从声明它们之后开始,在页面关闭时结束。
*/

    9、JavaScript For 循环

 

/** 语法
 	for (变量=开始值;变量<=结束值;变量=变量+步进值) 
	{
	    需执行的代码
	}
 */
document.write("JavaScript For 循环")
document.write("<br />")
for (i=0,n=3;i<n;i++)
{
	document.write("The number is " + i)
	document.write("<br />")
}

  10、JavaScript Break 和 Continue

    break 语句 使用 break 语句来终止循环。
continue 语句 使用 continue 语句来终止当前的循环,然后从下一个值继续执行。

  11、JavaScript For...In 声明

 

/** 语法
 	for (变量 in 对象)
	{
	    在此执行代码
	}
 */
document.write("<br />")
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
	document.write(mycars[x] + "<br />")
}

   12、JavaScript 事件

 

/**
 * 事件
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。
比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例:
	鼠标点击 
	页面或图像载入 
	鼠标悬浮于页面的某个热点之上 
	在表单中选取输入框 
	确认表单 
	键盘按键 
注意:事件通常与函数配合使用,当事件发生时函数才会执行。
如果需要更多有关 Javascript 可识别事件的知识,请阅读我们的 JavaScript 事件参考手册。

 */

   13、JavaScript Try...Catch 语句

 

   14、JavaScript Throw 声明
    throw 声明的作用是创建 exception(异常)。你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的。

   15、JavaScript onerror 事件

/** 语法
 	try
	{
	   //在此运行代码
	}
	catch(err)
	{
	   //在此处理错误
	}
 */
function message(){
	try{
		if(x>10) 
			throw "Err1"
		else if(x<0)
			throw "Err2"
	}catch(er){
		if(er=="Err1") 
			alert("Error! The value is too high")
		if(er == "Err2") 
			alert("Error! The value is too low") 
	}
}

  16、JavaScript 特殊字符

 

 

 

// 插入特殊字符    反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。
document.write ("You \& me are singing!") 
// 下面的表格列出了其余的特殊字符,这些特殊字符都可以使用反斜杠来添加到文本字符串中:
/**
 *  	代码	 输出 
	\' 	单引号 
	\" 	双引号 
	\& 	和号 
	\\ 	反斜杠 
	\n 	换行符 
	\r 	回车符 
	\t 	制表符 
	\b 	退格符 
	\f 	换页符 
 */

 

3
2
分享到:
评论
2 楼 z_xiaofei168 2013-08-02  
qq381032913 写道
lz这好多只是都在误导javascript新手啊

麻烦你给举个例子?
1 楼 qq381032913 2013-08-01  
lz这好多只是都在误导javascript新手啊

相关推荐

    javaScript基础知识详解

    javaScript基础知识详解,适合新手入门和开发人员快速查阅

    JavaScript基础知识

    JavaScript基础知识详解,JavaScript脚本程序

    JavaScript详解,第2版(JavaScript by Example,2nd Edition)

    JavaScript详解,第2版(JavaScript by Example,2nd Edition)。英文清晰PDF版。...书中采用了大量课堂实践示例,附以详尽的代码行解释和实际结果输出,将javascript 基础知识与高级技巧完美地展现出来。

    《JavaScript+DHTML语法与范例详解词典》源码

    《JavaScript+DHTML语法与范例详解词典》词条包含的主要内容有JavaScript的全局函数和基础对象的函数和属性;如何通过JavaScript DOM对象来动态地操作整个HTML文档,对HTML元素进行添加、移动、修改或删除;XMLDOM的...

    JavaScript详解(第2版),完整扫描版

    书中采用了大量课堂实践示例,附以详尽的代码行解释和实际结果输出,将JavaScript基础知识与高级技巧完美地展现出来。《JavaScript详解(第2版)》适合对Web开发和设计感兴趣的人员阅读,也可作为高校相关课程的教材。

    JavaScript详解,适合初学者

    基础入门,从基础知识讲起,逐步深入,帮助读者轻松掌握JavaScript;边学边练,依托网页实际开发,深入讲解JavaScript在网页中的各种应用;实例讲解,通过实例详细讲解每个知识点的实际应用。 本书共分为12章,分别...

    JavaScript运动原理基础知识详解

    主要介绍了JavaScript运动原理基础知识详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    javascript基础详解

    1、使用与需要了解JavaScript的初学者; 2、掌握一些基础知识; 3、学完之后看看懂一定量的代码; 4、持续更新;

    javascript中json基础知识详解

    虽然它的名字中有JavaScript但是它却不属于JavaScript,就像Java和JavaScript的关系一样。而且,并不是只有JavaScript才使用它,毕竟 JSON 只是一种数据格式。很多编程语言都有针对 JSON 的解析器和序列化器。 JSON是...

    JSP基础与案例开发详解 光盘part1

    内容推荐 本书以Java为平台,结合应用实例,强调“实用”性,系统、全面地介绍了JSP语言的基础知识及应用方向。 书中内容由浅入深、循序渐进地介绍了JSP的基本运用,其中包括网页布局与修饰、JDBC应用、Servlet应用...

    javascript详解

    详细介绍了javascript的基础知识,还有相关的实例,对初学者很有帮助哟

    JavaScript中的slice()方法使用详解

    主要介绍了JavaScript中的slice()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下

    JavaScript函数基础详解

    本文主要介绍了JavaScript函数的基础知识。具有很好的参考价值,下面跟着小编一起来看下吧

    JSP基础与案例开发详解 光盘part2

    内容推荐 本书以Java为平台,结合应用实例,强调“实用”性,系统、全面地介绍了JSP语言的基础知识及应用方向。 书中内容由浅入深、循序渐进地介绍了JSP的基本运用,其中包括网页布局与修饰、JDBC应用、Servlet应用...

    详解JavaScript基础知识(JSON、Function对象、原型、引用类型)

    主要介绍了JavaScript基础知识(JSON、Function对象、原型、引用类型)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

    WebPack基础知识详解

    1、什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些...b:类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript

    JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级...以下内容大部分是来自原文,我在原文的基础上加上一些代码注释和运行效果图以及少许的修改,方便大家理解! 一、变量的作用域  要理解闭包,

Global site tag (gtag.js) - Google Analytics