javascript基础

最新推荐文章于 2024-07-03 14:38:59 发布

s_yqb

最新推荐文章于 2024-07-03 14:38:59 发布

阅读量45

点赞数

分类专栏：前端基础文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_39037116/article/details/120401266

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

介绍

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型编程语言。诞生之初是为了完成浏览器页面的数据验证。浏览器内核可以解析JavaScript代码

与java强类型不同，JS变量是弱类型的，定义变量之后可以赋值数值、也可以赋值字符串等等

特点：
1、交互性(用户与页面交互)
2、安全性(不允许直接访问本地磁盘)
3、跨平台(只要有浏览器就可以解析)

html中引入

引入方式有两种，一个script标签一次只可以使用一种引入方式。此外如果有多个script标签，代码会从上到小顺序执行

第一种：在head或者body标签中，使用script标签来写JavaScript代码

<head>
	<meta charset="UTF-8">
    <script type="text/javascript">
        alert("警告");
    </script>
</head>

第二种：利用script标签导入一个单独的JavaScript文件

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

变量

定义变量(都是用var定义)：
1、var 变量名
2、var 变量名 = 值

变量类型：
1、数值类型： number
2、字符串类型：string
3、对象类型：object
4、布尔类型：boolean
5、函数类型：function

特殊的值：
1、undefined 未定义。所有js变量未赋予初始值时，都是undefined
2、null 空值，可以给变量赋值为null
3、NAN not a number。非数字，非数值。比如，当用数字乘以字符串时会得到

关系运算

等于 ==：简单字面值的比较，比如"123"和123会返回true

全等于 ===：除了字面值，还会比较数据类型，上面的例子返回false

逻辑运算

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

JavaScript中所有变量都可以作为boolean类型去使用，比如 if 判断条件、逻辑运算等。其中，0、null、undefined、”“ 被认为是false

&&运算两种情况：
1、表达式全为真时，返回最后一个真的表达式的值
2、有一个为假时，返回第一个假的表达式的值
比如（”132“ && null），返回null；（”132“ && ”123“），返回"123"

||运算两种情况：
1、表达式全为假时，返回最后一个假的表达式的值
2、有一个为真时，返回第一个真的表达式的值

数组

数组定义：
1、var 数组名 = [ ]
2、var 数组名 = [123, “aa”] 数组中的元素类型可以不同

当我们通过数组下标进行赋值时，数组会进行自动扩容。扩容后没有赋值的元素为undefined。只读的话不会自动扩容

    <script type="text/javascript">
        var a = [];
        alert(a.length);
        a[5] = 10;
        alert(a.length);
    </script>

此时会依次弹出0和6，代表数组进行了扩容，长度发生了变化

函数

函数定义

函数定义后必须调用才会执行，且JS中不允许重载，会覆盖

第一种：使用function关键字进行定义
function 函数名(形参列表){
函数体
}

以有参且有返回值举例（形参不用写参数类型，因此都是var）

    <script type="text/javascript">
        function fun2(a){
            return a;
        }
        alert(fun2(5))
    </script>

第二种：var + function
var 函数名 = function(形参列表){
函数体
}

arguments隐形参数

function函数中有一个隐形参数arguments，其实是一个可变长数组，不需要我们去定义，它可以获取所有传入的参数。

    <script type="text/javascript">
        function sum(num1, num2){
            var num = 0;
            for (var i = 0; i < arguments.length; i++) {
                num += arguments[i];
            }
            alert(num);
        }
        sum(1,2,3,4,5);
    </script>

因此即使你的函数是无参函数，也可以给它赋值

自定义对象

1、Object形式的自定义对象
格式：
var 变量名 = new Object();
变量名.属性名 = 值;
变量名.函数名 = function(){ };

 <script type="text/javascript">
     var obj = new Object();
     obj.name = "yqb";
     obj.fangfa = function (){ alert(123) };
 </script>

2、花括号形式的自定义对象
格式：
var 变量名 = {
属性名: 值,
属性名: 值,
函数名: function(){ }
};

  <script type="text/javascript">
      var obj = {
          name : "yqb",
          fangfa : function (){ alert(123) }
      };
      obj.fangfa();
  </script>

事件

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

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

使用事件前，我们要先完成对事件的注册(或叫绑定)，即事件触发后，要进行哪些操作。
1、静态注册事件
通过html标签的事件属性直接赋予事件响应后的代码
2、动态注册事件
先通过js代码获取标签的 DOM 对象，再通过 **DOM对象.事件名=function(){ } ** 来赋予响应后的代码

onload：

静态注册：
也可以在script中定义函数，然后在onload中调用，可以看起来更加清晰

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body onload="alert(123);">
</body>
</html>

动态注册：
这儿的window直接就是一个DOM对象，因此不用我们再去获得，可以直接使用
window.onload表示页面加载完成之后

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        window.onload = function (){
            alert(123);
        }
    </script>
</head>
<body>
</body>
</html>

onclick：

静态注册：

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<button onclick="alert('点击了')">按钮</button>
</body>
</html>

动态注册：
这儿的动态注册要注意：1、点击的注册或者绑定要在页面加载完成之后。原因在于代码是从上往下执行的，会先执行script，再执行body加载标签元素，生成DOM对象。因此当在script中用id寻找DOM对象时会产生问题，此时的元素根本还没有生成。而window.onload的意思就在于页面加载完成后再执行的操作
2、DOM对象是JS为每个标签进行包装后的对象，document是代表整个页面，可以通过它来找到每个DOM对象

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        window.onload = function (){
            //获取按钮的DOM对象
            var button = document.getElementById("button1");
            //给按钮绑定点击事件响应
            button.onclick = function (){
                alert("点击了")
            }
        }
    </script>
