JavaScript

一、JavaScript介绍

Javascript语言主要是完成页面的数据验证,因此,它运行在客户端,需要运行浏览器来解析执行JavaScript代码

JS是弱类型,JAVA是强类型

​  弱类型是类型可变;强类型是定义变量时,类型已确定却不可变

特点:

 1.交互性(他可以做的是信息的动态交互)

 2.安全性(不允许直接访问本地硬盘)

 3.跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关)

二、JavaScript和html代码的结合方式

1.第一种方式

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

2.第二种方式

使用script标签引入单独的javaScript代码文件

​  src属性专门用来引入js文件路径(可以是相对路径,也可以是绝对路径)

 script标签可以用来定义js代码,也可以用来引入js文件,

但是,两个功能二选一使用,不能同时使用两个功能

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

三、变量

变量:可以存放某些值的内存的命名

JavaScript的变量类型:

​ 数值类型: number

​ 字符串类型:string

​ 对象类型: object

​ 布尔类型: boolean

​ 函数类型: function

JavaScript里的特殊值:

​  undefined 未定义,所有js变量未赋于初始值的时候,默认值都是undefined

​  null 空值

​  NaN 全称是:Not a Number,非数字,非数值

JS中的定义变量格式:

​  var 变量名;

​  var 变量名 = 值;

typeof()是javaScript语言提供的一个函数,它可以去变量的数值类型返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i;
        //alert(i);//undefined
        i = 12;
        //alert(i);//12
        //alert(typeof (i));//number

        i = "abc";
        //alert(typeof (i));//string

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

</body>
</html>

四、关系(比较)运算

等于:== 等于是简单的数字面值的比较

全等于:=== 除了数字面值的比较之外,还会比较两个变量的数据类型

var a = "12";
var b = 12;
alert(a == b);//true
alert(a === b);//false

五、逻辑运算

且运算:&&

或运算: ||

取反运算:!

在javaScript语言中,所有的变量都可以做为一个boolean类型的变量去使用

0、null、undefined、“”(空串)都认为是false

&&与运算:

​  ①当表达式全为真的时候,返回最后一个表达式的值

​  ②当表达式,有一个为假的时候,返回第一个为假的表达式的值

||或运算:

​  ①当表达式全为假时,返回最后一个表达式的值

​  ②只要有一个表达式为真,就会返回第一个为真的表达式的值

并且&&与运算和||或运算有短路

短路:当这个&&或||运算有结果之后,后面的表达式不再执行

/*&&与运算:
        ​①当表达式全为真的时候,返回最后一个表达式的值
​        ②当表达式,有一个为假的时候,返回第一个为假的表达式的值*/
        var a = "abc";
        var b = true;
        var c = false;
        var d = null;

        //alert(a && b);//true
        //alert(b && a);//true
        //alert(a && c);//false
        //alert(a && d);//null

        //alert(a && c && d);//false

        /*||或运算:
        ​	①当表达式全为假时,返回最后一个表达式的值
​	        ②只要有一个表达式为真,就会返回第一个为真的表达式的值*/

        //alert(c || d);//null
        //alert(d || c);//false

        alert(a || c);//abc
        alert(b || c);//true

六、数组(重点)

JS中数组定义的方式:

格式:

​  var 数组名 = [];//空数组

​  var 数组名 = [1,‘abc’,true];//定义数组同时赋值元素

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

数组的遍历:

var arr = [];
        //alert(arr.length);//0

        arr[0] = 12;
        //alert(arr.length);//1

        arr[2] = "abc";
        //alert(arr.length);//3

       // alert(arr[1]);//undefined

        for (var i = 0;i < arr.length;i++){
            alert(arr[i]);
        }

七、函数(重点)

1.函数的两种定义方式

①可以使用function关键字来定义函数

格式:

function 函数名{

​  函数体

}

在JS语言中,如何定义带有返回值的函数?只需要在函数体内直接使用return语句返回值即可

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(1,2));

②第二种方式

