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

时间 2019-11-06

标签 javascript 入门精通一课初探魅力栏目 JavaScript 繁體版

原文原文链接

第一课初探JavaScript魅力-01

JavaScript是什么

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

那么JavaScript到底是什么呢？对比HTML+CSS这二者只能制做观看难以交互（虽然能够经过hover伪类进行交互但功能有限）的静态网页而言，咱们给Javascript进行以下定义：html

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

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

第一个JS特效鼠标提示框

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

到这里，不得不补充一个JS里很是重要的一个概念：事件。这里咱们以第一个JS事件：onclick事件为例说明。安全

在html中包含如下代码：函数

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

这样会相应生成一个按钮，但点击无效，由于按钮自己并无任何功能，所以咱们要向按钮增长onclick事件来实现功能。onclick事件所表明的含义是当元素被点击时，该事件实现。布局

将上方代码改成：post

<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从入门到精通】第一课 初探JavaScript魅力-01