JavaScript

  • 具体参见JScript.chm、HTML DOM 参考手册.CHM和DHTML 手册.chm

1.first_javascript

<html>
 <head>
  <script language="javascript">
    alert("HelloWorld!");
  </script>
 </head>
 <body>
 </body>
</html>

2.外部应用

<html>
 <head>
  <script language="javascript" src="js/test.js">
  </script>
 </head>
 <body>
 </body>
</html>

 

  • test.js

alert("HelloWorld!");

 

3.javascript-test01

<html>
 <head>
 </head>
 <body>
    <input type="button" value="登录" onclick="alert('用户名为空,请检查!')">
 </body>
</html>

4.javascript-test02

<html>
 <head>
        <script language="javascript">
        var v1="HelloWorld";
        var v2='HelloWorld';
        var v3=55555;
        var v4=12.5;
        var v5;

        alert("v1="+v1);
        alert("v2="+v2);
        alert("v3="+v3);
        alert("v4="+v4);
        alert("v5="+v5);
    </script>
 </head>
 <body>
   
 </body>
</html>

5.ifelse

<script>
  var v =5;
  if (v == 10){
   alert("v=10");
  }else if(v == 20){
  alert("v=20");
  }else{
  alert("其他。。。。");
  }
</script>

6.switch

<script>
  var v =5;
  switch (v){
     case 1:
        alert("v=1");
        break;
     case 2:
        alert("v=2");
        break;
     case 3:
        alert("v=3");
        break;
     case 4:
        alert("v=4");
        break;
     case 5:
        alert("v=5");
        break;
     default:
        alert("其他。。。");
  }
</script>

7.continue

<script language="javascript">
  for(var i=0;i<10;i++){
    if(i % 2 == 0){
        continue;//继续下一次循环
      }
    alert(i);
  }

</script>

8.break

<script language="javascript">
  for(var i=0;i<10;i++){
    if(i > 5){
        alert(i);
        break;//跳出循环,转到p1位置
      }
    alert(i);
  }
  //p1位置

</script>

9.object

<script language="javascript">
    //object为javascript的内置对象

    var p = new Object();
    p.name = "王五";
    p.age = "20";
    alert(p.name+","+p.age);

</script>

10.mathObject

<script language="javascript">
    //Math为javascript的内置对象,可以直接用
    alert(Math.random());
    //给随机数取整
    alert(Math.round(Math.random() * 10));

    alert(Math.round(-10.6));//-11
    alert(Math.round(10.6));//11

    alert(Math.abs(-50.5));//-50.5
</script>

11.DateObject

<script language="javascript">
    var Mydate = new Date();
    alert(Mydate.getYear()+"-"+Mydate.getMonth()+"-"+Mydate.getDate());

</script>

12.ArrayObject.html

<script language="javascript">
    var MyArray = ["a","b","c"];
    for(var i=0;i<MyArray.length;i++){
       alert(MyArray[i]);
    }

    var MyArray1 = new Array(10);
    for(var i=0;i<MyArray1.length;i++){
       MyArray1[i] = i;
    }
    //document打印输出
    for(var i=0;i<MyArray1.length;i++){
       document.write(MyArray1[i]);
    }
    document.write("<p>");
    //join函数应用
    document.write(MyArray1.join("#"));
    document.write("<p>");
    //上述join函数应用也可以这样实现
    var s = "";
    for(var i=0;i<MyArray1.length;i++){
        s+=MyArray1[i]+"#";
    }
    document.write(s.substring(0,s.length-1));
    document.write("<p>");   
    //数组反转
    MyArray1.reverse();
    for(var i=0;i<MyArray1.length;i++){
       document.write(MyArray1[i]);
    }
    document.write("<p>");
    //数组升序排列
    MyArray1.sort();
    for(var i=0;i<MyArray1.length;i++){
       document.write(MyArray1[i]);
    }
    document.write("<p>");


</script>

13.全局变量

<html>
 <head>
        <script language="javascript">
    //全局变量
            var v1="全局变量";
        function myFunction(){
        alert(v1);             
            }
    </script>
 </head>
 <body onload = "myFunction()">
   
 </body>
</html>

14.局部变量

<html>
 <head>
        <script language="javascript">
    //局部变量
           
        function myFunction(){
        var v1="局局变量";
        alert(v1);             
            }
    </script>
 </head>
 <body onload = "myFunction()">
   
 </body>
</html>

15.parseInt_Float

