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 相关文章推荐
javascript中创建对象的三种常用方法
Dec 30 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
Element InputNumber 计数器的实现示例
Aug 03 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
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
送你43道JS面试题(收藏)
2019/06/17 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python循环监控远程端口的方法
2015/03/14 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
对python Tkinter Text的用法详解
2018/10/11 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
GWT都有什么特性
2016/12/02 面试题
残疾人创业典型事迹
2014/02/01 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
国旗下的演讲稿
2014/05/08 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
申论倡议书范文
2014/05/13 职场文书
会计学专业自荐信
2014/06/25 职场文书
董事长致辞
2015/07/29 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技