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 相关文章推荐
lib.utf.js
Aug 21 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
node.js中express-session配置项详解
May 31 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
JS实现随机点名器
Apr 12 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
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简单实例介绍文件上传
2015/12/16 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
php实现简单加入购物车功能
2017/03/07 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
asp 的 分词实现代码
2007/05/24 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
express框架下使用session的方法
2019/07/31 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python二分法搜索算法实例分析
2015/05/11 Python
python中学习K-Means和图片压缩
2017/11/20 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
药学专业毕业生求职信
2013/10/20 职场文书
经典商业广告词
2014/03/13 职场文书
文明之星事迹材料
2014/05/09 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
校园广播稿100字
2014/10/06 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
7个关于Python的经典基础案例
2021/11/07 Python
python可视化大屏库big_screen示例详解
2021/11/23 Python
Nginx安装配置详解
2022/06/25 Servers