第一课 初探JavaScript魅力-01

JavaScript是什么

如今我们打开一个大型的网站，都会有很多JS效果的功能和应用。对于学过CSS+HTML的同学，即使是像淘宝那样的网站，用一两天时间也可以将布局写出来。但对于一个网页来说，除去CSS，HTML这样描述静态布局的元素外，还有诸如弹窗，幻灯，编辑等很难用纯粹的CSS+HTML实现的功能，而这些都是通过JavaScript来完成。

那么JavaScript究竟是什么呢？对比HTML+CSS这两者只能制作观看难以交互（虽然可以通过hover伪类进行交互但功能有限）的静态网页而言，我们给Javascript进行如下定义：

JavaScript是一门用于给网页添加功能、交互的脚本语言。

我们以百度首页登录框为例，实际上我们打开百度首页的时候，登录框就已经包含在了网页代码中。在我们点击登录之前，登录框css的display属性为none；而当我们点击之后，其display属性变为了block，从而就显示了出来——这个过程便是由JS控制的。淘宝的幻灯效果也是同理，我们通过鼠标移动到不同的元素来改变元素的背景颜色(background-colr)和文字颜色(color)。

第一个JS特效 鼠标提示框

如上图126邮箱十天免登陆的提示，当我们将鼠标移动到框上时，会出现相应的文字提示，当鼠标移开时，对应的文字提示消失。我们将模仿它写一个鼠标提示框。该功能的具体实现是：当鼠标移入到框上的时候，让该div显示，鼠标移出框的时候，让该div隐藏。

到这里，不得不补充一个JS里非常重要的一个概念：事件。这里我们以第一个JS事件：onclick事件为例说明。

在html中包含以下代码：

<input type="button" value="按钮" />

这样会相应生成一个按钮，但点击无效，因为按钮本身并没有任何功能，因此我们要向按钮增加onclick事件来实现功能。onclick事件所代表的含义是当元素被点击时，该事件实现。

将上方代码改为：

<input type="button" value="按钮" onclick="alert('zcvzxcvzx')"/>

当我们再点击按钮时，便会激活onclick事件，弹出弹框。

简单来说，事件就是用户的操作。用户操作分为很多，对于按钮来说有点击，以及我们待会会用到的鼠标移入，鼠标移出等等。将来我们会遇到更多的事件，这里不再赘述，以后慢慢说。

回到我们的第一个JS特效中来。为了实现：鼠标移入到checkbox的时候，让div显示，鼠标移出checkbox的时候，让div隐藏这样的效果，我们引入两个新的事件：onmouseover和onmouseout。如果你懂英文的话，很容易就明白，前者是指鼠标移入元素时触发的事件，后者是鼠标移开元素时触发的事件。

现在我们来分析，如何让鼠标移入到input的时候，让div1显示呢？其实就是当鼠标移入到input上时，将其display属性改为block。那么，这句话应该如何用JS来写呢？答案是这样的：

<input type="checkbox" onmouseover="div1.style.display='block';"/>
<div id="div1">
为了您的信息安全。。。。
</div>

我们将div1.style.display='block'这句话拿出来仔细分析。首先，div1是div的id，代表了选择了该div。其次，.代表的是什么含义呢？.类似于汉语的“的”，表示所属关系。等号在JS里并不是相等的意思，而是赋值（把等号右边的东西赋给左边）。所以这句话的意思就是div1的style（样式）里的display属性赋值为block。因此，当我们将鼠标移动到checkbox上后，便会触发onmouserover事件，将div1显示出来。同理，通过onmouseout事件可以在鼠标离开时将div1隐藏。

完整的代码如下：

<html>
  <head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
      #div1{
        width:200px;
        height: 100px;
        background: #CCC;
        border: 1px solid #999;
        display: none; 
      }
    </style>
  </head>
  <body>
    <input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';" />
    <div id="div1">
      为了您的信息安全。。。。
    </div>
  </body>
</html>

实现的效果如下：

不兼容问题

我们已经学会了写一个最简单的JS小程序，但它存在一些小问题。在chrome和IE浏览器下，它能很好地运行，但如果使用火狐浏览器，你会惊讶的发现程序没有反应。在错误控制台中我们可以看到，错误提示为“div1 is not defined”，即div1没有被定义。

你或许会觉得奇怪，为什么说div1没有被定义呢？原因是在JS里，直接使用ID进行元素选择是不兼容的（火狐或者低版本的chrome），我们应该采用更加兼容的写法：document.getElementById()。

因此我们可以将上面的代码进行改写：

<input type="checkbox" onmouseover="getElementById('div1').style.display='block';" onmouseout="getElementById('div1').style.display='none';" />

getElementById的意思是通过id来获取元素，在本例中即通过getElementById获取了div1的元素来使用，这样在任何浏览器下都不会产生兼容性问题了。

初识函数

提起函数大家想到的应该首先是数学里的函数，不过JS里的函数和数学函数的关系并不是很大。我们用一个简单的小东西来阐述什么是JS里的函数。

现在我们向网页添加一个框，其宽为200px，高也为200px，背景为红色。同时我们希望当我们的鼠标移动到框上时，其宽高变为300px，背景变为绿色。利用我们前面所学到的知识我们可以解决这个问题，代码如下：

<html>
  <head>
    <meta charset="utf-8" />
    <title>
