JavaScript进阶篇笔记(一)

来源：互联网发布：什么是aso优化编辑：程序博客网时间：2024/04/30 11:12

1. JavaScript基础

1.1 JavaScript能做什么？

增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)
实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等

1.2 JavaScript关键字

1.3 JavaScript数组

<!DOCTYPE  HTML><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>数组</title><script type="text/javascript"> //创建数组 var myarr=["*","##","***","&&","****","##*"]; myarr[7]="**"; //显示数组长度 //alert(myarr.length); //将数组内容输出，完成达到的效果。document.write(myarr[0]+"<br>"+myarr[7]+"<br>"+myarr[2]+"<br>"+myarr[4])</script></head><body></body></html>

1.4 JavaScript函数

<!DOCTYPE  HTML><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>函数</title><script type="text/javascript">//定义函数function fun(x,y){    if(x>=y){        return x;    }else{        return y;    }}var v1=fun(5,4);var v2=fun(6,3);//调用函数，实现下面两组数中，返回较大值。  document.write(" 5 和 4 的较大值是:"+v1+"<br>");  document.write(" 6 和 3 的较大值是:"+v2 ); </script></head><body></body></html>

2. JavaScript事件

2.1 主要事件

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 鼠标经过事件 </title><script type="text/javascript">    function message(){      confirm("请输入密码后，再单击确定!"); }</script></head><body><form>密码:<input name="password" type="password" ><input name="确定" type="button" value="确定" onmouseover="message()"/><input type="button" value="onclick事件测试" onclick="message()"/></form></body></html>

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title> 内容选中事件 </title><script type="text/javascript">  function message(){    alert("您触发了选中事件！"); }</script>    </head><body>  <form>  个人简介：<br>   <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>  </form></body></html>

<script type="text/javascript">//事件会在页面加载完成后，立即发生，同时执行被调用的程序。//加载页面时，触发onload事件，事件写在<body>标签内。  function message(){    alert("加载中，请稍等…"); }</script>    </head><body onload="message()">  欢迎学习JavaScript。</body>

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title> 卸载事件 </title><script type="text/javascript">      //onbeforeunload在关闭时弹框，onunload不弹     window.onbeforeunload = onunload_message;        function onunload_message(){           alert("您确定离开该网页吗？");       }   </script>   </head><body>  欢迎学习JavaScript。</body></html>

<!DOCTYPE html><html> <head>  <title> 事件</title>    <script type="text/javascript">   function count(){    //获取第一个输入框的值    var v1=document.getElementById("txt1").value;    //获取第二个输入框的值    var v2=document.getElementById("txt2").value;    //获取选择框的值    var v3=document.getElementById("select").value;    //获取通过下拉框来选择的值来改变加减乘除的运算法则    var v4;    //switch    switch (v3) {        case "+": v4=parseInt(v1)+parseInt(v2); break;        case "-": v4=parseInt(v1)-parseInt(v2); break;        case "*": v4=parseInt(v1)*parseInt(v2); break;        case "/": v4=parseInt(v1)/parseInt(v2); break;      }    //设置结果输入框的值     document.getElementById("fruit").value=v4;   }  </script>  </head>  <body>   <input type='text' id='txt1' />    <select id='select'>        <option value='+'>+</option>        <option value="-">-</option>        <option value="*">*</option>        <option value="/">/</option>   </select>   <input type='text' id='txt2' />    <input type='button' value=' = ' onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果-->    <input type='text' id='fruit' />    </body></html>

2. JavaScript内置对象

2.1 什么是对象？

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：

数组对象的方法：

//数组对象var myarray=new Array(6);//定义数组对象var myl=myarray.length;//访问数组长度length属性//concat方法,在数组myarr1后面连接数组myarr2document.write(myarr1.concat(myarr2));//join方法，把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。结果：86-010-84697581var myarr1= new Array("86","010")var myarr2= new Array("84697581");var myarr3= myarr1.concat(myarr2);document.write(myarr3.join("-"));//reverse方法，颠倒数组元素的顺序。结果是：你,爱,我var myarr1= ["我","爱","你"];document.write(myarr1.reverse());//slice方法，从已有的数组中返回选定的元素，含头不含尾var myarr1= ["我","爱","你"];document.write(myarr1.slice(1,3));//爱，你//sort方法,对数组降序排序<script type="text/javascript">   function sortNum(a,b) {       return b-a;   }var myarr = new Array("80","16","50","6","100","1");document.write(myarr.sort(sortNum));</script>//字符串对象var mystr="Hello world!";//创建一个字符串var request=mystr.toUpperCase(); //使用字符串对象方法document.write( mystr.charAt(mystr.length-1));//返回指定位置的字符//字符串对象mystr中，o字母第二次出现的位置索引document.write(mystr.indexOf("o",mystr.indexOf("o")+1));//split方法，在mystr中的-字符出分割document.write(mystr.split("-")+"<br />");//substring方法，输入开始和结束的索引，提取字符串document.write(mystr.substring(0,5)//substr方法，输入开始位置索引和长度，提取指定长度的字符串document.write(mystr.substr(0,5)//日期对象var myDate=new Date();var myDate2=new Date(2016,7,22);var myDate3=new Date(Jul 22,2016);set/getDate();set/getFullYear();set/getYear();set/getMonth();set/getHours();set/getMinutes();set/getSeconds();set/getTime();//得到星期var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];  document.write("今天是：" + weekday[mydate.getDay()]);//推迟时间document.write("当前时间："+mydate+"<br>");mydate.setTime( mydate.getTime()  + 2* 60 * 60 * 1000);document.write("推迟二小时时间：" + mydate);

2.2 Math对象

注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。
属性：

方法：

//ceil方法,向上取整，向下取整floor()document.write(Math.ceil(3.3));//round方法，四舍五入document.write(Math.round(3.3)+ "<br>");//random方法，返回区间[0,1)中的一个随机数document.write(Math.round((Math.random())*10));

 var mydate = new Date();  var weekend = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六",];  document.write(mydate.getFullYear()+"年"+mydate.getMonth()+"月"+mydate.getDate()+"日 "+weekend[mydate.getDay()]);

0 0