格式:

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

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

        var fun2 = function (a,b) {
            alert("有参函数a = " + a + ",b = " + b);
        }
        //fun2(1,2);

        var fun3 = function (num1,num2) {
            return num1 + num2;
        }
        alert(fun3(1,2));

注意:在java中函数允许重载,但是在JS中函数的重载会直接覆盖掉上一次的定义

function f() {
            alert("无参函数");
        }
        function f(a,b) {
            alert("有参函数");
        }

        f();//有参函数

2.函数的arguments隐性参数(只在function函数内)

隐性参数:在function函数中不需要定义,但却可以直接用来获取所有参数的变量

隐性参数像java基础中的可变长参数一样

 public void fun(Object … args);

可变长参其实是一个数组。则,JS中的隐形参数操作也类似数组

八、JS中的自定义对象(扩展内容)

1.Object形式的自定义对象

对象的定义:

var 变量名 = new Object();//对象实例(空对象)

变量名.属性名 = 值;//定义一个属性

变量名.函数名 = function(){} //定义一个函数

对象的访问:

变量名.属性/函数名();

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

        var obj = new Object();
        //alert(typeof(obj));//object
        obj.name = "华仔";
        obj.age = 18;
        obj.fun = function () {
            alert("姓名:" + this.name + ",年龄:" + this.age);
        }
        /*对象的访问:
        变量名.属性/函数名();*/
        //alert(obj.name);
        obj.fun();

2.{}花括号形式的自定义对象

var 变量名 = {};//空对象

对象的定义:

var 变量名 = { //空对象

​   属性名:值, //定义一个属性

​   属性名:值,

​  函数名:function(){} //定义一个函数

};

对象的访问:

变量名.属性/函数名();

九、JS中的事件

1.事件

事件:是电脑输入设备与页面进行交互的响应

常用的事件:

onload加载完成事件:页面记载完成后,常用语做页面js代码初始化操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onload事件的方法
        function onloadFun() {
            alert('静态注册onload事件,所有代码');
        }
        //onload事件动态注册,是固定写法
        window.onload = function () {
            alert("动态注册的onload事件");
        }

    </script>

</head>
<!-- 静态注册onload事件
        onload事件是浏览器解析完页面后悔自动触发的事件
        <body onload="onloadFun();">
     -->
<body>

</body>
</html>

onclick单击事件:常用于按钮的点击响应操作

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

        //动态注册onclick事件
        window.onload = function () {
            //1.获取标签对象
            /**
             * document是js语言提供的一个对象(文档)
             * get  获取
             * Element  元素(标签)
             * By   通过。。由。。经。。
             * Id   id属性
             *
             * getElementById通过is属性获取标签对象
             */
            var btnobj = document.getElementById("btn01");
            //alert(btnobj);
            //2.通过标签对象.事件名 = function(){}
            btnobj.onclick = function () {
                alert("动态注册的onclick事件");
            }
        }
    </script>
