JavaScript基础知识之详解
作者:张小飞 iteye 账号:z_xiaofei168
JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。JavaScript 是因特网上最流行的脚本语言。
在数百万张页面中,JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 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 换页符 */
相关推荐
javaScript基础知识详解,适合新手入门和开发人员快速查阅
### JavaScript基础知识 #### JavaScript简介 JavaScript是一种轻量级的编程语言,最初设计是为了在网页上实现交互式功能。它是Web开发中不可或缺的一部分,能够创建丰富的用户界面和动态网页。 #### JavaScript...
适合人群:适合前端开发初学者及具有一定HTML和CSS基础知识的技术爱好者,尤其是希望通过学习JavaScript提升网站交互性能的学生或从业者。 使用场景及目标:本指南旨在帮助读者快速掌握JavaScript的基本技能,从而...
一、JavaScript基础 在讨论特效之前,我们需要了解JavaScript的基础。JavaScript语法与Java类似,但它是解释执行的,主要运行在浏览器环境中。它包括变量声明、数据类型(如字符串、数字、布尔值、对象等)、操作符...
### JavaScript基础语法全解 ...以上内容概述了《JavaScript基础语法全解》中关于变量和条件语句的基础知识。通过对这些概念的理解,初学者可以更好地掌握JavaScript的核心语法,为进一步学习打下坚实的基础。
光盘”是一个全面的指南,涵盖了从JavaScript基础到高级特性的广泛内容,是初学者入门和进阶开发者提升技能的理想资源。通过学习光盘中的源文件,读者将有机会实践所学知识,加深理解,并提升实际开发能力。无论你是...
### JavaScript编程基础知识详解 #### 一、JavaScript代码的放置与引入方式 1. **JavaScript代码应置于`<script></script>`标签内** - JavaScript 代码通常被包含在 HTML 文件中的 `<script>` 标签之间。 - 示例...
《JavaScript+DHTML语法与范例详解词典》词条包含的主要内容有JavaScript的全局函数和基础对象的函数和属性;如何通过JavaScript DOM对象来动态地操作整个HTML文档,对HTML元素进行添加、移动、修改或删除;XMLDOM的...
书中采用了大量课堂实践示例,附以详尽的代码行解释和实际结果输出,将JavaScript基础知识与高级技巧完美地展现出来。《JavaScript详解(第2版)》适合对Web开发和设计感兴趣的人员阅读,也可作为高校相关课程的教材。
这本书共分为21章,涵盖了从基础到高级的JavaScript知识,包括但不限于变量、数据类型、控制结构、函数、对象、数组、DOM操作、事件处理、AJAX以及现代JavaScript特性如ES6及以上版本的新特性。 1. **基础篇**: -...
具体涵盖了变量声明、数据类型、运算符、控制结构等基础知识,同时讲解了函数的多种定义方式及其特性,对象和数组的操作方法,类和继承的使用,以及DOM操作的基本技巧和异步编程的各种方式,如回调函数、Promise和...
以下是对这三个重要知识点的详细讲解。 **HTML(超文本标记语言)** HTML是网页开发的核心,用于定义页面的结构和内容。它由一系列标签组成,每个标签都有特定的意义。例如,`<html>`是整个文档的根元素,`<head>`...
1. JavaScript基础:包括变量、数据类型、控制结构、函数、对象等核心概念,以及原型链、闭包等高级特性。 2. DOM操作:讲解如何通过JavaScript操作文档对象模型,实现动态修改网页内容。 3. AJAX与JSON:介绍异步...
### JavaScript基础知识点详解 #### 一、脚本语言概述 **1.1 什么是脚本语言** 脚本语言(Scripting Language)是一种轻量级的编程语言,它使用ASCII字符编写,无需像C语言或Java那样经过编译过程转换为二进制...
### 一、JavaScript基础 #### 1.1 JavaScript概述 - **定义**:JavaScript是一种轻量级的编程语言,用于实现客户端脚本,是ECMAScript标准的一个实现。 - **发展历程**:1995年由网景公司(Netscape)的Brendan ...
这份"完全手册:JavaScript动态网页开发详解(1-8章)"提供了全面的知识点,帮助初学者和进阶者深入理解JavaScript的核心概念和技术。下面我们将逐章探讨这八章中的关键内容。 第一章:JavaScript入门 这一章主要...
### JavaScript基础知识点详解 #### 一、JavaScript简介 **JavaScript**是一种主要运行在客户端的脚本语言,它不需要经过编译就能直接由浏览器解析执行。这使得JavaScript成为了现代Web开发中不可或缺的一部分,...