网页开发笔记（三）：JavaScript入门

JavaScript

作用与特点：
1.交互性：可以与网页内容进行动态交互
2.安全性：不允许直接访问本地硬盘
3.跨平台性：只要有解释器就可以运行

JavaScript在HTML中的使用方式

一：在head或者body标签中使用script标签
例：在警告框中加入内容

    <script type="text/javascript">
        alert("这是警告页面")
    </script>

二：使用script标签引入单独的JavaScript文件
使用scr属性引入js文件，可以是相对路径也可以是绝对路径
注：script标签进行定义js代码和引入js文件的功能只能二选其一，不能够同时使用。
例：在警告框中加入内容

<script type="text/javascript" src="file01.js"></script>

JavaScript语言基础

由于我看的JavaWeb开发入门的视频，里面讲Javascript的语法非常琐碎，于是我找了JavaScript这本圣经仔细看了一下JavaScript的语法。

语法规则

1.区分大小写，这个规则对于一般的脚本语言应该都有
2.标识符：第一个字符必须是字母，下划线或美元符号
3.注释：和C语言相同//或者/*…*/
4.语句：在写代码块的时候可以用花括号括起来

变量

变量定义这一块不同于C语言或一众类C语言，JavaScript的变量定义是松散类型的，也就是可以保存任何类型的数据

定义变量

定义变量可以用三个关键词：var，const，let
var声明变量

var 变量名;

var声明的变量作用域为函数作用域
var一次声明多个变量的时候用逗号分隔每个变量
var声明提升：将所有变量的声明都拉到函数作用域的顶部，就是先使用变量后声明也不会出错
let声明变量

let 变量名

let声明的变量作用域为代码块作用域且不允许在同一个域中进行重复声明
在写for循环的时候最好使用let来定义循环变量而不是var，由于var在整个函数体内都有继承性，所有for输出的结果可能不是你想要的
const声明

const 变量名

const的行为于let基本相同，唯一一个重要的区别是它声明

对象

自定义对象的两种方法：
1.Object自定义对象
声明对象,设置对象属性,设置对象函数:

var/let/const 对象名 = new Object();
对象名.属性=属性值
对象名.函数名=new function(){
			//函数内容
}

调用对象属性值, 对象函数
通过对象名.属性或对象名.函数直接调用即可
2.花括号自定义对象
声明对象,设置对象属性,设置对象函数:

var/let/const 对象名={
		属性名1:属性值,//设置的每一个属性或者函数都要用逗号隔开
		属性名2:属性值,
		函数名:function(){
			//函数内容
		}//直到最后一个属性或者函数
}

事件

事件：是电脑输入设备与页面进行的交互的相应
常用时间：
onload：加载完成事件
页面加载完成后，常用于js代码的加载
onclick:单击事件
常用于按钮的点击相应
onblur:失去焦点事件
常用于输入框失去焦点验证其输入内容是否合法
onchange:内容发生改变事件
常用于下拉列表和输入框内容发生改变后操作
onsubmit:表单提交事件
常用于表单提交前，验证其输入内容是否合法

事件的注册

时间的注册就是告诉浏览器，当事件相应以后浏览器应该执行哪些代码

静态注册事件

静态注册事件：通过HTML标签的事件属性直接赋于事件响应后的代码

动态注册事件

动态注册事件：先通过js代码获得标签的对象，再通过对象.事件名=function(){}这种形式赋于事件响应后的代码
动态注册的基本步骤：
1.获得标签的对象
2.标签对象.事件名=function(){}

DOM模型

DOM全称：Document Object model 即 文档对象模型
作用：将HTML中的属性，标签，文字转化成树的形式管理
例：
特点：
1.管理着HTML所有的内容，可以访问所有的元素
2.是一种树形结构，有层级关系
3.把所有的标签都对象化
4.可以通过document访问所有的标签

DOM常用方法

1.document.getElementById();
返回拥有ID的第一个对象的引用
2.document.getElementsByName();
返回多个对象标签的集合
集合中的每个元素都是DOM对象
3.返回带有指定标签名对象的集合
document.getElementsByTagName();
集合中都为DOM对象
集合中的DOM顺序为HTML页面从上到下按顺序
使用优先级：
ID>NAME>TAG
这三个方法必须要在页面加载完成之后才能够查到，因为HTML读到标签时会创建相应的对象

DOM获取标签元素

在动态注册事件的时候需要获取标签元素，则需要使用DOM函数来获取：

document.getElementById();
//返回一个标签对象

修改标签元素的属性值：

var 对象名= document.getElementById(“ID值”);
对象名.属性名=修改的属性名

修改标签元素的内容

var 对象名= document.getElementById(“ID值”);
mp.innerText="修改的值";

onload事件

静态注册：一般可以在head标签中的script标签中写一个函数，在onload中调用这个函数

    <script type="text/javascript">
        function onloadfun(){
            //unload事件的所有代码
        }
    </script>

动态注册：一般是用 window.οnlοad=function(){}的形式

   window.onload=function (){
        //需要执行的代码
     }

onclick事件

静态注册：
在script标签中写function 函数名(){}，再在body的标签中进行调用
动态注册：
在window.οnlοad=function(){}中将需要调用的标签对象创造出来，再使用对象名.οnclick=funtion(){}将需要实现的内容写出

        window.onload=function (){
            var 对象名 = document.getElementById("对象ID");
            bottom.onclick=function (){
               //内容
            }
        }

onblur事件

静态注册：
在script标签中写function 函数名(){}，再在body的标签中进行调用
动态注册：
在window.οnlοad=function(){}中将需要调用的标签对象创造出来，再使用对象名.οnblur=funtion(){}将需要实现的内容写出

        window.onload=function (){
            var blur = document.getElementById("标签ID");
            blur.onblur=function (){
               //事件内容
            }
        }

onchange事件

静态注册：
在script标签中写function 函数名(){}，再在body的标签中进行调用
动态注册：
在window.οnlοad=function(){}中将需要调用的标签对象创造出来，再使用对象名.οnchange=funtion(){}将需要实现的内容写出

        window.onload=function (){
            var onchange=document.getElementById("标签ID")
            onchange.onchange=function (){
               //事件内容
            }
        }

onsubmit事件

在onsubmit事件中可以阻止表单提交
静态注册：
在script标签中写function 函数名(){}，再在body的标签中进行调用，如果要阻止表单提交则可以在函数中return false，并且在标签调用函数前加上return
例：onsubmit="return 函数名()"
动态注册：
在window.οnlοad=function(){}中将需要调用的标签对象创造出来，再使用对象名.οnsubmit=funtion(){}将需要实现的内容写出
,如果要组织表单提交则可以在函数中加入return false

        window.onload=function (){
            var form2=document.getElementById("标签名");
            form2.onsubmit=function (){
                //事件内容
                return false;
            }
        }