一篇快速入门JavaScript

js概述

javascript语言诞生主要完成页面的数据验证。
因此它运行在客户端，需要运行浏览器来解析js代码
最早名为LiveScript
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

js与html结合方式

• js与html代码的结合方式一
  在head标签中，或者在body中，使用script来书写js代码

<script type="text/javascript">
      /*
      *alert是js提供的一个警告框函数
      *它可以接受 任意类型的参数，这个参数就是警告框的提示信息
      */
       alert("hello javaScript!");
   </script>

• js与html代码的结合方式二
  使用script标签引入 单独的js代码文件

//引入外部的js文件
    <script type="text/javascript" src="js1.js"></script>

注意上面的注释！即 js 中的格式。是不是和Java一样。

js数据类型

javaScript的数据类型
    数值类型     number
    字符串类型   string
    对象类型     object
    布尔类型     boolean
    函数类型     function
   js中特殊的值：
            undefined   未定义，所有js变量为赋于初始值的时候，默认值就是undefined
            null        空值
            NAN         全称是：Not a Number。非数字。非数值
   js定义变量格式：
            var变量名;
            var变量名 = 值;
    <script type="text/javascript">
        var i;
        alert(i);
        i = 12;
        alert(typeof(i)); //number
        i = "abc";
        alert(typeof(i)); //string

        var a = 12;
        var b = "abc";
        alert(a * b); //NaN 非数字非数值
    </script>

js的关系运算

什么加减乘除，自增自减都是和Java 或 C 是一样的。
下面是js特有的

关系运算
    等于：     ==      等于是简单的作字面值的比较
    全等于：   ===      除了作字面值的比较，还会比较两个变量的数据类型
    <script type="text/javascript">
        var a = "12";
        var b = 12;

        alert(a == b); //true
        alert(a === b); //false
    </script>

js的逻辑运算

且运算：    &&
    或运算：    ||
    取反运算：   ！

    在js中，所有的变量都可以作为一个boolean类型的变量使用
    0、null、undefoned、“”（空串）都认为是false
    <script type="text/javascript">
        var a = 0;  		//输出为假
        var b = null; 		//输出为假
        var c = undefined;  //输出为假
        var d = "";			//输出为假
        if(d){
            alert("为真");
        }else{
            alert("为假");
        }
    </script>

    && 且运算
    有两种情况：
    1.当表达式全为真。返回最后一个表达式的值
    2.当表达式中，有一个为假的时候，返回第一个为假的表达式的值

    || 或运算
    1.当表达式全假,返回最后一个表达式的值
    2.只要有一个表达式为真,就返回第一个为真的表达式的值

    && 和 || 运算都有短路
   

且运算和或运算需要注意！！！

js数组

<script type="text/javascript">
        /*数组
        * 格式:
        *   var 数组名 = [] //空数组
        *   var 数组名 = [1,'abc',true] //定义数组同时赋值
        * */
        var arr = [];
        alert(arr.length); //0
        arr[0] = 12;
        alert(arr[0]); //12
        //js中只要通过下标赋值,最大下标值,就会自动给数组扩容
        arr[2] = "abc";
        alert(arr.length); //3
        alert(arr[1]); //undefined
        //遍历
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i]);
        }
    </script>

函数定义

js函数定义
    一.使用function关键字定义函数
          格式:
          function 函数名(形参列表){
                函数体
          } 
          
       function fun() {
            alert("无参函数");
        }
        fun();
        //有参函数
        function fun2(a,b) {
            alert("有参函数,a=" + a + ",b=" + b);
        }
        fun2(12,"abc");
        //有返回值的函数
        function sum(num1,num2) {
            var result = num1 + num2;
            return result;
        }
        alert(sum(12,4));
---------------------------------------------
    二.第二种方式
          格式:
          var 函数名 = function(参数列表){
                函数体
          }

       var fun = function () {
            alert("无参函数");

        }
        // fun();
        var fun2 = function (a,b) {
            alert("有参函数,a=" + a + ",b=" + b);
        }
        // fun2(12,"abc");
        var fun3 =function (num1,num2) {
            return num1+num2;
        }
        alert(fun3(12,4));

js不允许重载,如有就会直接覆盖掉上一次的定义
arguments：隐形参数
它到底是什么？这个要这么说，假如你定义了一个无参函数

function fun() {
           alert("无参函数");
       }

但是有用户就是乱呐，非得传参：fun(12，“abc”); Java种这样肯定不行。但是在JavaScript种不会报错。而且还能正常得到用户传的参数，怎么弄。

arguments[0] //完全按操作数组的手法来就行。

但是，arguments 是 对象类型哦。

函数定义

js中的自定义对象
    object形式的自定义对象：
        var 变量名 = new Object;       //对象实例(空对象)
        变量名.属性名 = 值;            //定义一个属性
        变量名.函数名 = function(){}  //定义一个函数
    对象的访问：
        变量名.属性名 / 函数名();
    {}形式的自定义对象：
        var 变量名 = {     //空对象
            属性名 : 值,
            属性名 : 值,    //定义属性
            函数名 : function(){}  //定义函数
        };
