JavaScript基本语法

最新推荐文章于 2022-08-21 16:00:21 发布

ling091

最新推荐文章于 2022-08-21 16:00:21 发布

阅读量526

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/ling091/article/details/38982755

版权

Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

@Feb 11, 2014

下文主要整理自 http://www.w3school.com.cn/js/js_intro.asp

1 什么是JavaScript

JavaScript 是一种轻量级语言，被设计为向 HTML 页面增加交互性。JavaScript可嵌入到html中，由浏览器解释执行。

1.1 Javascript代码示例1

一段javascript代码：

<!DOCTYPE html>

<html>

<body>

<p>

JavaScript 能够直接写入 HTML 输出流中：

</p>

document.write("<h1>This is aheading</h1>");

document.write("<p>This is aparagraph.</p>");

</script>

<p>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。

如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

</p>

</body>

</html>

Note:只能在 HTML 输出中使用document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

1.2 Javascript示例2：响应事件

<!DOCTYPE html>

<html>

<body>

<h1>我的第一段JavaScript</h1>

<p>

JavaScript 能够对事件作出反应。比如对按钮的点击：

</p>

</body>

</html>

1.3 Javascript示例3：改变元素内容

document.getElementById("demo").innerHTML="HelloJavaScript"; //改变内容

getElementById("someid")。这个方法是 HTML DOM 中定义的, DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。

改变图片：

<!DOCTYPE html>

<html>

<body>

function changeImage()

{

element=document.getElementById('myimage');

if (element.src.match("bulbon"))

{

element.src="/i/eg_bulboff.gif";

}

else

{

element.src="/i/eg_bulbon.gif";

}

</script>

<p>点击灯泡来点亮或熄灭这盏灯</p>

</body>

</html>

2 JavaScript基本语法

2.1 Script标签

HTML 中的脚本必须位于<script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的<body> 和 <head> 部分中。Javascript也可以定义在自己的文件中，扩展名为.js，然后在html中通过下面的方式进行引用：

<scriptsrc="myScript.js"></script>

上面javascript代码示例1中的javascript代码会在页面加载时执行。示例2中的javascript则会在事件发生时执行。

2.2 操作操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素，如代码示例3中的代码。

2.3 JavaScript 语句

用分号来分隔语句是可选的。

Note：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

3 JavaScript变量

使用var声明变量：

var carname;

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x // x 为 undefined

var x = 6; // x 为数字

var x = "Bill"; // x 为字符串

3.1 JavaScript 数组

下面的代码创建名为 cars 的数组：

var cars=new Array();

cars[0]="Audi";

cars[1]="BMW";

cars[2]="Volvo";

或者 (condensed array):

var cars=new Array("Audi","BMW","Volvo");

或者 (literal array):

varcars=["Audi","BMW","Volvo"];

3.2 JavaScript 对象

3.2.1 创建 JavaScript 对象

JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。

你也可以创建自己的对象。

本例创建名为"person" 的对象，并为其添加了四个属性：

person=new Object();

person.firstname="Bill";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";

还可以这样，对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill",lastname:"Gates", id:5566};

也可以这样写：

var person={

firstname : "Bill",

lastname : "Gates",

id : 5566

};

对象属性有两种寻址方式：

name=person.lastname;

name=person["lastname"];

3.3 声明变量类型

声明新变量时，可以使用关键词"new" 来声明其类型：

var carname=new String;

var x= new Number;

var y= new Boolean;

var cars= new Array;

var person= new Object;

Note：JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

3.4 全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

3.5 JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。所以切换页面后，全局变量的值就不再有效了。可以使用cookie来达到全局变量的效果。

3.6 向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行。

4 JavaScript函数

function myFunction(var1,var2)

{

//这里是要执行的代码

}

带有返回值的函数

function myFunction()

{

var x=5;

return x;

}

5 JavaScript运算符

与其它语言如java类似。

Note：如果把数字与字符串相加，结果将成为字符串。

6 JavaScript语句

6.1 条件语句

If和if else和 if…else if…else

6.2 Switch语句

6.3 循环语句

JavaScript 支持不同类型的循环：

l for - 循环代码块一定的次数

l for/in - 循环遍历对象的属性 for(x in person){…}

l while - 当指定的条件为 true 时循环指定的代码块

l do/while - 同样当指定的条件为 true 时循环指定的代码块

6.3.1 For in 循环

遍历一个对象的所有属性：

for(x in student)

{

…

}

for in 循环有时候很有用，比如想要将一个对象的所有属性放到同名的cookie，可以这样写：

for(attribute in obj ) // 遍历对象的属性名

{

//$.cookie(…)是jquery的写法， obj[attribute] 根据属性名获取对象该属性的值

$.cookie(attribute, obj[attribute]);

}

7 JavaScript Error

Try, catch, throw

try

{

//在这里运行代码

}

catch(err)

{

//在这里处理错误

}

8 JavaScript用作表单验证

<html>

<head>

function validate_required(field,alerttxt)

{

with (field)

{

if(value==null||value=="")

{alert(alerttxt);return false}

else{return true}

}

function validate_form(thisform)

{

with (thisform)

{

if(validate_required(email,"Email must be filled out!")==false)

{email.focus();return false}

}

</script>

</head>

<body>

Email: <input type="text"name="email" size="30">

</form>

</body>

</html>

9 HTML DOM

通过 HTML DOM，可访问JavaScript HTML 文档的所有元素。

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

9.1 查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

l 通过 id 找到 HTML 元素:document.getElementById(“…”)

l 通过标签名找到 HTML 元素：document.getElementsByTagName(“…”)

l 通过类名找到 HTML 元素：在 IE5,6,7,8 中无效

9.2 DOM事件

9.2.1 onload onunload

事件会在用户进入或离开页面时被触发。

onload完成加载时调用，可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理cookie。

其他事件举例：

onchange

onmouseoveronmouseout

onmousedownonmouseup

onclick

onfocus

ling091

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基本语法

整理自1 什么是JavaScriptJavaScript 是一种轻量级语言，被设计为向 HTML 页面增加交互性。JavaScript可嵌入到html中，由浏览器解释执行。1.1 Javascript代码示例1一段javascript代码： JavaScript 能够直接写入 HTML 输出流中： docum
复制链接

扫一扫

专栏目录