JavaScript基础_jsskz-CSDN博客

本文链接：https://blog.csdn.net/weixin_43562415/article/details/105287602

JavaScript基础

(一)特点

1.交互性

(他可以做的就是信息的动态交互)

2.安全性

(不允许直接访问本地硬盘)

3.跨平台性

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

(二)JS和HTML代码的结合方式

1. 嵌入式

<!--位于head内--->
<script type="text/javascript">
alert("hello,world!");
</script>

2. 引入式

<!--
	需要用javascript标签引入js文件
	src属性专门用来引入js文件路径(可以是相对路径,也可以是绝对路径)
	script标签可以定义js代码,也可以引入js代码文件
	但是两者二选一
-->
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" >alert("hello,world!")</script>

(三)变量

1. JS数据类型

变量类型	名称
数值类型	number
字符串类型	string
对象类型	object
布尔类型	boolean
函数类型	function

2. 特殊的值

特殊的值	解释
undefined	未定义,所有js变量没有赋初始值,默认值都为undefined
null	空值
NAN	Not a Number 非数字非数值

3. JS中定义变量格式:

var 变量名;

var 变量名=值;

<script type="text/javascript">
    var i;
    alert(i);//undefined
    i=12;
    alert(typeof(i));//取出变量的数据类型-number
    var j="abc"
    alert(typeof(j))//string 
    alert(i*j)//NaN,非数字,非数值
</script>ty

(四)关系运算

1. ==表示内容相等

2. ===内容相等,并且数据类型相同

<script type="text/javascript">
    var i=12;
    var j="12";
    alert(i==j);//true
    alert(i===j);//false
</script>ty

(五)逻辑运算

1.且运算:&&

2. 或运算: ||

3. 取反运算: !

注: Javascript语言中,所有变量,都可以作为一个boolean类型的变量去使用

<script type="text/javascript">
    var i=12;
    var j="12";
    alert(i==j);//true
    alert(i===j);//false
</script>

(六)数组

1. JS数组,最大下标对数组扩容

<script type="text/javascript">
    var a=[];//定义空数组
    alert(a.length);//0
    a[0]=12;
    alert(a.length);//1
    a[2]="abc";
    alert(a.length);//3
    alert(a[1]);//undefined
    for(var i=0;i<a.length;i++)
        alert(a[i]);
</script>

(七)函数定义

1. 定义形式

<script type="text/javascript">
    function fun(){
		alert("无参函数被调用")
    }
    function fun2(a,b){
	alert("有参函数被调用-->"+a+b)
    }
    function sum(num1,num2){
	var sum=num1+num2;
        return sum;
    }
    fun();
    fun2(Str,ing);
    sum(1,2);
</script>

2. 函数不能重载,如果硬要,就只能覆盖

3. 隐形参数,无形参,直接传实参也可以运行

<script type="text/javascript">
    function fun(){
        //和数组差不多,可以取出,可以遍历
        alert(arguments[0])
        alert(arguments[1])
        for(var i=0;i<arguments.length;i++)
            alert(arguments[i]);
		alert(arguments.length)//可查看参数个数
        alert("隐形参数");
    }
    fun(123,"abc",true);
</script>

<script type="text/javascript">
        function fun(num1,num2){
            var sum=0;
            for(var i=0;i<arguments.length;i++){
                if(typeof(arguments[i])=="number")
                    sum+=arguments[i];
            }
            return sum;
        }
        alert(fun(1,2,3,"abc",4,5,6,7,8,9));
</script>

(八)自定义对象

00. 对象

对象的定义:

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

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

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

对象的访问

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

1.Object形式的自定义对象

var obj =new Object();
obj.name="skz";
obj.age=18;
obj.fun=function(){
	alert("姓名:"+this.name+",年龄:"+this.age);
}
obj.fun();

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

var obj={
            name:"skz",
            age:18,
            fun:function() {
                alert("姓名:" + this.name + ",年龄:" + this.age)
            }
        };
        alert(obj.name);
        alert(obj.age);
        obj.fun();

(九) JS事件-电脑输入设备与页面交互的响应

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

00. 事件的注册又分为静态注册(绑定)和动态注册(绑定)两种:

1. 静态注册事件

通过html标签的事件属性直接复制与事件响应后的代码,这种方式叫静态注册.

2. 动态注册事件

是指先通过js代码得到标签的dom对象,然后再通过dom对象.事件名=function(){}这种形式赋于事件响应后的代码,叫动态注册.

3. 动态注册基本步骤

获取标签对象
标签对象.事件名 =function(){}

1.onload 加载完成事件

静态注册. 事件的注册又分为静态注册(绑定)和动态注册(绑定)两种:

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

动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function(){
            alert("动态注册onload事件")
        }
    </script>
</head>
<body>
</body>
</html>

2.onclick点击事件

静态注册和动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册
        function onclickFun(){
            alert('静态注册onclick事件');
        }
        //动态注册
        //(1)获取对象
        //(2)对象.事件名=function(){}
        window.onclick=function(){
            var clickobj=document.getElementById("btn02");
            clickobj.onclick=function(){
                alert("动态注册click事件");
            }
        }
    </script>
</head>
<body>
    <button onclick="onclickFun();">按钮1</button>
    <button id="btn02">按钮2</button>
</body>
</html>

3.onblur失去焦点事件

静态注册和动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册
        function onblurFun(){
            console.log("静态注册onblur事件");
        }
        //动态注册
        window.onblur=function(){
            var passwordobj=document.getElementById("password");
            passwordobj.onblur=function(){
                console.log("动态注册onblur事件");
            }
        }

    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun()">
    密  码:<input id="password"  type="text" >
</body>
</html>

4.onchange内容发生改变事件

静态和动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册
        function onchangeFun(){
            alert("地区已更改");
        }
        //动态注册
        window.onchange=function(){
            var areaobj=document.getElementById("area");
            areaobj.onchange=function(){
                alert("快递公司已更改")
            }
        }

    </script>
</head>
<body>
    请选择所在区域:<br/>
    <select onchange="onchangeFun()">
        <option>--省市--</option>
        <option>--北京市--</option>
        <option>--天津市--</option>
        <option>--上海市--</option>
        <option>--重庆市--</option>
    </select>
    请选择快递公司:<br/>
    <select id="area">
        <option>--省市--</option>
        <option>--东风快递--</option>
        <option>--顺丰快递--</option>
        <option>--中通快递--</option>
        <option>--人肉快递--</option>
    </select>
</body>
</html>

5.表单提交事件

静态注册和动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册
        function onsubmitFun(){
            alert("静态注册表单提交失败");
            //如果不阻止直接return true;
            //否则
            return false;
        }
        //动态注册
        window.onload=function () {
            //(1)获得对象
            var onsubmitobj=document.getElementById("submit");
            //(2)对象.事件=function(){}
            onsubmitobj.onsubmit=function () {
                alert("动态注册表单提交失败")
                return false;
            }
        }
    </script>
</head>
<body>
    <form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFun()">
        <input  type="submit" value="静态注册">
    </form>
    <form action="http://www.baidu.com" method="get" id="submit">
        <input  type="submit" value="动态注册">
    </form>
</body>
</html>

(十)DOM对象

1.说明

全称:Document Object Model 把文档中的属性,文本,标签,转换成对象来管理.

2.结构图

Document 对象的理解

Document它管理了所有HTML的文档内容.
Document是一种树结构的文档,有层级关系.
它让我们把所有的标签都对象化.
我们可以通过Document访问所有标签对象.

3.Document对象的方法

document.getElementById(element Id)

通过标签的id属性查找dom对象,elementId是标签的id属性值
document.getElementByName(elementName)

通过标签的name属性查找标签的dom对象,elementName标签的name属性值
document.getElementByTagName(tagname)

通过标签名查找dom对象 tagname是标签名
document.createElement(tagName)

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

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            var usernameobj=document.getElementById("username");
            var usernameText=usernameobj.value;
            var patt=/^\w{5,12}$/;//正则表达式
            if(patt.test(usernameText)) alert("用户名合法");
            else alert("用户名不合法")
        }
    </script>
</head>
<body>
    用户名:
    <input type="text" id="username" value=" ">
    <button onclick="onclickFun()">按钮1</button>
</body>
</html>

4.正则表达式

1.格式

//第一种
var patt=new RegExp(pattern,modifiers);
//第二种
var patt=/pattern/modifiers;

2.内容

modifiers 修饰符

修饰符	描述
i	对大小写不区分
q	找到所有匹配不是找到第一个就停止
m	多行匹配

方括号

表达式	描述
[abc]	查找abc之间任意一个字符
[^abc]	查找除abc任意一个字符
[0-9]	查找0-9任意一个数字
[a-z]	查找除0-9任意一个数字
[A-Z]	查找A-Z之间任意一个字符
[A-z]	查找A-z之间任意一个字符

元字符

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符(包含a-z A-Z 0-9以及下划线)
\W	查找非单词字符
\d	查找数字
\D	查找非数字字符
\s	查找空白字符
\S	查找非空白字符
\b	查找单词边界字符
\B	查找非单词边界字符
\n	查找换行字符
\f	查找换页字符
\r	查找回车字符
\t	查找制表字符
\v	查找单个字符

量词

量词	描述
n+	至少一个为n的字符串
n*	0个或多个n的字符串
n?	0个或1个为n的字符串
n{X}	X个n的序列字符串
n{X,Y}	X或Y个n的序列字符串
n{X,}	至少X个n的序列字符串
n$	结尾为 n 的字符串。
^n	开头为 n 的字符串。
?=n	其后紧接指定字符串 n 的字符串。
?!=n	其后没有紧接指定字符串 n 的字符串。