</head>
<body>
<button id="button1">按钮</button>
</body>
</html>

onsubmit：

静态注册：
提交需要注意，点击后会执行代码并自动跳转。如果想加上表单验证，通过验证才能跳转，那么可以让它最后返回boolean值，true允许跳转，false不允许跳转。下面例子直接返回false，阻止跳转。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        var sub = function (){
            alert("不合法");
            return false;
        }
    </script>
</head>
<body>
    <form action="http://localhost:8080" method="get" onsubmit="return sub()">
        <input type="submit" value="提交">
    </form>
</body>
</html>

动态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        window.onload = function (){
            var dom = document.getElementById("form");
            dom.onsubmit = function (){
                alert("不合法");
                return false;
            }

        }
    </script>
</head>
<body>
    <form id="form" action="http://localhost:8080" method="get">
        <input type="submit" value="提交">
    </form>
</body>
</html>

DOM(文档对象模型)

DOM对象

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
</head>
<body>
    <h1>我的标题</h1>
    <a href="">我的链接</a>
</body>
</html>

在这里插入图片描述
通俗的讲就是，浏览器会为以上的每个标签、属性、文本都创建对应的DOM对象，通过对象进行管理。这个DOM对象内一般包括id、标签名、父级DOM对象，子级DOM对象、起始标签和结束标签中的HTML内容等等。因此只要我们获得某个元素的DOM对象，那么我们就可以获得这个元素的所有信息，从而可以进行获取、修改等操作。我们一般通过document来获得元素DOM对象

注意：文本也会被包装成一个DOM对象，并且在代码中的换行也会被当作文本而被包装成DOM对象。div下的子节点共有7个，三个是h1节点，四个换行构成的文本节点

 <div id="test">
     <h1></h1>
     <h1></h1>
     <h1></h1>
 </div>

Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

常用方法：
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
createElement(元素标签)创建元素

注意：
这些查询的方法一定要等页面加载完成后再去执行。所以对于静态注册没关系，动态注册时一定要放在window.onload里面才行。因为浏览器解析时代码是从上往下依次执行的。等执行到body里面的内容时才会创建对应的DOM对象，创建后才可以被查询到。因此如果你的静态注册代码不在window.onload中，那么进行查询时DOM还没有创建，因此肯定不会查到。window.onload代表着页面加载完成后执行的操作

输入验证

我们可以利用DOM对象，搭配点击事件，实现一个简单的输入格式验证

下面例子中，在输入框输入信息，点击按钮，会进行验证。如果是由字母数字下划线，且5-12位组成，那么显示用户名合法，否则显示不合法
getElementById()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <script>
        function buttononclick(){
            //获取dom对象
            var myinput = document.getElementById("username");
            var span = document.getElementById("usernamespan");
            //获取dom对象的值
            var value = myinput.value;
            //用正则表达式匹配
            var patt = /^\w{5,12}$/
            //验证
            if (patt.test(value)){
                span.innerHTML = "用户名合法";
            }else{
                span.innerHTML = "用户名不合法";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username"/>
    <span id="usernamespan"></span>
    <button onclick="buttononclick()">按钮</button>
</body>
</html>

全选全部选功能

getElementsByName()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <script>
        function buttonall(){
            var elements = document.getElementsByName("checkBox");
            for (let i = 0; i < elements.length; i++) {
                elements[i].checked = true;
            }
        }

        function buttonnotall(){
            var elements = document.getElementsByName("checkBox");
            for (let i = 0; i < elements.length; i++) {
                elements[i].setAttribute("checked", "")
                elements[i].checked = false;
            }
        }

        function buttonfei(){
            var elements = document.getElementsByName("checkBox");
            for (let i = 0; i < elements.length; i++) {
                elements[i].checked = !elements[i].checked;
            }
        }
    </script>
</head>
<body>
    <div>
        <input  type="checkbox" name="checkBox" value="java">java
        <input  type="checkbox" name="checkBox" value="c++">c++
        <input  type="checkbox" name="checkBox" value="python">python
    </div>
    <button onclick="buttonall()">全选</button>
    <button onclick="buttonnotall()">全不选</button>
    <button onclick="buttonfei()">反选</button>
</body>
</html>

DOM属性和方法

DOM方法：
getElementById() 方法返回当前节点的指定ID名的孩子节点。这跟document的方法范围不同，这个只是查询当前节点的孩子节点，document是查询整个文档
appendChild(oChildNode)为当前DOM对象添加子节点

DOM属性：
请添加图片描述
这里的节点其实就是包装好的DOM对象
innerHTML是指节点内的完整HTML代码，innerText只是文本

DOM中添加节点

document和DOM对象很多的方法都比较像，两者作用的范围不一样，不要搞混了
下面例子用document来创建div元素节点，然后为body节点添加这个元素节点

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <script type="text/javascript">
        window.onload = function (){
            //创建div元素节点
            var element = document.createElement("div");
            element.innerText = "添加子节点"
            //为body中添加子节点
            document.body.appendChild(element);
        }
    </script>
</head>
<body>

</body>
</html>