--------------------------------------------------        
        <script type="text/javascript">
         var obj = new Object();
         obj.name = "kaka1";
         obj.age = 18;
         obj.fun = function () {
             alert("姓名：" + this.name + " 年龄：" + this.age);
         }
         obj.fun();

         var obj2 = {
             name : "kaka2",
             age : 12,
             fun : function () {
                 alert("姓名：" + this.name + " 年龄：" + this.age);
             }
         }

         obj2.fun();
     </script>

事件

js中的事件
    1.事件是电脑输入设备与页面惊醒交互的响应。
    2.常用的事件：
        onload      加载完成事件          页面加载完成后，常用于做页面js代码的初始化
        onclick     单击事件              常用于按钮的点击响应操作
        onblur      失去焦点事件          常用于输入框失去焦点后验证其输入内容是否合法
        onchange    内容发生改变事件      常用于下拉列表和输入框内容发生改变后的操作
        onsubmit    表单提交事件          常用于表单提交前，验证所有表单项是否合法
    3.事件的注册又分为静态注册和动态注册
        告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或绑定。
      1）静态注册：
        通过html标签的事件属性直接赋于事件响应后的代码
      2）动态注册：
        指通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}
        这种形式赋于事件响应后的代码
        步骤：
            1.获取标签对象
            2.标签对象.事件名 = function(){}

onload事件

<script type="text/javascript">
        //onload事件的方法
        function f() {
            alert('静态注册onload事件');
        }

        //onload事件动态注册 写法固定
        window.onload = function () {
            alert("动态注册onload事件");
        }

    </script>
    //body中这样写
<body onload="f()">

onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function f() {
            alert("静态注册onclick事件");
        }

        //动态注册onclick事件
        window.onload = function () {
        //1.获取标签对象
        var btnObj = document.getElementById("btn01");
        //2.标签对象.事件名 = function(){}
        btnObj.onclick = function () {
            alert("动态注册onclick事件");
        }
        }
    </script>
</head>
<body>
<!--静态注册onclick事件-->
    <button onclick="f()">按钮1</button>
<!--动态注册onclick事件-->
    <button id="btn01">按钮2</button>
</body>
</html>

onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册onblur事件
        function f() {
            //console控制台对象,log打印方法
            console.log("静态注册onblur事件");
        }
        //动态注册onblur事件
        window.onload = function () {
            //1.获取标签对象
            var psdObj = document.getElementById("passwd");
            //2.通过标签对象.事件名 = function(){};
            psdObj.onblur = function () {
                console.log("动态注册onblur事件");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="f()"><br/>
    密 码：<input type="password" id="passwd"><br/>
</body>
</html>

onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function f() {
            alert("静态注册onchange事件");
        }

        window.onload = function () {
            var seleObj= document.getElementById("sele1");
            seleObj.onchange = function () {
                alert("动态注册onchange事件");
            }
        }
    </script>
</head>
<body>
<!--静态注册onchange事件-->
    请选择：
    <select onchange="f()">
        <option>--城市--</option>
        <option>北京</option>
        <option>上海</option>
        <option>西安</option>
    </select>
<!--动态注册onchange事件-->
    请选择：
    <select id="sele1">
        <option>--城市--</option>
        <option>北京1</option>
        <option>上海2</option>
        <option>西安3</option>
    </select>
</body>
</html>

onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态
        function f() {
            //验证表单是否合法，如不合法需阻止提交 return false
            alert('静态注册onload事件');
            return false;
        }
        window.onload = function () {
            var subObj = document.getElementById("sub");
            subObj.onsubmit = function () {
                alert('动态注册onload事件');
                return false;
            }
        }
    </script>
</head>
<body>
<!--                                              要阻止，此处 return 不可少-->
    <form action="http://localhost:8080" method="get" onsubmit="return f()">
        <input type="submit" value="静态注册"/>
    </form>

    <form action="http://localhost:8080" method="get" id="sub">
        <input type="submit" value="动态注册"/>
    </form>
</body>
</html>

DOM

DOM模型
    1.DOM全称是Document Object Model 文档对象模型
    	把HTML文档中的标签，属性，文本，转换成对象来管理
    2.Document对象的理解:
	    第一点: Document 它管理了所有的HTML文档内容。
	    第二点: document它是一种树结构的文档。有层级关系。
	    第三点:它让我们把所有的标签都对象化
	    第四点:我们可以通过document访问所有的标签对象。
    3.Document对象方法介绍
    document .getElementById (elementId)
    	通过标签的id属促查找标签dom对象，elementId 是标签的id属性值
    document .getElementsByName (elementName)
   		通过标签的name属性查找标签dom对象，elementName 标签的name属性值
    document .getElementsByTagName(tagname)
    	通过标签名查找标签dom对象。tagname 是标签名
    document . createElement( tagName)
    	通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树：

属性:
        childNodes
       		属性，获取当前节点的所有子节点
        firstChild
      	 	属性，获取当前节点的第一个子节点
        lastChild
        	属性，获取当前节点的最后一个子节点
        parentNode
        	属性，获取当前节点的父节点
        nextSibling
        	属性，获取当前节点的下一个节点
        previousSibling
        	属性，获取当前节点的上一个节点
        className
        	用于获取/修改标签的class属性值
        innerHTML
        	属性，表示获取/修改起始标签和结束标签中的内容
        innerText
        	属性，表示获取/修改起始标签和结束标签中的文本

返回首页