一、JavaScript脚本语言的特性
JavaScript脚本语言是一种面向浏览器的网页脚本编程语言。脚本语言有以下几个特性：
1、在客户端执行。完全在用户的计算机上运行，无须经过服务器。
2、面向对象。具有内置对象，也可以直接操作浏览器对象。
3、动态变化。可以对用户的输入作出反应，也可以直接对用户输出。
4、简单易用。JavaScript脚本语言虽然简单，但初学者也能快速掌握。
5、只能与HTML语言一起使用。要通过浏览器解释执行。
二、如何在HTML中加入JavaScript脚本
JavaScript采用的格式如下：
<Script Language="JavaScript">
JavaScript 语句
</Script>
把上述语句放在HTML的<head>与</head>之间，也可放在<body>与</body>之间。
例子：在网页上显示“你好！”。
<html>
<body>
<Script Language="JavaScript">
alert("你好！")
</script>
</body>
</html>
三、在浏览器地址栏直接执行JavaScript脚本
也可以在浏览器的地址栏中输入JavaScript语句，由浏览器直接执行。
如输入：javascript:alert(200*75)
四、调用JavaScript文件
可以将纯JavaScript的语句另外保存在一个"*.js"的文件中，需要时再调用。
例子：调用test.js文件，显示提示。
<html>
<body>
调用test.js文件
<script language="JavaScript" src="test.js">
</script>
</body>
</html>
test.js的文件内容如下：
alert("这是被调用的语句。")
五、注释语句
用<!- ... ->表示注解部分，用作说明解释，浏览器不显示出来。不要也可以。
另外，双斜线 "//" ，是JavaScript 的注释语句，它后面的语句不被执行。
六、变量的使用
变量的声明：Var usename
变量的赋值：usename="李国强"
例子：在网页上显示“李国强你好！”。
<html>
<body>
<Script Language="JavaScript">
Var usename
usename="芜园"
alert(usename + "您好！")
</script>
</body>
</html>
七、数组
数组的定义：var name=new Array(5) 用 new 来生成数组。
数组的赋值：name[1]="Marry"
数组的初始化：var name=new Array("Marry","Petty","Mike","Jphn")
数组的引用：name[1]
注：数组的第一个素由1开始。
八、运算符与表达式
1、代数运算符：加（+）、减（-）、乘（*）、除（/）、取余（%）。
2、比较运算符：等于（==）、不等于（!=）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）。
3、逻辑运算符：逻辑与（&&）、逻辑或（||）、逻辑非（!）。
表达式：由变量和运算符组成的式子。如：usename + "你好！"
JavaScript基本数据结构
JavaScript提供脚本语言的编程与C++非常相似，它只是去掉了C语言中有关指针等容易产生的错误，并提供了功能强大的类库。对于已经具备C++或C语言的人来说，学习JavaScript脚本语言是一件非常轻松愉快的事。
一、JavaScript代码的加入
JavaScript的脚本包括在HTML中，它成为HTML文档的一部分。与HTML标识相结合，构成了一个功能强大的Internet网上编程语言。可以直接将JavaScript脚本加入文档：
说明：
通过标识<Script>...</Script>指明JavaScript脚本源代码将放入其间。
通过属性Language ="JavaScript"说明标识中是使用的何种语言，这里是JavaScript语言, 表示在JavaScript中使用的语言。
下面是将JavaScript脚本加入Web文档中的例子:
Test2.html
在浏览器的窗口中调用test2.html。
说明：
Document. write()是文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口;document. close()是将输出关闭。
可将标识<Script>...</Script>放入<head>.. </Head>或<Body> ...</Body>之间。将JavaScript标识放置在<Head>... </Head>头部之间，使之在主页和其余部分代码之前装载，从而可使代码的功能更强大;可以将JavaScript标识放置在主体<Body>... </Body>之间以实现某些部分动态地创建文档。
此笔记是对《JavaScript权威指南》第4章内容的概括、重点的记录。不是重现书本实例。书中大部分实例放在github上、有兴趣的也可以看这本书或者github上代码。github地址会放在JavaScript目录中。
二：JavaScript应用步骤
1. 编写JavaScript脚本
2. 在页面中引用：
a)可以直接在页面中使用<script>标签将JavaScript相关内容放入其中。
b)可以将脚本放入一个或者多个文件结尾为js的文件中、在需要使用的页面中引入。
三：实例简述
网页中有多个链接、不点击任何链接时、页面下方的显示位置会显示一张默认图片和默认说明、当点击某个具体链接时将下方显示位置的默认图片替换成链接定向到的图片、同时将链接的说明内容显示在指定位置。
四：实例实现关键点
1. 获取a链接的herf和title属性。
2. 为所有链接添加单击事件。
3. 阻止链接默认行为。
2. 修改默认图片标签的src和说明标签内的文本内容。
五：相关方法与解决方式
1.阻止a默认行为：
[javascript] view plain copy
![]()
![]()
- <li><a onclick="switchPicture(this); return false" href="../picture/chenhong.jpg" title="Chen hong">Chen hong</a></li>
2.相关方法
[javascript] view plain copy
![]()
![]()
- function switchPicture (whichPicture) {
- var source = whichPicture.href;
- var placeholder = document.getElementById('placeholder');
- placeholder.setAttribute('src', source);
- document.getElementById('description').firstChild.nodeValue = whichPicture.getAttribute('title');
- }
六：补充
效果:
showPicture.js：
[html] view plain copy
![]()
![]()
- function switchPicture (whichPicture) {
- var source = whichPicture.href;
- var placeholder = document.getElementById('placeholder');
- placeholder.setAttribute('src', source);
- document.getElementById('description').firstChild.nodeValue = whichPicture.getAttribute('title');
- }
-
- /*
- function countBodyChildren () {
- alert(document.getElementsByTagName('body')[0].childNodes.length);
- }
-
- window.onload = countBodyChildren;*/
showPicture.html：
[html] view plain copy
![]()
![]()
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Show Picture</title>
- <script src="../js/showPicture.js" ></script>
- <link rel="stylesheet" href="../style/showPicture.css">
- </head>
- <body>
- <h1>Snapshots</h1>
- <ul>
- <li><a onclick="switchPicture(this); return false" href="../picture/chenhong.jpg" title="Chen hong">Chen hong</a></li>
- <li><a onclick="switchPicture(this); return false" href="../picture/liuyan.jpg" title="Liu Yan">Liu Yan</a></li>
- <li><a onclick="switchPicture(this); return false" href="../picture/liuyifei.jpg" title="Liu Yi Fei">Liu Yi Fei</a></li>
- <li><a onclick="switchPicture(this); return false" href="../picture/shishi.jpg" title="Liu Shi Shi">Liu Shi Shi</a></li>
- </ul>
- <img src="../picture/benchi.jpg" alt="my image gallery" id="placeholder">
- <p id="description">Choose one picture!</p>
- </body>
- </html>
showPicture.css：
[css] view plain copy
![]()
![]()
- body {
- font-family: "Helvetica", "Arial", serif;
- color: #333;
- background-color: #ccc;
- margin: 1em 10%;
- }
-
- h1 {
- color: #333;
- background-color: transparent;
- }
-
- a {
- color: #c60;
- background-color: transparent;
- font-weight: bold;
- text-decoration: none;
- }
-
- ul {
- padding: 0;
- }
-
- li {
- float: left;
- padding: 1em;
- list-style: none;
- }
-
- img {
- display: block;
- clear: both;
- }
|( 京ICP备09078825号 )
发表于 2017-5-31 00:28:29
收藏
发表于 2017-6-19 08:27:33
