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="data: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的理解及经典案例的更多相关文章

  1. js 中对于this 的理解的 经典案例

    function Foo(){ getName = function(){console.log(1);}; return this; }Foo.getName = function(){consol ...

  2. 【数据结构与算法】多种语言(VB、C、C#、JavaScript)系列数据结构算法经典案例教程合集目录

    目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 2. 专栏地址 「 刘一哥与GIS的故事 」之<数据结构与算法> 3. 专栏目录 [经典回放]多种语言系列数据结构算法 ...

  3. javascript深入理解js闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  4. javascript深入理解闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  5. javascript深入理解闭包(转)

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  6. javascript深入理解js闭包[转]

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  7. (转)javascript深入理解js闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  8. javascript深入理解js闭包(个人理解,大神勿喷)

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  9. javascript深入理解js闭包(看了挺多的,感觉这篇比较透彻)

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...

随机推荐

  1. Android的Kotlin秘方(I):OnGlobalLayoutListener

    春节后,又重新“开张”.各位高手请继续支持.谢谢! 原文标题:Kotlin recipes for Android (I): OnGlobalLayoutListener 原文链接:http://an ...

  2. Android开发学习—— shape标签的使用

    参考这片文章http://www.cnblogs.com/armyfai/p/5912414.html

  3. Linux设备管理(三)_总线设备的挂接

    扒完了字符设备,我们来看看平台总线设备,平台总线是Linux中的一种虚拟总线,我们知道,总线+设备+驱动是Linux驱动模型的三大组件,设计这样的模型就是将驱动代码和设备信息相分离,对于稍微复杂一点的 ...

  4. Help Hanzo (素数筛+区间枚举)

    Help Hanzo 题意:求a~b间素数个数(1 ≤ a ≤ b < 231, b - a ≤ 100000).     (全题在文末) 题解: a~b枚举必定TLE,普通打表MLE,真是头疼 ...

  5. Xamarin.Android通知详解

    一.发送通知的机制 在日常的app应用中经常需要使用通知,因为服务.广播后台活动如果有事件需要通知用户,则需要通过通知栏显示,而在Xamarin.Android下的通知需要获取Notification ...

  6. Leetcode 笔记 99 - Recover Binary Search Tree

    题目链接:Recover Binary Search Tree | LeetCode OJ Two elements of a binary search tree (BST) are swapped ...

  7. 简单的例子了解自定义ViewGroup(一)

    在Android中,控件可以分为ViewGroup控件与View控件.自定义View控件,我之前的文章已经说过.这次我们主要说一下自定义ViewGroup控件.ViewGroup是作为父控件可以包含多 ...

  8. Oracle ------ SQLDeveloper中SQL语句格式化快捷键

    Oracle SQL Developer中SQL语句格式化快捷键: 每次sql复制到SQL Developer面板的时候,格式老不对,而且看起来很不舒服,所有的sql都挤在一行完成. 这时我们可以全选 ...

  9. CI Weekly #5 | 微服务架构下的持续部署与交付

    CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分享,包括国内外持续集成.持续交付,持续部署.自动化测试. DevOps 等实践教程.工具与资源,以及一些工程师文化相关的程序员 Ti ...

  10. Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值

    Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值,去属性表中设置这时候会提示你去属性表中更改返回类型. 其实存储过程返回的也是一张表,只不过有时候存储过程有点复杂或者写法不规范的话不能 ...