JS学习札记_基础篇

JS学习笔记_基础篇

var globe = "全局变量"; //globe是全局变量，不管加不加vartest();function test()//js 方法写法：function(固定)+方法名字{var local = "局部变量"; //local是局部变量//如果在函数中声明时不加var 也会变成全局变量。 js的诡异document.writeln(globe);//将变量值写到页面上document.writeln(local);}document.writeln(globe);document.writeln(local);function test2(){var i = 3;alert(i);i=true;//js是弱类型alert(i);}

with (document) {//后面的 write都是 document对象下的方法，用了with不用挨个 document.write()...write("<ul>");write("<li>hello</li>");write("<li>world</li>");write("<li>hello world</li>");write("</ul>");}

 function member(name, gender) //可以看成构造函数(可以new，生成的都是方法的实例，没有class概念)，也可以看成普通函数 不能指定参数的类型，直接写参数名字   {   this.name = name;   this.gender = gender;   }      function showProperty(obj, objString)   {   var str = "";      for(var i in obj)//遍历对象里面的每个属性,obj 传进来是一个对象   {   str += objString + "." + i + " = " + obj[i] + "<br>";   }      return str;//带返回值   }      var obj = new member("蛋蛋", "男"); //建立对象实例      document.writeln(showProperty(obj,"person"));

 var date = new Date();//Date 内置对象    var day = date.getDay();//0-6 0表示星期天    if(0 == day)    {    day = "日";//星期0 改为星期天    }//date.getMonth()//返回的是0-11 表示月份    //date.getYear()  是减去1900后的    document.writeln("现在时刻： " + (date.getYear() + 1900) + "年 " + (date.getMonth() + 1) + "月" +     date.getDate() + "日" + " 星期" + day + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds())   // document.writeln(date)

 //var fruit = new Array("苹果", "鸭梨", "橙子");        //var fruit = ["苹果", "鸭梨", "橙子"]; //推荐使用,没有new Array() 直接赋值        var fruit = new Array();//数组对象Array JS内置，可自由扩容，里面放的数据类型可以不同    //new Array(); 调用无餐的构造方法，括号可以不写，但是调用有参数的构造方法必须写括号    fruit.push("苹果");//数组可以当作队列或者栈来用，让数组里逐个增加元素，下标也是0开始的    fruit.push("鸭梨");    fruit.push("橙子");    fruit.push("香蕉");    fruit.push("西瓜");    for(var i = 0; i < fruit.length; i++)    {    document.writeln("fruit[" + i + "] = " + fruit[i] + "<br />")    }

 var fruit = ["苹果", "香蕉", "桔子"];     fruit.pop();//从队尾去掉一个元素    with(document)    {    write("<ul>");    write("<li>" + fruit.join() + "</li>");//苹果,香蕉,桔子(默认逗号分割)    write("<li>" + fruit.join(":") + "</li>");//苹果:香蕉:桔子    write("<li>" + fruit.toString() + "</li>");//苹果,香蕉,桔子    write("<li>" + fruit.reverse().join() + "</li>");//桔子,香蕉,苹果    write("<li>" + fruit.valueOf() + "</li>");//桔子,香蕉,苹果（数组引用，前面已经倒序过了）    write("</ul>");    }

 var fruit = new Array(3);    fruit[0] = new Array("苹果", 2);//二维数组    fruit[1] = new Array("桔子", 3);    fruit[2] = new Array("西瓜", 4);    for(var i = 0; i < fruit.length; i++)    {    for(var j = 0; j < fruit[i].length; j++)    {    document.write("fruit[" + i + "][" + j + "] = " + fruit[i][j] + "<br>");    }        document.write("<br>");    }

var str = "javascript";var num = 1234;with(document){write(str.toUpperCase() + "<br>");//转成大写write(num.toString().charAt(2), "<br>", "<br>");//取索引2的字符，任何元素都有toString()write(str.substring(0,4), "<br>");//0(包含)截取到4(不包含)的位置，write方法：逗号和加号都是拼接}

function isEmail(){//var emailValue = document.getElementsByName("email")[0].value;  也可以用下面那种方式取值emailValue = document.getElementById("emailId").value;if(emailValue.indexOf("@") == -1)//返回字符串的索引位置,没有就返回-1{alert("请填写正确的Email地址");}else{alert("ok");}}

function member(name, gender)    {    this.name = name;    this.gender = gender;    }        var m1 = new member("zhangsan", "m");//实例一个对象    var m2 = new member("lisi", "m");    var m3 = new member("wangwu", "f");        with(document)    {    write(m1.name + ":" + m1.gender + "<br>");    write(m2.name + ":" + m2.gender + "<br>");    write(m3.name + ":" + m3.gender + "<br>");    }

function member(name, gender) {this.name = name;this.gender = gender;this.display = display; //指定member对象的display方法,相当于一个成员方法}function display() {var str = this.name + " : " + this.gender;document.writeln(str + "<br>");}var m1 = new member("zhangsan", "f");//定义对象的一种方式var m2 = new member("lisi", "f");//加不加分号都可以,但是最佳实践加上!var m3 = new member("wangwu", "m");m1.display();m2.display();m3.display();

<script type="text/javascript">function mOver(object) {object.color = "red";}function mOut(object) {object.color = "blue";}</script></head>  <body>  <!--   style="cursor:hand  内联样式,优先级最高"   window:整个浏览器对象,里面方法可以直接用 例如alert  onclick="window.location.href='http://www.google.com'" :外面是双引号,里面就用单引号指定  onmouseover:鼠标滑倒上面的时候  onmouseout:鼠标离开的时候  this:font对应的那个元素的对象,就是当前font对象  -->    <font style="cursor:hand"     onclick="window.location.href='http://www.google.com'"     onmouseover="mOver(this)" onmouseout="mOut(this)">欢迎访问</font>

//JS总的就两个定时器  一个 setTimeout//setTimeout在指定时间之后执行指定的动作(JS的函数),JS内置函数function count() {setTimeout(sayhello(), 1000);}function sayhello(){alert("a");}

<input type="button" value="计时开始" onclick="count();">

//第二种定时器   setInterval 每隔一段时间执行动作var sec = 0;var timeId = setInterval("count();", 1000);//每隔1s,执行count(),在页面一加载就执行,因为是成员变量//innerHTML : 获得元素的html文本function count() {document.getElementById("num").innerHTML = sec++;}//关窗口,刷新页面,clearInterval函数  只有这3中能使 Interval终止执行function stopCount() {clearInterval(timeId);//终止定时器,参数:setInterval的返回值}

<font color="red" id="num">0</font>秒钟<input type="button" value="停止" onclick="stopCount();">

<head><script type="text/javascript">function checkPassword(object) {if (object.value.length <= 4) {alert("密码长度过短");object.focus();//把鼠标焦点从新定位到输入域object.select();//将已有的内容选中  firefox不支持}}</script></head><body><!--JS内置对象(基于浏览器的,不同浏览器提供的功能不一样):图像对象  导航对象(window)  窗口对象  屏幕对象  事件对象  历史对象 文件对象  描点对象 连接对象  框架对象  表单对象  位置对象重点: 文件对象  表单对象  -->密码：<!-- onblur:鼠标离开当前输入域 --><input type="password"  onblur="checkPassword(this)"></body>

//点确定就返回真,取消就返回假if (confirm("你想继续么？"))//confirm 内置函数,这函数的返回值决定后续流程{window.location.href = "http://www.google.com";} else {alert("Bye");}

 with(document)  {  write("屏幕设定值<br>");  write("实际高度：" ,screen.availHeight, "<br>");//728  减去任务栏的高度  write("实际宽度：" ,screen.availWidth, "<br>");//1366  write("屏幕区域高度： " , screen.height, "<br>");//768  write("屏幕区域宽度:", screen.width, "<br>");//1366  }

 function getEvent(event)    {    alert("事件类型： " + event.type);    }        document.write("单击...");    //document.onmousedown  整个文档对象 的 鼠标点击事件    document.onmousedown = getEvent;    </script> <input type="button" value="我是一个按钮" id="button1">    <script type="text/javascript"> var v = document.getElementById("button1"); alert(v); v.onclick = clickHandler;//只能写名字 不能加括号 function clickHandler()//IE:方法里不写event参数也行,firefox不行,firefox会生成一个事件对象(名字任意) //IE:用本身产生的对象event(名字固定) { alert(event.type); }

 <head>    <script type="text/javascript">        var timerId;        function loadPage()    {    //setInterval:执行多次只能用setInterval    timerId = setInterval('countDown()', 1000);    }        </script>  </head>    <!-- onload:页面整体结构加载完才执行,下面的countDown() 也加载完毕 所以可以执行 -->  <body onload="loadPage();">        <script type="text/javascript">        var sec = 10;        function countDown()    {    if(sec > 0)    {    document.getElementById("num").innerHTML = sec--;    }    else    {    clearInterval(timerId);    //window下的对象 不用写 window前缀    location.href = "http://www.google.com";    }    }        </script>        <br>    <font id="num" size="7">10</font>秒钟后前往  </body>

<script type="text/javascript">function linkGetter(){//links 属性: 返回当前文档的所有链接//alert(document.links.length + "个搜索引擎");for(var i = 0; i < document.links.length; i++){alert(document.links[i]);}}</script>  </head>    <body>        <h1>常用的搜索引擎</h1>        <a href="http://www.google.com">Google</a><br>    <a href="http://www.baidu.com">Baidu</a><br>    <a href="http://www.yahoo.com">Yahoo</a><br>    <a href="http://www.sogou.com">Sogou</a><br>    <a href="http://www.bing.com">Bing</a><br>        <input type="button" value="Address" onclick="linkGetter();">  </body>

  <head><script type="text/javascript">function moveNext(object, index){if(object.value.length == 4){//form只有5个元素//第四个输入域好后  焦点就在现在的button上面document.forms[0].elements[index + 1].focus();}}function showResult(){//拿到第一个formvar f = document.forms[0];var result = "";for(var i = 0; i < 5; i++){result += f.elements[i].value;}alert(result);}</script>  </head>    <!-- document.forms[0].elements[0].focus();  第一个form 的第一个元素 得到焦点 -->  <body onload="document.forms[0].elements[0].focus();">        <form>        <!--onkeyup:键盘事件  按下松开后触发 -->    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 0);">-    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 1);">-    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 2);">-    <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 3);">        <input type="button" value="显示" onclick="showResult();" >    </form>  </body>

<script type="text/javascript">var today = new Date();var expireDay = new Date();//31天的毫秒var msPerMonth = 24 * 60 * 60 * 1000 * 31;//重新设置时间  当前的时间 加  一个月的时候.  也就是31天后的时间.//cookie保存31天  31天不用重新登陆expireDay.setTime(today.getTime() + msPerMonth);//expireDay.toGMTString(): 返回cookie要求的时间格式.  内置方法//这样就把cookie写到硬盘上了document.cookie = "name=zhang;expires=" + expireDay.toGMTString();document.writeln("cookie已经写到硬盘上了");document.writeln("内容是：" + document.cookie);document.writeln("有效日期是：");document.writeln(expireDay.toGMTString());</script>

//函数的本源是一个对象.//如果此时传两个参数 则一一对应,第二个参数不接收function add(number){ alert(number + 20);}/*  这种写法和上面的写法等价. * 上面的写法会转换成这种. * add  指向对象的引用(函数) *  * 很多框架中都用这种方式定义. * JS中因为没有方法的重载var add = function(number){alert(number);}*/function add(number, number1){alert(number);alert(number1);//传一个参数的时候 会打印:Undefined 类型  值为undefined(Undefined类型只有一种值,类似boolean只有两种)alert(number+20);}/* * 这种写法和上面的写法等价 * 上上的add 的引用就替换成此时的add了. * 两个参数的方法,可以用一个参数调用,一一对应,传一个参数就和第一个位置的参数对应var add = function(number, number1){alert(number + 30);}*/add(10);//只执行最后一个add方法.

<script type="text/javascript">//add(20);//Function对象(F大写):接收参数是不定长的,对于Function对象,所有的参数都是字符串类型,最后一个参数为方法体,前面的为参数  //自定义函数的本质:声明一个Function对象,函数的 名字  指向对象的引用var add = new Function("number", "number1", "alert(number + number1);");//add  指向新的引用var add = new Function("number", "alert(number + 20);");add(10, 30);</script>

function add(number1, number2)//每个函数都有隐式的对象  arguments{alert(arguments.length);//实际赋参的个数.alert(arguments[0]);//实际传的值  与 方法头的形参没关系alert(arguments[1]);alert(arguments[2]);}//add(2, 3, 4);function add2(){//很多框架都通过这种方式 实现重载if(1 == arguments.length){alert(arguments[0]);}else if(2 == arguments.length){alert(arguments[0] + arguments[1]);}else if(3 == arguments.length){alert(arguments[0] + arguments[1] + arguments[2]);}}add2(3);add2(3, 4);add2(3, 4, 5);

  <head><script type="text/javascript">function validate()var num = document.getElementsByName("number")[0];if(num.value.length < 1){alert("输入不能为空！");num.focus();return false;}//判断每一个是否都数字for(var i = 0; i < num.value.length; i++){var param = "0123456789";//param.indexOf 全局函数if(param.indexOf(num.value.charAt(i)) == -1){alert("输入必须为数字");num.focus();return false;}}//parseInt:全局函数if(parseInt(num.value) < 5 || parseInt(num.value) > 15){num.value = 10;}return true;}</script>  </head>    <body>  <!-- onsubmit:提交的时候做检查 -->    <form action="end.jsp" name="form1" method="post" onsubmit="return validate();">   请输入数字 （5——15）<input type="text" name="number"><br>   <input type="submit" value="submit">    </form>  </body>

var value = <%= request.getParameter("number")%>;//看执行时机  tomcat解析jsp的时候把值直接放在var value = 后面  //传递到客户端再执行下面的alertalert(value);function checkAll(){//获得所有复选框var s = document.getElementsByName("check");//获得全选的复选框(就上面那个框)var m = document.getElementsByName("all")[0];//如果上面那个框选中,下面就让全部选中if(m.checked){for(var i = 0; i < s.length; i++){s[i].checked = true;}}else{//上面那个不选 下面都不选for(var i = 0; i < s.length; i++){s[i].checked = false;}}}//基于事件,每单击展开或收缩就产生一个事件function turn(){with(document){//获得按钮var m = getElementById("change");//获得表格对象var n = getElementById("table");if(m.value == "收缩"){//要把表格收起来,//操作的对象.style(属性).对象可用的样式n.style.display = "none";//表格不显示出来m.value = "展开";//把按钮名字改为展开}else{n.style.display = "block";//展开m.value = "收缩";}}}

 <table border="1" align="center" width="60%">        <tr>    <td>    <input type="checkbox" name="all" onclick="checkAll();">全选    </td><td><input type="button" value="收缩" id="change" onclick="turn();"></td>   </tr>        </table>        <% int number = Integer.parseInt(request.getParameter("number")); %>        <table border="1" align="center" width="60%" id="table">        <% for(int i = 1; i <= number; i++)    {%>        <tr>    <td>    <input type="checkbox" name="check">    </td>        <td>    <%= i %>    </td>    </tr>    <%} %>        </table>