Java Script初探

最新推荐文章于 2024-05-02 21:11:04 发布

XuZhenhao0609

最新推荐文章于 2024-05-02 21:11:04 发布

阅读量679

点赞数 1

分类专栏： Java Script笔记文章标签： JavaScript html

本文链接：https://blog.csdn.net/sumsear/article/details/54587674

版权

Java Script笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.JavaScript:写入HTML输出

示例：

      document.write("<h1>thisis a heading</h1>");

注意：document.write()仅仅向文档输出写内容。

如果在文档已完成加载后执行document.write，整个 HTML 页面将被覆盖

2.alert();函数对事件作出反应

在JavaScript中并不常用，通常用于对代码的测试。

示例：

      <button type="button" οnclick='' alert('welcome!’)/>点击弹出对话框</button

3.JavaScript：改变HTML的内容

示例：

       X  = document.getElementById("myId"); <!--通过ID获得元素-->
       X.innerHTML = “helloworld”; <!--改变内容-->

4.JavaScript：改变HTML图像

示例：

      <script>

       functionimageChange(){

          element =document.getElementById("myimage");

          If(element.src.match("bulbon")){<!--判断src中是否有bulbon字段，如果有就返回true-->

          element.src = "i/eg_bulboff.gif";<!--设置路径-->

          }else{<!--如果路径中没有bulbon字段就返回false-->

          element.src = "i/eg_bulbon.gif";<!--设置路径-->

          }

       }

      </script>

      <body>

      <img  id = "myimage" onclick = "imageChange()" src= "i/eg_bulbon.gif">

      </body>

5.JavaScript：改变HTML样式

示例：

      <script>

      function changeStyle(){

      element = document.getElementById("myStyle");

      element.style.color="#ff0000";<!--改变id为myStyle的元素的颜色-->

      }

      </script>

      <body>

      <p id = "myStyle">测试JavaScript改变HTML样式</p>

      <button type = "button" onclick = "changeStyle()"></button>

      </body>

6.JavaScript：验证用户的输入

示例：

      <script>

      function verifIcation(){

      var x;

      x = document.getElementById("myInput").value;

         If(x == "" || isNaN(x)){

           Alert("您输入的不是数字");

         }<!--判断id为myInput的输入框元素是否为数字-->

      }

      </script>

      <body>

         <input id = "myInput" type = "text">

         <button type = "button" onclick = "verifIcation()"></button>

     </body>

7. JavaScript的重新声明

   var carname="test";

   var carname;

   Alert(carname);//显示的值依旧是test

8.JavaScript：动态类型

JavaScript 拥有动态类型。这意味着相同的变量可以用作不同的类型：

示例：

  var x; //值为undefined
  var x = 6; //值为数字
  var x = "test"; //值为字符串

9.JavaScript：数字

JavaScript 只有一种数字类型，数字类型可以带小数点，也可以不带。

10 JavaScript：布尔

JavaScript 布尔（逻辑）只能有连哥哥值： true 或 false

11.JavaScript：数组

示例：

  //示例1
   var cars=new Array();
   cars[0]="Audi";
   cars[1]="BMW";
   cars[2]="Volvo";
   //示例2
   var cars = new array("Audi","BMW","Volvo");
   //示例3
   var cars = ["Audi","BMW","Volvo"];

12.JavaScript：对象

示例：

   var person = {name:"zhangsan", age:18, sex:"man"}
   //取值方式
   1. name = person.name;
   2. name = person["name"]

13.JavaScript：new

示例：

  var carname = new String; //声明为字符串类型

  var x = new Number; //声明为数字类型

  var y = new Boolean; //声明为布尔类型

  var cars = new Array; //声明为数组

  var person = new Object; // 声明为对象

14.JavaScript：函数

示例：

  function functionName(){};

注意：

1. JavaScript对大小写非常敏感，关键词 function 必须要小写，并且必须以与函数名称相同的大小写来调用函数。

2.返回和推出方式： return

3.在JavaScript函数中内部声明的变量是局部变量，外部声明的变量是全局变量。

4.变量的生命周期：

生命周期从声明开始；

局部变量在函数执行结束后被删除；

全局变量在页面关闭后被删除；

如果给一个未声明的变量赋值，该变量自动成为全局变量，即使在函数的内部；

示例： carname = "Audi";

15.JavaScript：运算符

JavaScript的运算符分为算术运算符和赋值运算符；

16.JavaScript：for循环

示例：

  var a = new array(1,2,3,4,5,6);
  For(i=0;a.lengh;i++){
     document.write(a[i] + "<br>");
  }

不同形式的循环：

1. for — 循环代码块一定的次数；

2. for/in — 循环遍历对象的属性；

示例：

    var person={fname:"John",lname:"Doe",age:25};
    for (x in person){
        txt=txt + person[x];
    }

3. while — 当指定条件为 true 时循环指定的代码块；

    while(条件){

          //需要执行的代码 

         }

4. do/while — 同样当指定的条件为 true 时循环指定的代码块；

    do{
          //需要循环的代码

       }while(条件)；

注意：该循环至少会执行一次，即使条件为false，隐藏代码块会在条件被执行前执行；

关键字：

continue：跳过本次循环，执行下一次循环；

Break：跳出当前循环；

17. JavaScript：标签

如果需要对一个JavaScript预计进行标记，在其之前加上冒号 ":" 标记后可以用break跳转到标记的位置；

示例：

   cars=["BMW","Volvo","Saab","Ford"];
   list:
   {
     document.write(cars[0] + "<br>");
     document.write(cars[1] + "<br>");
     document.write(cars[2] + "<br>");
     break list;
     document.write(cars[3] + "<br>");
     document.write(cars[4] + "<br>");
     document.write(cars[5] + "<br>");
   }

显示结果：到Saab后就不再显示了。

18. JavaScript：异常捕获 try catch throw

示例： try catch

        try{
            //在这里运行代码
        }catch(err){
           //在这里处理错误
        }

示例：throw

       <script>
       function myFunction(){
       try{ 
          var x=document.getElementById("demo").value;
          if(x=="")    throw "值为空";
          if(isNaN(x)) throw "不是数字";
          if(x>10)     throw "太大";
          if(x<5)      throw "太小";
       }catch(err){
          var y=document.getElementById("mess");
          y.innerHTML="错误：" + err + "。";输入值为空时打印结果“错误：值为空。”
        }
       }
      </script>

      <input id="demo" type="text">

      <button type="button" οnclick="myFunction()">测试输入值</button>

      <p id="mess"></p>

19.通过ID查询Html元素

var x = document.getElementById("myId");

var y =x.getElementsByTagName("P");

释义：1.获得id=myId下的元素，2.查找id=myId的元素下所有<p>

20.JavaScript:事件

1.onclick

2.onload、onunload

2.1 onload和 onunload 事件会在用户进入或离开页面时被触发。

2.2 onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

2.3 onload和 onunload 事件可用于处理 cookie。

      //示例：
      <body  οnlοad="checkCookies()">

3.Onchange

示例：当用户改变输入字段的内容时，调用upperCase() 函数。

4.onmouseover、onmouseout

示例：当鼠标在元素上方或离开时出发函数；

5.onmousedown、onmouseup

示例：onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

21. JavaScript：添加（HTML元素）

示例：

   <div id="div1">
      <p id="p1">这是一个段落。</p>
      <p id="p2">这是另一个段落。</p>
   </div>

   <script>
      //创建一个新的<p>元素para
      var para=document.createElement("p");
      //创建一个新的文本节点node
      var node=document.createTextNode("这是新段落。");
      //将文本节点node加入到<p> 元素para中
      para.appendChild(node);
      //通过id获得元素
      var element=document.getElementById("div1");
      //将<p>元素para添加至id=div1的元素中
      element.appendChild(para);
   </script>

22.JavaScript删除（HTML元素）

示例：

        //（方法一）
        <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
        </div>
        <script>
           //获得要删除的节点的父类元素       
           var parent=document.getElementById("div1");
           //获得要删除的元素
           var child=document.getElementById("p1");
           //删除元素
           parent.removeChild(child);
        </script>

       //（方法二）
        var child = document.getElementById("p1");
        child.parentNode.removeChild(child);