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="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的理解及经典案例的更多相关文章
- js 中对于this 的理解的 经典案例
function Foo(){ getName = function(){console.log(1);}; return this; }Foo.getName = function(){consol ...
- 【数据结构与算法】多种语言（VB、C、C#、JavaScript）系列数据结构算法经典案例教程合集目录
目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 2. 专栏地址 「 刘一哥与GIS的故事 」之<数据结构与算法> 3. 专栏目录 [经典回放]多种语言系列数据结构算法 ...
- javascript深入理解js闭包
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- javascript深入理解闭包
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- javascript深入理解闭包（转）
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- javascript深入理解js闭包[转]
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- (转)javascript深入理解js闭包
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- javascript深入理解js闭包（个人理解，大神勿喷）
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- javascript深入理解js闭包(看了挺多的，感觉这篇比较透彻)
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...
随机推荐
- 一个软件开发者的BPM之路
我是小林,一名普通的软件工程师,从事BPM(业务流程管理)软件开发工作.我没有几十年的技术底蕴,无法像大牛们一样高谈阔论,品评BPM开发之道:也不是资深的流程管理专家,能与大家分析流程管理的时弊.我只 ...
- 简历生成平台项目开发-STEP1问卷设计
周五课程结束完后,小组建立QQ群和微信群,着手讨论项目问题.一开始的大概想法:就业信息平台,收集企业招聘信息和就业生资料,提供给学生和企业的校企对接平台.后来发现群里谭卓同学也有个相关的思路,经过商量 ...
- BZOJ1012: [JSOI2008]最大数maxnumber [线段树 | 单调栈+二分]
1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 8748 Solved: 3835[Submi ...
- 开始webservice了
一.WebService到底是什么 一言以蔽之:WebService是一种跨编程语言和跨操作系统平台的远程调用技术. 所谓跨编程语言和跨操作平台,就是说服务端程序采用java编写,客户端程序则可以采用 ...
- BRDF 光照模型
http://blog.csdn.net/liu_lin_xm/article/details/4846144
- 【Java并发编程实战】----- AQS(一)：简介
在前面博客中,LZ讲到了ReentrantLock.ReentrantReadWriteLock.Semaphore.CountDownLatch,他们都有各自获取锁的方法,同时相对于Java的内置锁 ...
- Axure原型制作规范
一. 名词定义: Sitemap 导航图 Widgets 组件 Master 库 Label 控件名 Interactions 交互动作 Annotations 注释 Location and siz ...
- MySQL触发器-条件触发器语法
文章为作者原创,未经许可,禁止转载. -Sun Yat-sen University 冯兴伟 实验4 触发器 )实验目的 掌握数据库触发器的设计和使用方法 )实验内容和要求 定义BEFORE触发 ...
- backup2：数据库还原
数据库还原的操作,分两步进行:第一步,验证(verify)备份文件:第二步,根据备份策略还原数据库: 参考<backup1:开始数据库备份>,备份策略是: 一周一次完整备份,一天一次差异备 ...
- SFTP 命令列表以备查询
Available commands: ascii Set transfer mode to ASCII binary Set transfer mode to binary cd path Chan ...