网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 javascript的理解及经典案例分析
内容
    下面小编就为大家带来一篇javascript的理解及经典案例分析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。
    js的简介：
    JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言。
    你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。
    javascript现在可以再网页上做很多很多事情，网页特效，操作dom，html5游戏（基于html5和JavaScript的结合），动画等等特效，还可以实现拉去后台数据（通过ajax）,不仅可以做前台还可以做后台，
    比如node.js等等，再比如一些桌面引擎node-webkit可以将JavaScript渲染成桌面应用，在比如unity3d可以使用JavaScript写游戏（unity3d使用的JavaScript的语法，特性等等）
    JavaScript语言的特点：
    1）.JavaScript主要用来向HTML页面中添加交互行为。
    2）.JavaScript是一种脚本语言，语法和Java相似。
    3）.JavaScript一般用来编写客户端的脚本。
    4）.JavaScript是一种解释型语言，边执行边解释。
    JavaScript知识点解释：
    1、运算符
    运算符就是完成操作的一系列符号，它有七类： 赋值运算符、算术运算符、比较运算符、逻辑运算符、条件运算、位操作运算符和字符串运算符。
    2、表达式
    运算符和操作数的组合称为表达式，通常分为四类：赋值表达式、算术表达式、布尔表达式和字符串表达式。
    3、语句
    Javascript程序是由若干语句组成的，语句是编写程序的指令。Javascript提供了完整的基本编程语句，它们是： if~else,赋值语句、switch选择语句、while循环语句、for循环语句、do while循环语句、break循环中止语句和continue循环中断语句。
    注意：在判断的时候，只有这几种结果为false:即
    如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）！
    4、函数
    函数是命名的语句段，这个语句段可以被当作一个整体来引用不着和执行。使用函数要注意以下几点：
    1）函数由关键字function定义；
    2）函数必须先定义后使用，否则将出错；
    3）函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名；
    4）参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量；
    5）return语句用于返回表达式的值，也可以没有。
    5、对象
    Javascript的一个重要功能就是基于对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。 一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。
    6、事件
    用户与网页交互时产生的操作，称为事件。绝大部分事都由用户的动作所引发，如：用户按鼠标的按键，就产生onclick事件，若鼠标的指针在链接上移动，就产生onmouseover事件等等。在Javascript中，事件往往与事件处理程序配套使用。
    7、变量
    如 var myVariable = "some value";
    经典案例：
    js抽奖
    包含的知识点：计时器的使用，document对象的方法的使用，js数组的使用，js内置对象的使用，js系统函数的使用，注册事件。
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title></title>
      <script type="text/javascript">
        var alldata = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z"
        var alldataarr = alldata.split(",");
        var num = alldataarr.length - 1;
        var timer;   
        function start() {
          clearInterval(timer);h
          timer = setInterval('change()', 10);
        }
        function change() {
          document.getElementById("oknum").innerHTML = alldataarr[GetRnd(0, num)];
        }
        function GetRnd(min, max) {
          return parseInt(Math.random() * (max - min + 1));
        }   
        function ok() {
          clearInterval(timer);
          document.getElementById("showresult").value = document.getElementById("oknum").innerText;
        }   
    </script> 
    </head>
    <body>
    <div id="oknum" name="oknum" >请单击开始</div> 
      <button onclick="start()" accesskey="s">开始</button>  <!--//accesskey 属性规定激活（使元素获得焦点）元素的快捷键。-->
    <button onclick="ok()" accesskey="o">停止</button> 
    您的选择是： 
    <input type="text" id="showresult" value=""/>
    </body>
    </html
    背景图片的切换
    包含的知识点：计时器的使用，document对象的方法的使用
    <script type="text/javascript">
            window.onload = function () {
          setInterval(step, 1000);
        }
        var num = 1;
        function step() {
          if (num < 5) {
            num++;
          } else {
            num = 1;
          }
          var dom = document.getElementById("imgId");
          //更改它images的src属性
          dom.src = 'images/' + num + '.jpg';
        }
      </script>
    </head>
    <body>
      <img src="images/1.jpg" width="500" height="500" id="imgId"/>
    </body>
    </html>
    跑马灯：
    包含的知识点：计时器的使用，document对象的方法的使用，系统函数的使用，鼠标事件的使用，节点操作的使用，循环语句，判断语句
    <script src="js/jquery-1.8.3.min.js"></script>
      <script type="text/JavaScript">     
        ( function ($) {
          $.fn.extend({
            RollTitle: function (opt, callback) {
              if (!opt) var opt = {};
              var _this = this;
              _this.timer = null;
              _this.lineH = _this.find("li:first").height();
              _this.line = opt.line ? parseInt(opt.line, 15) : parseInt(_this.height() / _this.lineH, 10);
              _this.speed = opt.speed ? parseInt(opt.speed, 10) : 3000, 
              _this.timespan = opt.timespan ? parseInt(opt.timespan, 13) : 5000; 
              if (_this.line == 0) this.line = 1;
              _this.upHeight = 0 - _this.line * _this.lineH;
              _this.scrollUp = function () {
                _this.animate({
                  marginTop: _this.upHeight
                }, _this.speed, function () {
                  for (i = 1; i <= _this.line; i++) {
                    _this.find("li:first").appendTo(_this);
                  }
                  _this.css({ marginTop: 0 });
                });
              }
              _this.hover(function () {
                clearInterval(_this.timer);
              }, function () {
                _this.timer = setInterval(function () { _this.scrollUp(); }, _this.timespan);
              }).mouseout();
            }
          })})(jQuery);
    </script>
    </head>
    <body>
      <ul id="RunTopic" >
    <li>i love you</li>
    <li>I LOVE YOU</li>
    <li>I LOVE you</li>
    <li>i LOVE YOU</li>
    <li>I love YOU</li>
    </ul>
    <br/>
    <input  type="button" onclick="test();" value="跑马灯" >
       <script type="text/javascript">
         function test()
         {
           $("#RunTopic").find("li:first").appendTo($("#RunTopic"));
    </script> 
    </body>
    </html>
    javascript的一番理解，就到这了，以后有关于js的案例会放到这里。希望能帮到大家！！！
    以上这篇javascript的理解及经典案例分析就是小编分享给大家的全部内容了，希望能给大家一个参考
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/19 18:10:56