javascript的标签名 javascript标签有哪些

转载

mob64ca14116c53 2023-09-21 06:37:25

文章标签 javascript的标签名 javascript 静态注册动态注册 文章分类 JavaScript 前端开发

JavaEE学习笔记（3）——JavaScript

一、JavaScript与html代码的结合方式

方式一：Script标签输入
方式二：Script标签引入文件

二、变量
三、关系运算
四、逻辑运算
五、数组√
六、函数√

方式一：function关键字
方式二：
隐形参数：arguments

七、自定义对象
八、事件

常用事件
事件的注册(绑定)
① onload事件
② onclick事件
③ onblur事件

④ onchange事件
⑤ onsubmit事件
九、DOM模型√

Document对象
节点常用属性和方法

一、JavaScript与html代码的结合方式

方式一：Script标签输入

在head标签中，或者body标签中，使用script标签来书写js代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //alert是js语言提供的一个警告框函数
        //它可以接受任意类型的参数，这个参数就是警告框的信息
        alert("hello JavaScript");
    </script>
</head>

方式二：Script标签引入文件

直接使用script标签引入js文件

javascript的标签名 javascript标签有哪些_javascript

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="1.js"></script>
</head>

二、变量

JavaScript的变量类型：
数值类型：		number
字符串类型：		string
对象类型：		object
布尔类型：		boolean
函数类型：		function


JavaScript中的特殊值：
undefined		未定义，所有js变量未赋初始值的时候
null			空值
NAN				Not a Number  非数字，非数值

JS中的定义变量的格式

```html
    <script type="text/javascript">
        var i;
        alert(i);
        i=12;
        //typeof()是js语言提供的函数，返回变量的类型
        alert(typeof(i));
    </script>

三、关系运算

等于			==		简单的做字面值的比较
全等于		===		除了字面值的比较还要做类型比较

四、逻辑运算

JS中所有变量都可以做为一个Boolean类型的变量使用
0、null、undefined、“”都认为是null

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

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

五、数组√

数组的定义：
格式：
var 数组名=[];
var 数组名=[1,'abc',true];

只要通过下标赋值，那么最大的下标就会自动给数组做扩容操作

六、函数√

方式一：function关键字

function 函数名(){
	函数体;
}
在JavaScript语言中，定义带返回值的函数？
直接在函数体内return。

    <script type="text/javascript">
        function fun1() {
            alert("无参函数fun()被调用")
        }
        fun1();

        function fun2(a,b) {
            alert("有参函数被调用了"+a+" "+b);
            return a+b;
        }
        fun2(1,2);
    </script>

方式二：

格式

var 函数名=function(形参列表){
	函数体;
}

	<script type="text/javascript">
        var fun = function (a, b) {
            return a + b;
        }
    </script>

JS不允许函数重载

隐形参数：arguments

在function函数中不需要定义，但却可以直接用来获取所有参数的变量
操作类似数组

<script type="text/javascript">
        function fun() {
            alert(arguments.length);
        }
        fun(1,11,"abc");
    </script>

七、自定义对象

Object形式的自定义对象

对象的定义：
var 变量名 = new Object();	//对象实例
变量名.属性名 = 值;			//定义一个属性
变量名.函数名 = function;	//定义一个函数	

对象的访问：
变量名.属性/函数名();

{}形式的自定义对象

对象的定义：
var 变量名 = {		//空对象
	属性名：值，		//定义一个属性
	函数名：funtion(){}
};

对象的访问：
变量名.属性/函数名();

八、事件

常用事件

常用的事件：
onload 加载完成事件；页面加载完成后，常用于左页面js代码初始化操作
onclick 单击事件；常用于按钮点击响应操作
onblur 失去焦点事件；常用于输入框失去焦点后验证其输入是否合法
onchange 内容发生改变事件；常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件；常用于表单提交前，验证所有表单项是否合法

事件的注册(绑定)

就是告诉浏览器，当事件响应后要执行哪些操作代码

静态注册事件：通过html标签的事件属性直接赋予响应后的代码
动态注册事件：先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋予时间响应后的代码

动态注册步骤：
1.获取标签对象
2.标签对象.事件名 = function(){}

① onload事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onloadFun() {
            alert("静态注册onload事件，所有代码")
        }

        //onload事件动态注册是固定写法
        window.onload = function () {
            alert("动态注册的onload事件")
        }
    </script>
</head>
<!--
    静态注册onload事件
        onload事件是浏览器解析完页面之后      
-->
<body <!--onload="onloadFun()"-->>
</body>

② onclick事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert("静态注册onclick事件")
        }

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

③ onblur事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册失去焦点
        function onblurFun() {
            console.log("静态注册失去焦点事件");
        }
        //动态注册失去焦点
        window.onload = function () {
            //获取标签对象
            var psdObj = document.getElementById("password");
            //通过标签对象.事件名 = function(){};
            psdObj.onblur = function () {
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun()"><br/>
密码：<input type="text" id="password"><br/>
</body>

④ onchange事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert("女神已经改变了！");
        }

        window.onload = function () {
            var selectObj = document.getElementById("sel01");
            selectObj.onchange = function () {
                alert("男神已经改变了！");
            }
        }
    </script>
</head>
<body>
    请选择心中的女神：
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun()">
        <option>--女神--</option>
        <option>--11--</option>
        <option>--22--</option>
        <option>--33--</option>
    </select>

    请选择心中的男神：
    <!--动态注册onchange事件-->
    <select id="sel01">
        <option >--男神--</option>
        <option>--11--</option>
        <option>--22--</option>
        <option>--33--</option>
    </select>
</body>

⑤ onsubmit事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册表单提交事件
        function onsubmitFun() {
            //要验证所有表单是否合法，如果有一个不合法就阻止提交
            alert("静态注册表单提交事件 --- 发现不合法");
            return false;
        }

        window.onload = function () {
            var formObj = document.getElementById("form01");
            formObj.onsubmit = function () {
                //要验证所有表单是否合法，如果有一个不合法就阻止提交
                alert("动态注册表单提交事件 --- 发现不合法");
                return false;
            }
        }
    </script>
</head>
<body>
<!--return false阻止提交-->
    <form action="www.baidu.com" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="静态注册"/>
    </form>
    <form action="www.baidu.com" id="form01">
        <input type="submit" value="动态注册"/>
    </form>
</body>

九、DOM模型√

DOM：文档对象模型
就是把文档中的标签、属性、文本转换成对象来管理

Document对象

javascript的标签名 javascript标签有哪些_静态注册_02

javascript的标签名 javascript标签有哪些_动态注册_03

javascript的标签名 javascript标签有哪些_静态注册_04

注意：使用优先级：getElementById>getElementBuName>getElementByTagName

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            //获取标签对象
            var usernameObj = document.getElementById("username");
            var usernameSpan = document.getElementById("usernameSpan");
            //获取属性
            var value = usernameObj.value;
            //校验
            var patt =/^\w{5,12}$/;
            if (patt.test(value)){
                usernameSpan.innerHTML = "用户名合法！";
            }else {
                usernameSpan.innerHTML = "用户名不合法！";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="********"/>
    <span style="color:red" id="usernameSpan"></span>
    <button onclick="onclickFun()">校验</button>
</body>