</head>
<body>
    <!-- 静态注册onCLick事件 -->
    <button onclick="onclickFun()">按钮1</button>
    <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">
        function onblurFun() {
            //console是控制台对象,是由js语言提供,专门用来向浏览器的控制器打印输出,用于测试使用
            //log()是打印的方法
            console.log("静态注册失去焦点事件");
        }

        //动态注册
        window.onload = function () {
            //1.获取标签对象
            var passwordobj = document.getElementById("password");
            alert(passwordobj);
            //2.通过标签对象.事件名 = function(){};
            passwordobj.onblur = function () {
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun();"><br/>
    密码:<input id="password" type="text"><br/>
</body>
</html>

onchange内容发生改变事件:常用于下拉列表和输入框内容发生改变后操作

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

        window.onchange = function () {
            //1.获取标签对象
            var selobj = document.getElementById("sel01");
            alert(selobj);
            //2.通过标签对象.事件名 = function(){}
            selobj.onchange = function () {
                alert("男神已经发生改变");
            }
        }
    </script>
</head>
<body>
    请选择你心中的女神:
    <!-- 静态注册onchange事件 -->
    <select onchange="onchangeFun()">
        <option>--女神--</option>
        <option>芳芳</option>
        <option>佳佳</option>
        <option>娘娘</option>
    </select>
    请选择你心中的男神:
    <!-- 动态注册onchange事件 -->
    <select id="sel01">
        <option>--男神--</option>
        <option>cxk</option>
        <option>wyb</option>
        <option>xz</option>
    </select>
</body>
</html>

onsubmit表单提交事件:常用于表单提交前,验证所有表单项是否合法

return false可以阻止表单提交

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

            return false;
        }

        window.onsubmit = function () {
            var formobj = document.getElementById("form01");
            //alert(formobj);

            formobj.onsubmit = function () {
                alert("动态注册表单提交事件--->发现不合法");

                return false;
            }
        }
    </script>
</head>
<body>
    <!-- return false;可以阻止表单提交 -->
    <form action="http://localhost:8080" method="get" onsubmit=" return onsubmitFun()">
        <input type="submit" value="静态注册"/>
    </form>

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

2.事件的注册

事件的注册又分为静态注册和动态注册两种

事件的注册(绑定):告诉浏览器,当事件响应后要执行哪些操作代码

 静态注册事件:通过html标签的事件属性直接赋于时间响应后的代码

 动态注册事件:先通过JS代码得到标签的dom对象,然后再通过dom对象.事件名 = function(){}

3.动态注册基本步骤:

​ ①获取标签对象

​ ②标签对象.事件名 = function(){}

十、DOM模型

DOM全称:Document Object Model 文档对象模型

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

如何把标签、属性、文本转换成对象来管理?

1.Document对象(重点)

在这里插入图片描述

Document对象的理解:

①Document管理了所有的HTML文档内容

②Document是一种树结构的文档,有层级关系

③它让我们把所有的标签都对象化

④可以通过Document访问所有的标签对象

什么是对象化?

例:

有一个人有年龄:18岁,性别:女,名字:张某某

要把这个人的信息对象化怎么办?

​ java中:

class Person{
	private int age;
	private String sex;
	private String name;
}

html标签怎么对象化?

<body>
	<div id = "div01">div01</div>
</body>

模拟对象化,相当于:

class Dom{
	private String id;//id属性
	private String tagName;//表示标签名
	private Dom parentNode;//父亲
	private List<Dom> children;//孩子结点
	private String innerHTML;//其实标签和结束标签中间的内容
}

2.Document对象中的方法(重点)

document.getElementById(elementId)

通过标签的id属性查找标签dom对象,elementId是标签的id属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /**
         * 需求:当用户点击了校验按钮,要获取输出框中的内容,然后验证其是否合法<br/>
         * 验证的规则是:必须由字母、数字、下划线组成,且长度是5-12位
         */
        function onclickFun() {
            //1.当我们要操作一个标签时,一定要先获取这个标签对象
            var usernameObj = document.getElementById("username");
            //alert(usernameObj);//[object HTMLInputElement]它是dom对象
            //alert(usernameObj.id);
            var usernameText = usernameObj.value;

            //如何验证字符串,符合某个规则,需要使用正则表达式技术
            var patt = /^\w{5,12}$/;

            /**
             * test()方法用于测试某个字符串,是不是匹配我的规则
             * 匹配就返回true,不匹配就返回false
             */
            if (patt.test(usernameText)){
                alert("用户名合法");
            }else {
                alert("用户名不合法");
            }
        }

    </script>
</head>
<body>
    用户名:<input type="text" id="username" value="wj"/>
    <button onclick="onclickFun()">校验</button>
</body>
</html>
document.getElementsByName(elementName)

通过标签的name属性查找标签dom对象,elementName标签的name属性值

这个方法是根据指定的name属性查询返回多个标签对象集合,这个集合的操作和数组一样

集合中每个元素都是dom对象,集合中的元素顺序是在html页面中从上到下的顺序

chected表示复选框的选中状态,如果选中是true,不选中是false,此属性可读可写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll() {
            //让所有复选框都选中
            var hobbies = document.getElementsByName("hobby");
            //alert(hobbies.length);

            for (var i = 0;i < hobbies.length;i++){
                hobbies[i].checked = true;
            }
        }
        //全不选
        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            //alert(hobbies.length);

            for (var i = 0;i < hobbies.length;i++){
                hobbies[i].checked = false;
            }
        }
        //反选
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");

            for (var i = 0;i < hobbies.length;i++){
                if (hobbies[i].checked){
                    hobbies[i].checked = false;
                }else{
                    hobbies[i].checked = true;
                }
            }
        }
    </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" name="hobby" value="cpp" checked = "checked">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
