JS的基本使用

来源：互联网发布：java concurrent用处编辑：程序博客网时间：2024/05/04 02:25

1、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html>   <head>   <!-- 函数的定义与调用 -->     <script type="text/javascript">       function f1(){         alert("hello javascript!!");       }          </script>   </head>       <body>      <a href="#" onclick="f1()">click me</a>   </body></html>

2、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!-- 变量的定义与使用 --><html>   <head>     <script type="text/javascript">       function f2(){       var a = 100;       //a = '100';              alert(typeof a);//打印变量阿德类型       }     </script>   </head>   <body>     <a href="" onclick="f2()">click me</a>   </body></html>

3、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!-- 比较运算符的使用--><html> <head>   <script type="text/javascript">      function f3(){       /**          == 比较的是看值是否相等       */        var str1 = '123';        var str2 = '123';                if(str1 == str2){           alert("str1 is equal to str2");        }                var a = 123;        var b = '123';        if(a == b){          alert("a is equal to b");        }else{          alert("a is not equal b");        }                        /*                        ===  先判断的是类型是否相等,然后在判断值是否相等        */        var i1 = 123;        var s2 = '123';                if(i1 === s2){          alert("i1 is equal to s2");        }else{          alert("i1 is not equal to s2");        }      }   </script> </head>  <body>   <a href="" onclick="f3()">click me</a>  </body></html>

4、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html> <head>   <script type="text/javascript">      function f4(){       //var a = null;       alert(typeof null);//null 的类型是object              var a;       alert(typeof a);//一个变量如果只声明,但是不赋值,那么它的类型还是undefined       }   </script> </head>  <body>   <a href="" onclick="f4()">click me</a>  </body></html>

5、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html> <head>   <script type="text/javascript">      function f5(){        /*           需要注意的是if()语句里面的判断逻辑:        1)非空字符串、不为0的字符串都是true        2)null、undefined 为false        */        //var flag = 'hello';        //var flag = '';        //var flag = 12;        //var flag = 0;        var flag = null;                if(flag){          alert(true);        }else{          alert(false);        }            }   </script> </head>  <body>   <a href="" onclick="f5()">click me</a>  </body></html>

6、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!-- 类型转换 --><html> <head>   <script type="text/javascript">      function f6(){         /*           string ---> number                             主要是通过以下几个函数:           parseInt(str),           parseFloat(str),           isNaN(str);         */                  /*         var s = '123';         var s1 = parseInt(s) + 100;//parseInt(s),把s当成整数进行解析         alert(typeof s1 + ' : ' + s1);  //最后s1的值为223                   */                  /*         var s = '125.04';         var s1 = parseInt(s) + 100;         alert(typeof s1 + ' : ' + s1);                  这时候打印出来的结果是225         */                  /*         var s = '125.04';         var s1 = parseFloat(s) + 100;         alert(typeof s1 + ' : ' + s1);//这时候返回的结果是225.0000004         */                  var s = '125a';         if(isNaN(s)){//isNaN(s) : 判断字符串s是否只一个数字           alert('s不是一个数字');          }else{           alert('s是一个数字');         }               }   </script> </head>  <body>   <a href="" onclick="f6()">click me</a>  </body></html>

7、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!-- 类型转换 --><html> <head>   <script type="text/javascript">     /*      number ---> string               主要是通过: .toString()来实现的     */     function f7(){        var n1 = 123;        var s1 = n1.toString();//js在执行时,会自动将number类型转换成其对应的包装类型Number,然后调用相应的方法        alert(typeof s1 + ' : ' + s1);        alert(s1+100);      }   </script> </head>  <body>   <a href="" onclick="f7()">click me</a>  </body></html>

8、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!-- 字符串的常用属性和方法--><html> <head>   <script type="text/javascript">     function f8(){        var str = 'abcde';        alert(str.length); //str.length: 获取字符串的长度        alert(str.substring(1,3));//[1,3) ,索引从0开始                     }   </script> </head>  <body>   <a href="" onclick="f8()">click me</a>  </body></html>

9、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!-- 字符串中正则表达式的几个应用--><html> <head>   <script type="text/javascript">     function f8(){        var str = 'abc12de12345asfasd1234';        var reg = /[0-9]+/g;        //alert(typeof reg); JS在执行时,会把/[0-9]+/g转换成一个RegExp对象,g表示搜索整个字符串,i表示忽略大小写                //alert(str.match(reg));//输出的结果是12,12345,1234                var reg2 = /[0-9]+/;        //alert(str.search(reg2));//返回第一次匹配的索引                alert(str.replace(reg,'888'));//将str中符合reg规则的字符串都转换成888             }   </script> </head>  <body>   <a href="" onclick="f8()">click me</a>  </body></html>

10、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!-- 一为数组创建与使用--><html> <head>   <script type="text/javascript">     function f10(){        //第一种创建数组的方式: 使用 new Array()        var arr = new Array();        arr[0] = 1;        arr[2] = '1bc';        arr[10] = 'haha';        //alert(arr.length); //输出 11        //alert(arr[9] + ' , ' + arr[10]); //输出的结果是undefined , haha                var arr1 = [];        arr1[3] = 2;        //alert('arr2.length: ' + arr1.length);//输出结果: 4                var arr2 = [1,false,'abs'];        arr2[5] = 'helloworld';        alert('arr2.length: ' + arr2.length);//输出结果: 6        alert(arr2[5]);//输出结果: helloworld             }   </script> </head>  <body>   <a href="" onclick="f10()">click me</a>  </body></html>

11、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!-- 二维数组创建与使用--><html><head><script type="text/javascript">function f11() {var arr = new Array();//二维数组的定义.注意这里写成new Array也是可以的(即省略Array后面的小括号)arr[0] = [ 1, 11, 111 ];arr[1] = [ 2, 3, 4, 5 ];arr[2] = [ 6, 7, 8, 9, 10, 11 ];for ( var i = 0; i < arr.length; ++i) {for ( var j = 0; j < arr[i].length; ++j) {alert(arr[i][j]);}}}</script></head><body><a href="" onclick="f11()">click me</a></body></html>

12、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!-- 数组的常用方法--><html><head><script type="text/javascript">function f12() {var arr = ['b','c','a','d'];//alert(arr.toString());//输出b,c,d,a//alert(arr);//结果和上面是一样的var arr1 = ['1','3','2','4'];//alert(arr.concat(arr1));//b,c,a,d,1,3,2,4//alert(arr1);//1,3,2,4//alert(arr1.reverse());//4,2,3,1//alert(arr1.join('|'));//1|3|2|4//alert(arr1.slice(1,4));//输出数组中的[1,4)的元素var arr2 = [111,22,3,99,100];//alert(arr2.sort());//默认按照字典序进行排序alert(arr2.sort(function(t1,t2){//这时候从大到小进行排序.所传的对象是函数对象     return t2-t1;}))}</script></head><body><a href="" onclick="f12()">click me</a></body></html>

13、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html><head><script type="text/javascript"><!-- 全部变量与局部变量-->var i = 100;function f13() {    var i = 1000;alert(i);}</script></head><body><a href="" onclick="f13()">click me</a></body></html>

14、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html><head><!-- dom操作(重点)查找方式创建节点添加节点删除节点改变样式 --> <script type="text/javascript">function f14(){   var obj = document.getElementById('d1');   //alert(obj.innerHTML);//通过innerHTML可以读写一个节点的html内容   obj.innerHTML='i love zzt';}</script></head><body><a href="javascript:;" onclick="f14()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->                 <div id="d1">          <span>hello javascript</span>        </div> </body></html>

15、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html><head><!-- dom操作(重点)查找方式创建节点添加节点删除节点改变样式 -->  <!-- 改变文本框的内容 --><script type="text/javascript">function f15(){   var obj = document.getElementById('username');   alert(obj.value);//通过value属性可以读写一个节点的value值   obj.value = 'i love zzt';}</script></head><body>    <input id="username" type="text"/> <a href="javascript:;" onclick="f15()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->                </body></html>

16、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html><head><!-- dom操作(重点)查找方式创建节点添加节点删除节点改变样式 -->  <!-- 使用js实现求解两数之和 --><script type="text/javascript">function f16(){   var opp1 = document.getElementById('opp1');   var opp2 = document.getElementById('opp2');   var result = document.getElementById('result');      var o1 = parseInt(opp1.value);   var o2 = parseInt(opp2.value);   result.value = o1+o2;}</script></head><body>    <input id="opp1" type="text"/>    <input id="opp2" type="text"/>    <input id="result" type="text"/>     <a href="javascript:;" onclick="f16()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->                </body></html>

17、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html><head><!-- dom操作(重点)查找方式创建节点添加节点删除节点改变样式 -->  <!-- 使用js实现求解两数之和 --><script type="text/javascript">function f17(){   var opp1 = Math.random();//产生[0,1)的随机数   var opp2 = Math.floor(13.68);//向下取整. 13   var opp3 = Math.ceil(13.68);//向上取整 14   Math.c   alert(opp1);   alert(opp2);   alert(opp3);   alert(Math.random() * 33);}</script></head><body>    <a href="javascript:;" onclick="f17()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->                </body></html>

2 0