第二课 初探JavaScript魅力-02
变量
说起变量,我们不得不提起我们有一部比较古老的电视剧叫《包青天》。包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝。某种程度来说,变量具有类似于尚方宝剑的特性。
我们对第一课末的代码进行如下修改:
function toGreen() { var oDiv=document.getElementById('div1'); //变量 oDiv.style.width='300px'; oDiv.style.height='300px'; oDiv.style.background='green'; }
我们用var对变量进行定义,告诉计算机我接下来要写的是一个变量,oDiv是变量的名字,我们用oDiv这个变量把document.getElementById('div1')的值存起来(我们可以简单理解为变量是给一个东西取了个别名),那么在这个函数里凡是见到Div的地方便如同见到document.getElementById('div1'),就像尚方宝剑一样。这样的程序在功能上没有发生变化,但代码却大幅度进行了简化。
函数的定义与调用
定义和调用是函数的两个重要概念。 我们来看这么一段简单的JS代码:
function show() { //定义 alert("abc"); } show(); //调用
如果一个函数只有定义,而没调用,无论如何刷新页面,也没有任何效果。就像法律虽然存在,但如果没有人犯法,法律便如同不存在一样。而如果一个函数只有调用而没有定义,那么函数也无法执行,并且控制台会出现函数没有被定义的报错。因此,想让函数执行,函数的定义和调用缺一不可。
网页换肤
很多网站都拥有网页换肤这样类似的方便功能,可以通过点击改变网页的背景颜色或图片等。
上图为hao123的网页换肤功能,在点击换肤后整个网页所有元素的背景颜色都发生了改变。如果采用上节课的方式,我们可能需要一个一个修改元素的背景颜色,操作量非常大,因此我们有更简单的方法来完成这件事。
本例通过外链样式表来添加css,在外链样式表中准备两套不同的皮肤(即两个不同的css文件)提供网页变化。
css1的代码如下:
body{ background:black; } input{ width:200px; height:100px; background:yellow; }
css2的代码如下:
body{ background:#ccc; } input{ width:100px; height:50px; background:red; }
在HTML代码中,我们通过更改link的href属性便可以加载不同的css文件,所以其实换肤本质上就是更改外链的css文件。为了达成这个目的,我们需要操作HTML里的link标签。同时为了选中link标签,我们需要给给link标签加上id并在js函数里用getElementById方法选中,这样就可以对其href属性进行操作了。
完整代码如下:
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link id="l1" rel="stylesheet" type="text/css" href="css1.css" /> <script> function skin1() { var oL=document.getElementById('l1'); oL.href='css1.css'; } function skin2() { var oL=document.getElementById('l1'); oL.href='css2.css'; } </script> </head> <body> <input type="button" value="皮肤1" onclick="skin1()" /> <input type="button" value="皮肤2" onclick="skin2()" /> </body> </html>
从这个例子里,我们学到以下几点:
- 任何标签都可以加id,例如本例的link可以,甚至连body,html也可以。
- 任何标签的任何属性都可以通过JS进行修改。
- HTML里的属性名和JS里保持一致,HTML里面怎么写,VALUE里面就怎么写。
if判断
if语句在JS里用于判断,其基本格式为
if(条件){ 语句1 } else{ 语句2 }
其中else不是必要的。整个语句代表的含义为,如果条件成立,则执行语句1,如果条件不成立,则执行语句2。举一个生活中最简单的小例子,如果天气预报有雨,我们则带伞,如果不下雨,则不带伞。这个例子用if语句的话描述如下:
if(预报有雨){ 带伞 } else{ 不带伞 }
那么if语句在JavaScript里面应该怎么应用呢?我们再举一个网页的小例子。
Google上方菜单栏的“更多”选项,当我们点击的时候,会展开一个菜单栏,再次点击的时候会收回。这个非常常用的功能就是用if语句完成的。和onmouseout和onmouseover不同,虽然我们每次进行的都是点击操作,但根据菜单栏展开状态的不同,每次点击产生的效果也就不一样。当菜单栏处于显示状态的时候,进行点击的操作是让菜单栏隐藏;反之,当菜单栏处于隐藏状态时,进行点击的操作是让菜单栏显示。用一句简单的话来描述我们需要干的事情就是:当点击的时候,如果div是显示的,将其隐藏掉(将其display属性改为none);反之,将其显示出来(将其display属性改为block)。
因此,我们可以用if语句进行表达:
if(div是显示的){ oDiv.style.display='none'; } else{ oDiv.style.display='block'; }
完整代码如下:
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:200px; background:#CCC; display:none;} </style> <script> function showHide() { var oDiv=document.getElementById('div1'); if(oDiv.style.display=='block') { oDiv.style.display='none'; } else { oDiv.style.display='block'; } } </script> </head> <body> <input type="button" value="显示隐藏" onclick="showHide()" /> <div id="div1"> </div> </body> </html>
这里出现了一个新的符号,==(双等号)。我们之前讲过,在JS里=代表赋值(改变),而双等号则更接近于数学中的等号,其作用是判断两边是否相等。在本例中,oDiv.style.display=='block'即代表对display的值是否为block进行判断,如果成立则代表div1是显示的状态,执行if语句将其隐藏;反之不成立则代表div1是隐藏状态,执行else语句将其显示。
为a链接添加JS
HTML中的a链接大家应该再熟悉不过了,但是大家知道,a链接也是可以添加JS的吗?通常情况下,我们在a标签的href属性里放的值是网址,不过实际上也可以在里面放入JS函数执行。
<a href="javascript:alert('a');">链接</a>
使用上述代码,点击链接同样可以执行JS函数。冒号前的javascript可以告诉浏览器,我们要执行的不是网址而是JS代码,冒号后的则是执行内容。
不过,一般来讲,我们都不会真的在a标签里放JS代码,而是让它空着:
<a href="javascript:;">链接</a>
这样做的目的有两个。首先,在a标签里面放代码非常不好,这一点我们学到事件的时候就会明白。其次,这种写法比起在href属性中使用#有一个优势:点击后没有反应,不会直接跳到网页的顶部。
例外的className
在网页换肤的时候我们讲过,HTML里的属性名和JS里保持一致,HTML里面怎么写,VALUE里面就怎么写——唯一的例外就是className。因为JS里的class是保留字,在JS里有其他作用,如果我们在JS里直接使用HTML里的class属性,程序是不会执行的,所以JS用className代替了class。当我们想改变一个元素的class时,采用以下写法:
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 { width:100px; height:100px; border: 1px solid black; } .box { background:red; } </style> <script> function toRed() { var oDiv=document.getElementById('div1'); oDiv.className='box'; //className,而不是class } </script> </head> <body> <input type="button" value="变红" onclick="toRed()" /> <div id="div1"> </div> </body> </html>
相关推荐
在“JavaScript从入门到精通(第2版)PPT”这套教学资料中,我们将深入探讨JavaScript的核心概念、语法特性以及实际应用。 1. **基础概念** - **变量与数据类型**:JavaScript支持基本数据类型(如字符串、数字、...
"JavaScript从入门到精通(第4版)"是一本旨在帮助初学者掌握这门语言的教材,通过详细的示例源码和习题答案,让学习者能够逐步深入理解JavaScript的核心概念和实际应用。 1. **基础语法**:JavaScript的基础包括...
### Html+Css+Javascript从入门到精通 #### Web开发基础教程概述 《Html+Css+Javascript从入门到精通》是一本全面介绍了Web前端开发技术的教程。本书旨在帮助读者掌握Web开发的基础知识,并通过实践逐步深入理解...
"JavaScript从入门到精通 所有例题程序"是一个专门针对学习者设计的资源包,旨在帮助初学者通过实践掌握JavaScript的核心概念和技术。 这个资源包中的"sl"实例源程序包含了大量例题,涵盖了JavaScript的基础到进阶...
《JavaScript从入门到精通》分为三篇:第一篇为JavaScript语法基础,主要包括JavaScript简介、如何实现JavaScript、数据类型、变量和常量、运算符、语句和函数等内容;第二篇为JavaScript对象,主要包括对象、核心...
这份“javascript从入门到精通.rar”压缩包包含了丰富的资源,旨在帮助初学者快速掌握这一技术,同时也适合进阶者深入理解JavaScript的核心概念。 首先,我们从基础开始。JavaScript是一种解释型的、基于原型的脚本...
本书《JavaScript从入门到精通(第2版)》旨在帮助初学者和有经验的开发者深入理解和掌握这门语言,从而提升技能水平。通过阅读本书和实践其中的源代码实例,读者将能够全面了解JavaScript的核心概念和技术。 首先...
总而言之,《JavaScript从入门到精通(第2版)》是一本全面的JavaScript教程,涵盖了从基础语法到高级特性的全方位内容。通过阅读这本书,无论是初学者还是有经验的开发者,都能进一步提升自己的JavaScript技能,...
#### 二、JavaScript的核心特性 - **脚本语言**:JavaScript是一种解释型脚本语言,无需预先编译,可在运行时逐行解释执行。这使得开发者可以更灵活、快速地开发应用。 - **基于对象**:尽管JavaScript不完全符合...
这两本书籍,"JavaScript从入门到精通(第2版)" 和 "高性能JavaScript",分别涵盖了JavaScript的基础知识和优化技巧,对于想要深入理解并提升JavaScript技能的开发者来说是宝贵的学习资源。 "JavaScript从入门到精通...
本书《JavaScript从入门到精通(第2版)》由Steve Suehring撰写,专为想要深入理解并掌握JavaScript的初学者和进阶者设计。它涵盖了JavaScript的基础概念、语法特性以及高级应用,旨在帮助读者构建坚实的JavaScript...
本书介绍了JavaScript与Jscript编程的各方面知识,包括利用客户机方脚本和文档对象模型进行Web浏览器编程,利用服务器方脚本、活动服务器页面、JSP和LiveWire进行Web服务器方编程,还将介绍Rhino与WSH。更重要的是,...
#### 二、JavaScript的基本概念 - **定义**:JavaScript是一种基于对象和事件驱动的安全脚本语言,用于与HTML和Java小程序一起实现Web页面中的对象链接和用户交互。它可以直接嵌入到HTML代码中或者通过外部文件调用...
本教程"html5+css3从入门到精通"针对前端新手,旨在帮助初学者快速掌握这两项核心技术。 HTML5(超文本标记语言第五版)是网页内容结构的标准,它引入了许多新的元素和属性,以更好地表达内容的语义。例如,`...
本书从初学者角度出发,通过通俗易懂的语言,丰富多彩的实例,详细介绍了使 ... ... 、PHP数组、PHP与Web页面交互、PHP与...本站提供的PHP从入门到精通第二版 pdf扫描版资源来源互联网,版权归该下载 资源的合法拥有者所有
本"JavaScript从入门到精通源代码"旨在帮助初学者快速掌握这一语言,并通过实际的源代码示例加深理解。 首先,我们要理解JavaScript的基础语法。包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔...
在JavaWeb前端开发中,熟练掌握这两项技术是至关重要的,因为它们可以帮助开发者创建交互性强、视觉效果丰富的网页,同时...通过阅读"HTML5+CSS3从入门到精通1.pdf"这份文档,你可以系统地学习并掌握这些关键知识点。
《PHP从入门到精通(第2版)》从初学者角度出发,通过通俗易懂的语言,丰富多彩的实例,详细介绍了使用PHP进行网络开发应该掌握的各方面技术。全书共分24章,包括初识PHP、PHP环境搭建和开发工具、PHP语言基础、流程...