<html>
 <head>
        <script language="javascript">
            var v1 = "20";
        alert(v1 + 10);
            alert(parseInt(v1) + 10);

            var v1 = "3.3";
        alert(v1 + 5);
            alert(parseFloat(v1) + 5);
    </script>
 </head>
 <body onload = "myFunction()">
   
 </body>
</html>

16.自定义对象1

<script language="javascript">
    function Person(){
    }

    var p = new Person();
     p.name = "张三";
     p.age = 20;
    alert(p.name+","+p.age);

</script>

17.自定义对象2

<script language="javascript">
    function Person(name,age){
        this.name = name;
        this.age = age;
    }

    var p = new Person("李四",20);
    alert(p.name+","+p.age);

</script>

18.test_dom

<html>
<head>
<script language="javascript">
  function button_onClick(){
     alert(document.getElementById("userid").value);
  }
</script>
</head>
<body>
   用户名:<input type="text" name="username" id="userid"><p>
   <input type="button" value="保存" onclick="button_onClick()">

</body>
</html>

19.消息提示框

<script language="javascript">

var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。");
if (truthBeTold) {
window.alert("欢迎访问我们的 Web 页!");

else  window.alert("再见啦!");

</script>

 

20.正则表达式
<script language="javascript">
  var s1="dfasdfasfgooasdf";
  //是否存在oo子串
  alert(s1.search(/o{2}/));
 
   var s2="dfasdfasfgOOasdf";
  //是否存在OO子串(大写)
  alert(s2.search(/o{2}/));
  alert(s2.search(/o{2}/i));//i表示忽略大小写
 
  //将所有的oo替换为“中国”
  var s3 = "asdfaooasdfasOOafaooasdfasOOadfdfgoodf";
  var s4 = s3.replace(/o{2}/ig,"中国");//g表示遍历所有oo
  alert(s4);
</script>

21.正则表达式2.html

<script language="javascript">
  var s1="dfasdfasfgooasdf";
 
  var re = new RegExp(/o{2}/i);//创建正则表达式对象
  alert(re.test(s1));   //re.test(string1)返回string1中是否有re字串

</script>

22.简易计算器.html

<html>
 <head>
    <title>简易计算器</title>
    <script language="javascript">
       function button_click(){
         //alert("asdfasdf");
         //alert(document.getElementById("first").value);//获取第一个文本框的数据值
         //alert(parseFloat(document.getElementById("first").value)+parseFloat(document.getElementById("second").value));
         var first = parseFloat(document.getElementById("first").value);
         var second = parseFloat(document.getElementById("second").value);
         var result = null;
       
         switch (document.getElementById("flag").value){
           case "+" :
             result = first + second;
             break;
           case "-" :
             result = first - second;
             break;
           case "*" :
             result = first * second;
             break;
           case "/" :
            if(second==0)
             alert("除数不能为0!");
            else
             result = first / second;
            break;
         }
         //alert(result);  
              
         //document.getElementById("result").value = result;
         document.getElementById("resultspan").innerHTML= result;
       }
    </script>
 </head>
 <body>
   <h1 align="center">简易计算器</h1>
   <hr>
   <div align="center">
   <input type="text" name="first" id="secod">
   <select name="flag" id="flag">
     <option value="+" selected>+</option>
     <option value="-">-</option>
     <option value="*">*</option>
     <option value="/">/</option>
   </select>
   <input type="text" name="second" id="second">
   <input type="button" value="=" onclick="button_click()">
   <!--<input type="text" name="result">-->
   <span id="resultspan"></span>
   </div>
 </body>
</html>

23.简易计算器2.html

<html>
 <head>
    <title>简易计算器</title>
    <script language="javascript">
       function button_click(){
         var first = parseFloat(document.getElementById("first").value);
         var second = parseFloat(document.getElementById("second").value);
         var flag = document.getElementById("flag").value;
         //var result = null;
         eval("var result = " + first + flag + second);
         document.getElementById("resultspan").innerHTML= result;
       }
    </script>
 </head>
 <body>
   <h1 align="center">简易计算器</h1>
   <hr>
   <div align="center">
   <input type="text" name="first" id="secod">
   <select name="flag" id="flag">
     <option value="+" selected>+</option>
     <option value="-">-</option>
     <option value="*">*</option>
     <option value="/">/</option>
   </select>
   <input type="text" name="second" id="second">
   <input type="button" value="=" onclick="button_click()">
   <!--<input type="text" name="result">-->
   <span id="resultspan"></span>
   </div>
 </body>
</html>

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值