无标题文档
    </title>
    <style>
      #div1{
        width:200px;
        height: 200px;
        background: red;
      }9
    </style>
  </head>
  <body>
    <div id="div1" onmouseover="document.getElementById('div1').style.width='300px';document.getElementById('div1').style.height='300px';document.getElementById('div1').style.background='green';"onmouseout="document.getElementById('div1').style.width='200px';document.getElementById('div1').style.height='200px';document.getElementById('div1').style.background='red';">
    </div>
  </body>
</html>

实现的效果如下：

显而易见的是，虽然完成了功能，但这样的代码无论编写还是查看都太恶心了。还记得，我们写css很少把这么多的样式写在行间而是选择写在样式表里，JS也同样，通常可以通过函数的方式将代码简洁化。

JS的函数的最基本格式为：function+函数名+(){},()内为参数(可以不写，暂时不用管)，{}内为函数体。

因此，我们通过函数将上方的代码进行改造：

<html>
  <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
      #div1 {
        width:200px;
        height:200px;
        background:red;
      }
    </style>
    <script>
      function toGreen()
      {   
        document.getElementById('div1').style.width='300px';
        document.getElementById('div1').style.height='300px';
        document.getElementById('div1').style.background='green';
      }
      function toRed()
      {
        document.getElementById('div1').style.width='200px';
        document.getElementById('div1').style.height='200px';
        document.getElementById('div1').style.background='red';
      }
    </script>
  </head>
  <body>
    <div id="div1" onmouseover="toGreen()" onmouseout="toRed()">
    </div>
  </body>
</html>

将函数写在script标签中，然后将行内的代码写在函数里，行内只使用函数名调用函数，这样比之前显得更简洁。

此外，在写css的时候，我们普遍有一个小小的习惯叫重用，即相同的代码尽可能只写一次。在JS里，同样应当遵循这样的规则。在上面的例子中，document.getElementById('div1')这一段被重复使用了多次，我们可以通过引入一个新的概念：变量将他们进行合并，我们将在下一课进行细讲。

【JavaScript从入门到精通】第一课的更多相关文章

  1. JavaScript从入门到精通(转)

    JavaScript从入门到精通 转自: https://github.com/Eished/JavaScript_notes 视频连接:https://www.bilibili.com/video/ ...

  2. SaltStack入门到精通第一篇：安装SaltStack

    SaltStack入门到精通第一篇:安装SaltStack 作者:纳米龙  发布日期:2014-06-09 17:50:36   实际环境的设定: 系统环境: centos6 或centos5 实验机 ...

  3. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

  4. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  5. 【JavaScript从入门到精通】第二课

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  6. 【JavaScript从入门到精通】第四课初探JavaScript魅力-04

    第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...

  7. 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  8. 【JavaScript从入门到精通】第三课

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  9. Javascript从入门到精通（一）

    第一篇   基础知识 一.JavaScript的主要特点:1.解释性:不同于一些编译性的程序语言(如C.C++等),它是一种解释性的程序语言,它的源代码不需要经过编译,而是直接在浏览器中运行时被解释. ...

随机推荐

  1. 警告框在asp.net mvc中应用

    Bootstrap与asp.net MVC框架结合,产生警告框.主要是利用控制器的TempData 字典对象 生成临时数据. ASP.NET MVC的TempData用于传输一些临时的数据,例如在各个 ...

  2. Java 支持JavaScript脚本计算

    Java支持了JavaScript脚本的执行计算能力: import javax.script.Invocable; import javax.script.ScriptEngine; import ...

  3. idea 设置项目编码

    目前我了解的设置idea编码有两种形式(但深层次不太了解) 方式一: 这个方式需要你点击要设置编码单个文件,选择编码.一次只能修改一个文件编码 方式二: 一般工作时使用这个方式,文件编码,选择项目文件 ...

  4. Codeforces 908F - New Year and Rainbow Roads 【脑洞】

    题意:在一条数轴上有若干'R','B','G'点,连接两个点的代价是位置差,要求使用最小代价使得除去所有'R'点后剩下的所有点联通,除去所有'B'点后剩下的所有点联通. 还以为会是什么最小生成树,结果 ...

  5. bzoj 1230: [Usaco2008 Nov]lites 开关灯【线段树】

    在线段树上记录长度.区间01翻转标记.当前1个数.传递tag的时候用长度-1个数即可 #include<iostream> #include<cstdio> using nam ...

  6. 洛谷P3261 [JLOI2015]城池攻占（左偏树）

    传送门 每一个城市代表的点开一个小根堆,把每一个骑士合并到它开始攻占的城池所代表的点上 然后开始dfs,每一次把子树里那些还活着的骑士合并上来 然后再考虑当前点的堆,一直pop直到骑士全死光或者剩下的 ...

  7. 我的spring cloud项目历程（2018.3~2018.9）

    前言 今天是9月17日,趁着山竹的临幸,得以在家里舒适的办公.项目从3月底开始,至今刚好半年.抽几十分钟,总结下半年的历程.对后面的项目,应该也有一点帮助吧. 学习前的七个问题 项目开始前,由于某些特 ...

  8. 用jdbc连接数据库并简单执行SQL语句

    一:版本一.这种存在一个问题就是每执行一次操作都会创建一次Connection链接和且释放一次链接 1:创建pojo对象(OR映射,一个pojo类对应一张数据库表)   package com.yin ...

  9. 线程池之ThreadPoolExecutor使用

    ThreadPoolExecutor机制  一.概述 1.ThreadPoolExecutor作为java.util.concurrent包对外提供基础实现,以内部线程池的形式对外提供管理任务执行,线 ...

  10. _bzoj1015 [JSOI2008]星球大战starwar【并查集】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1015 倒过来做就ok了. #include <cstdio> #include ...