<br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>

</body>
</html>
document.getElementsByTagName(tagname)

通过标签名直接查找标签dom对象,tagname是标签名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll() {
            //是按照指定标签名来进行查询并返回集合

            var inputs = document.getElementsByTagName("input");
            //alert(inputs);
            for (var i = 0;i < inputs.length;i++){
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" value="cpp" checked = "checked">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
<br/>
    <button onclick="checkAll()">全选</button>
    
</body>
</html>
ducument.createElement(tagName)

通过给定的标签名,创建一个标签对象,tagName是要创建的标签名

注:

​  document对象的三个查询方法,如果有id属性,优先使用getElementById方法进行查询

​  若没有id属性,则优先使用getElementsByName方法查询

​  若id属性和name属性都没有最后再按标签名查getElementsByTagName

以上三个方法,一定要在页面加载完成后执行,才能查询到

3.正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //表示要求字符串中,必须包含字母e
        //var patt = new RegExp("e");
        //var patt = /e/;//也是正则表达式对象

        //表示要求字符串中,是否包含字母a或b或c
        //var patt = /[abc]/;
        //表示要求字符串,是否包含小写字母
        //var patt = /[a-z]/;
        //表示要求字符串,是否包含大写字母
        //var patt = /[A-Z]/;
        //表示要求字符串,是否包含任意数字
        //var patt = /[0-9]/;
        //表示要求字符串,是否包含字母、数字、下划线
        //var patt = /\w/;
        //表示要求字符串,是否包含至少一个a
        //var patt = /a+/;
        //表示要求字符串,是否包含0个或多个a
        //var patt = /a*/;
        //表示要求字符串是否包含1个或0个a
        //var patt = /a?/;
        //表示要求字符串是否包含连续3个a
        //var patt = /a{3}/;
        //表示要求字符串,是否包含至少3个连续的a,最多5个连续的a
        var patt = /a{3,5}/;
        //表示要求字符串,是否包含至少3个连续的a
        var patt = /a{3,}/;
        //表示要求字符串,必须以a结尾
        var patt = /a$/;
        //表示要求字符串,必须以a打头
        var patt = /^a/;
        //表示要求字符串,从头到尾都必须完全匹配
        var patt = /^a{3,5}$/;
        
        var str = "1234a1243";

        alert(patt.test(str));

    </script>
</head>
<body>

</body>
</html>

4.节点的常用属性和方法

 节点就是标签对象

方法:

​ ①通过具体的元素节点调用:getElementdByTagName()方法,获取当前节点的指定标签名孩子节点

​ ②appendChild(oChildNode)方法,可以添加一个子节点,oChildNode是要添加的孩子节点

属性:

​ ①childNodes:获取当前节点的所有子节点

​ ②firstChild:获取当前节点的第一个子节点

​ ③lastChild:获取当前节点 的最后一个子节点

​ ④parentNode:获取当前节点的父节点

​ ⑤nextSibling:获取当前结点的下一个节点

​ ⑥previousSibling:获取当前节点的上一个节点

​ ⑦className:用于获取或设置标签的class属性值

​ ⑧innerHTML:表示获取/设置起始标签和结束标签中的内容

​ ⑨innerText:表示获取/设置起始标签和结束标签中的文本

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值