javascript的理解及经典案例分析


Posted in Javascript onMay 20, 2016

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" style="list-style:none ;background:#0ff ;border:2px dashed blue;width:100px;" >
<li style="color:red">i love you</li>
<li style="color:pink">I LOVE YOU</li>
<li style="color:blue">I LOVE you</li>
<li style="color:green">i LOVE YOU</li>
<li style="color:yellowgreen">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的理解及经典案例分析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
JS中对象与字符串的互相转换详解
May 20 #Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 #Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 #Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 #Javascript
深入理解JS addLoadEvent函数
May 20 #Javascript
用jQuery获取table中行id和td值的实现代码
May 19 #Javascript
jquery遍历table的tr获取td的值实现方法
May 19 #Javascript
You might like
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
详解js的六大数据类型
2016/12/27 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
python实现在pickling的时候压缩的方法
2014/09/25 Python
用Python实现KNN分类算法
2017/12/22 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
鲜花方阵解说词
2014/02/13 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
世界名著读书笔记
2015/06/25 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript