JavaScript(JS)的简单使用
一、什么是js(javascript)?
javascript是一种脚本语言,被广泛用于web应用开发,常用来为网页添加各式各样的功能,为用户提供更加流畅的浏览效果。
javascript严格区分大小写。
前端三剑客:html+css+js
html:结构(房子)
css:样式(装修)
js:行为(动态的修改行为和样式:房子的结构和装修想改就改)
使用js的三种写法:
1、在标签内部完成(不常用)
例:(alert("弹窗内容"):出现一个弹窗)
<a href="javascript:alert(0);">点我啊!</a> <p onclick="alert('来啦老弟!')">请点击我!</p>
2、在script标签中完成(注意:script标签可以写在html中的任意位置,但建议写在页面最底部,利于提高用户体验)
<script type="text/javascript"> alert("哈哈哈"); </script>
3、外连式(创建一个js文件,里边写的都是js代码,然后再html中引用)
html文件中引用js文件:
<!-- 因为ha.js文件和咱们这个html文件在同一文件夹,所以路径直接写src="ha.js" --> <script type="text/javascript" src="ha.js"></script>
js文件(后缀为.js的文件):
//js代码就写在这里,如下: //当页面刷新就会弹窗以下弹框 window.onload=function(){ //alert()是一个弹窗 alert("欢迎您的到了!"); }
二、js的特性
1、js的数据类型
js中的数据类型只有三种:number,string,boolean
number:所有数字类型的统称。
string:字符串类型。
boolean:布尔类型(true/false)
2、特殊类型
nan:出现非数字
infinity:除数为0
undefined:未定义
null:空(必须主动赋值才会是null,没有赋值都为undefined)
3、运算符
==:代表普通比较
===:代表全等
" "和undefined表示没有值:null其实是一个值
||:或(注意:在java中,||返回的一定是boolean值,但在js中,返回的是第一个为true的值)
三、具体实例
1、js预编译
js的代码执行顺序是从上往下执行,但在代码执行之前js会事先大概扫描一遍,把所有变量的定义放到最前面(只是定义,不包括值)
<script type="text/javascript"> //js的代码执行顺序是从上往下执行 //但在代码执行之前js会事先大概扫描一遍,把所有变量的定义放到最前面(只是定义,不包括值) var use="23"; console.debug(use); //结果为23 var userna; console.debug(userna); //结果为undefined console.debug(us); var us; //结果为undefined console.debug(username); var username="23"; //结果为undefined console.debug(usern); //直接报错,因为usern没定义 </script>
2、对象三步曲
1、创建对象
2、设置对象的属性和方法:添加,修改,删除
3、获取对象的属性和方法
<script type="text/javascript"> //1、创建对象 //var obj = new object(); var obj = {}; //2.设置对象的属性与方法(.和[]是一样的) //添加属性方法一: obj.name="小王" obj.age =23; obj.say = function(){ console.debug("过来呀!"); } //添加属性方法二: obj["name"]="小王"; obj["age"] =23; obj["say"]= function(){ console.debug("过来呀!"); } /* for...in是用于循环与遍历数组/对象的 数组:key就是下标 对象:key就是对象的属性 */ for(var key in obj){ //key是下标 //输出属性和属性类型 console.debug(obj[key],typeof obj[key]); //如果obj对象的属性类型为方法,就输出 if(typeof obj[key] == "function"){ //输出属性 console.debug(obj[key]); //调用对象中 的方法属性 obj[key](); } } //修改(修改与添加设置写法是一样的) obj.name="小李"; //删除某一个属性 delete obj.age; //3.获取属性和方法 console.debug(obj.name); console.debug(obj.age); console.debug(obj.say); obj.say(); </script>
3、arguments(获取到调用函数时传进去的所有参数)
js内置了很多对象(如:arguments ): 内置对象(js自动为你准备好的)
arguments -> 每次调用方法都会在方法中创建这对象
arguments -> 伪数组(它里面装的就是这个方法的所有参数)
<script type="text/javascript"> /** js中调用函数(方法)和参数无关 js内置了很多对象: 内置对象(js自动为你准备好的) arguments -> 每次调用方法都会在方法中创建这对象 arguments -> 伪数组(它里面装的就是这个方法的所有参数) */ function add(){ //打印每次调用add方法时传的所有参数 console.debug(arguments) var result = 0; for(var i=0;i<arguments.length;i++){ //将传进add方法的参数全部加起来 result += arguments[i]; } return result; } console.debug(add(5)); //5 console.debug(add(5,8)); //13 console.debug(add(5,8,2)); //15 console.debug(add(5,8,2,5)); //20 </script>
4、js中调用函数(方法)和参数无关
注意:调用函数和参数无关,如果出现相同名字的方法,根据js代码从上往下执行的原则,下面的方法会覆盖上面的方法。
返回值:想返回什么直接return 值 进行返回,如果没有return,自动返回undefined。
js中一切都是对象
函数就是方法,方法就是函数
函数:面向过程的说法 ;方法:面向对象的说法
<script type="text/javascript"> //一切都是对象 //函数就是方法,方法就是函数 // 函数:面向过程的说法 方法:面向对象的说法 function say(){ alert(0); } say(); //调用函数必须要加一个括号 var say = new function("a","b","return a+b;"); console.debug(say(4,6)); /** 注意:调用函数和参数无关,如果出现相同名字的方法,根据js代码从上往下运行原则,下面的方法会覆盖上边的方法 返回值:想返回什么直接return 值 进行返回,如果没有return,自动返回undefined */ function say(a,b){ alert(a+b); } console.debug(say(5,6));//控制台打印11 console.debug(say(5));//控制台打印nan,因为第二个参数为undefined console.debug(say(5,6,7));//控制台打印11 say(4,6); </script>
5、动态调用方法
使用.与[]是一个效果(就是说可以用.的都可以用[])
<script type="text/javascript"> //我们拿一个对象的属性,使用.与[]是一个效果(就是说可以用.的都可以用[]) console.debug(window.username); console.debug(window["username"]); //用[]调用方法,称为:动态调用(因为这样写方法名就可以随意更换了,但参数还在) window["say"](5,5); console.debug(window); </script>
6、全局变量
window->我们在外部定义【全局变量:script标签里面,方法外面】的所有的变量以及方法都属于顶层对象,可以直接用window点出来
注意:定义的全局变量请不要使用如:name,close,onclick,onclose........作为名字,它们都是js中的关键字,使用了会把js原有的名字覆盖,会出问题。
查看js的关键字:console.debug(window); 这句代码会在浏览器控制台上打印出js中的关键字
<script type="text/javascript"> var username = "张三"; function say(a,b){ alert(a+b); } console.debug(window); console.debug(username); console.debug(window.username); window.say(5,7); </script>
7、对象的拷贝
<script type="text/javascript"> var obj01 = { name:"小八戒", age:34, email:"xxx@qq.com" } var obj02 = { name:"小悟空" }; //遍历第一个对象,把它的所有属性交给第二个对象 for(var key in obj01){ //判断一个对象是否有这个属性 // hasownproperty()来判断是否已经存在这个属性 if(!obj02.hasownproperty(key)){ obj02[key]= obj01[key]; } } console.debug(obj01) console.debug(obj02) </script>
8、函数也是一个对象
函数也是一个对象,也可以创建属性,还可以在自己基础上再创建方法
<script type="text/javascript"> //函数也是一个对象 function say(){ alert(0); } //say()方法添加name,age,sex,hello()属性 say.name = "haha"; //name是一个只读属性 say.age = 5; say.sex = true; //创建hello()方法 say.hello = function(){ alert("hello...") } console.debug(say); //调用say方法的属性hello()方法 say.hello(); </script>
9、this
this在js中是一个很重要,很常用的属性,谁调用,this就指向谁。
<script type="text/javascript"> var obj01 = { name:"小张", age:12 }; var obj02 ={ name:"小王", age:45 } //谁调用,this就指向谁 var say = function(a,b){ console.debug(a,b); console.debug(this.name+","+this.age); } obj01.hello = say; obj01.hello(); obj02.hello = say; obj02.hello(); //改变this的指向 /** call和apply都可以改变this的指向 call:是可变 参数方案,直接传参 apply:第二个参数必需是一个数组 */ say.call(obj01,3,6); say.apply(obj02,[4,6]) </script>
10、prototype
<script type="text/javascript"> /** prototype:为原生对象扩展一个方法(按照自己需要的格式显示时间) */ date.prototype.format = function(){ console.debug(this) //按照自己需要的格式显示时间 return this.getfullyear()+"-"+(this.getmonth()+1)+"-"+this.getdate(); } var date = new date(); console.debug(date.getmonth()) console.debug(date.getfullyear()) console.debug(date.format()); </script>
11、回调函数
<script type="text/javascript"> /** * 我们可以把一个函数当作另外一个函数的属性传过去,而传过去的这个函数我们把它称之为回调函数 */ /* var i = 0; setinterval(function(){ console.debug(i++); },1000); */ var i=0; function haha(){ console.debug(i++) } //定时器:每过一秒把haha()函数当setinterval()函数的属性传回去再次执行 setinterval(haha,1000); </script>
12、匿名函数
<script type="text/javascript"> /** * 匿名函数就是一个没有名称的函数 它可以改变代码的作用域 jquery $ */ (function(a,b){ console.debug(a+b) })(3,9) </script>
13、闭包
<script type="text/javascript"> //闭包,指的是语法。简单理解就是:函数中可以使用函数之外定义的变量。一种封装特性 var username ="王权富贵"; function say(){ //这里的函数之外的变量指的是username console.debug(username); } //调用函数/方法 say(); </script>
14、计数器
<script type="text/javascript"> (function(){ var result = 0; window.getres = function(){ result++; return result; } })() //让变量result的值只能通过方法修改,无法直接修改 console.debug(getres()); //1 console.debug(getres()); //2 console.debug(getres()); //3 console.debug(getres()); //4 console.debug(getres()); //5 </script>
15、事件监听
<!doctype html> <html> <head> <meta charset="utf-8"> <title>事件监听测试</title> <script type="text/javascript" src="jquery/jquery-1.11.2.js"></script> <script type="text/javascript"> $(function(){ //"click.qing":给这个点击事件取一个名叫qing $("#mybtn").on("click.qing",function(){ console.debug("明天天晴!!!"); }) $("#mybtn").on("click.feng",function(){ console.debug("明天有风!!!"); }) $("#mybtn").on("click.guang",function(){ console.debug("明天逛街!!!"); }) //取消逛街这个方法 $("#mybtn").off("click.guang"); }) </script> </head> <body> <button id="mybtn">点我有惊喜哦!!!</button> </body> </html>
16、jquery继承
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script> <script type="text/javascript"> $(function(){ var obj = {tel:"1836****000",sex:true}; var obj1 = {name:"达康书记",age:100}; var obj2 = {}; //把第一个对象的属性,交给第二个对象 //把后面的对象的属性,交给前面 $.extend(obj2,obj1,obj); console.debug(obj2); }) </script>
17、jquery自定义插件
<!doctype html> <html> <head> <meta charset="utf-8"> <title>自定义插件</title> <script type="text/javascript" src="jquery/jquery-1.11.2.js"></script> <script type="text/javascript"> $.fn.changecolor = function(){ //.hover():鼠标移上来与移出去的事件 this.hover( function(){ //鼠标移上来,class属性上再添加一个名字:youdiv $(this).addclass("youdiv"); }, function(){ //鼠标移出去,class属性上添加的名字删除 $(this).removeclass("youdiv"); } ) } $(function(){ //调用自定义的插件 $("#mydiv").changecolor(); }) </script> <style type="text/css"> .mydiv{ width:100px; height:100px; background: red; } .youdiv{ background: blue; } </style> </head> <body> <div id="mydiv" class="mydiv"></div> </body> </html>
下一篇: 浅谈网络炒作创意的来源