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的案例会放到这里。希望能到大家!!!