javaScript

JAVASE基础

发布时间 : 2022-07-07 12:54

字数:2.5k 阅读 :

js的代码该如何去编写
JavaScript变量
1. 数组的定义方式
2. JS对象
函数的两种定义方式
JS中的事件
1. 关于html的上下文文本对象document
  1. 标签的常用属性

什么是JavaScript？

JavaScript语言诞生主要是完成页面的数据验证

因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码，简称JS
JS是Netscape网景公司的产品，最早取名为LiveScript 为了吸引更多java开发人员，更名为JavaScript，JS是弱类型，Java是强类型

JavaScript和html代码的结合

使用script标签来书写JavaScript代码
使用script标签引入单独的JavaScript代码文件

JavaScript是运行在客户端的一门编程语言，简称js

js的代码该如何去编写

我们需要结合html来编写js代码：

a、在html文件中定义一个<script></script>标签，在该标签的内部去写js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>

<!--定义一个script去写js代码-->
<script>

    //js中封装的有对应的函数
    alert("网页弹窗");

</script>
<body>



</body>
</html>

b、会声明一个js文件，在js文件中去写js代码，然后通过<script>标签去引入js文件

<!--引入js文件-->
<script type="text/javascript" src="../js/test.js"></script>

JavaScript变量

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

在js中如何去声明一个变量

var、let这两个关键字可以去接收一个变量

而且任何变量都可以用这两个关键字接收

var i = 100

let str = “123456”

关于js中的逻辑运行算（与 && 或 || 非 ! ）：

在js中 null、undefined、0 、false参与逻辑运算时本身代表的是false，其余所有的数据都表示true

与运算

如果参与&&与运算两者都为真的情况下，会取到后者的值
如果参与&&与运算有一者为假的情况下，会取到为假的那个值
如果参与&&与运算两者都为假的情况下，会取到前者的值

或运算

如果参与||或运算两者都为真的情况下，会取到前者的值
如果参与||或运算有一者为假的情况下，会取到为真的那个值
如果参与||或运算两者都为假的情况下，会取到后者的值

都有惰性取值的特点，最后计算完的值返回

取非！运算，首先要搞清楚，数据本身是为真还是为假，取非之后，真就是假，假就是真

数组的定义方式

JS中数组的定义：

格式：

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

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

js数组可以在一个数组中存放任意类型的值

js数组可以给任意一个下标赋值，未赋值的默认为undefined

遍历数组

for (let i = 0;i < array.length; i++){

    alert(array[i]);

}

JS对象

在js中也能new对象，但是必须使用js封装好的对象

通过对象.属性 = 值的方法赋值，属性和值都可以自定义

let object = new Object();

object.name = "tom";
object.age = 15;
object.address = "北京市";
object.key = "value";

alert(object.name);
alert(object.age);
alert(object.address);

//正则对象
let regExp = new RegExp();

函数的两种定义方式

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

function function01(num1,num2){
    
    let num = num1 + num2;
    
    return num;
    
}

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

let function02 = function(num1,num2){
    
    let num = num1 + num2;
    
    return num;
    
}

注：js中的函数，在定义参数的时候可以不用写数据类型，参数与参数之间用逗号分割

注：js中的函数没有返回值类型，在函数体中写完代码之后，有返回值就返回，没有返回值就不用返回

注：js中的函数是不支持重载的，如果你同时定义了两个同名的函数，下面那个会覆盖上面那个

在JavaScript语言中，定义带有返回值的函数只需要在函数体内直接使用return语句返回值即可

JS隐式参数

//arguments js 中的隐式参数，是一个数组类型，可以去接收所有数据
function function02(){

    alert(arguments[0]);
    alert(arguments[1]);
    alert(arguments[2]);

}

alert(function02(100,true,"hello"));

简单的数字相加函数

let function02 = function(num1,num2) {

       let num = null;

       if ((typeof num1) == "number" && (typeof num2) == "number") {

           let num = num1 + num2;

       } else {

           return "你传的数据不合法";

       }

       return num;
   }

JS中的事件

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

关于js中的事件（分为静态注册和动态注册）：

静态注册：通过html标签内部的事件属性来完成事件的注册

<body onload="alert('静态注册页面加载完成事件')"> </body>

<!--鼠标单机事件：静态注册-->
<input type="button" value="测试鼠标单机事件" onclick="alert('鼠标单机事件静态注册')">

动态注册：先通过dom对象获取到某一个具体的html元素，然后对这个标签进行绑定，注册事件

document.getElementById()通过id这个属性查找html元素

注：动态注册一定要写在script标签中，或者js文件中

//页面加载完成事件动态注册
//window是html内置对象
  window.onload = function (){
      
    //在该函数中完成页面初始化的操作
      
      alert("动态绑定页面加载完成事件")

  }

动态注册单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>

<!--定义一个script去写js代码-->
<script type="text/javascript">


  //页面加载完成事件动态注册
  //window是html内置对象
    window.onload = function (){

        alert("动态绑定页面加载完成事件")

        //通过动态注册的方式来注册单击事件
        let elementInput = document.getElementById("onclickTest");

        //[object HTMLInputElement] dom对象
        alert(elementInput)

        //动态注册单击事件
        elementInput.onclick=function (){

            alert("触发了单击事件，动态注册的方式")

        }
    }


    

</script>

<!--引入js文件-->
<!--<script type="text/javascript" src="../js/test.js"></script>-->
<body>

    <!--鼠标单机事件：静态注册-->
    <input type="button" value="测试鼠标单机事件(静态)" onclick="alert('鼠标单机事件静态注册')"><br>
    <input type="button" value="测试鼠标单机事件(动态)" id="onclickTest"><br>
</body>
</html>

加载完成事件（onload）：

浏览器在解析html页面的时候是一个标签一个标签的往下解析

在浏览器解析完所有的html元素之后会触发的操作

失去焦点事件（onblur）

测试鼠标失去焦点事件(静态):<input type="text" id="onblur" onblur="alert('触发了失去焦点事件')"><br>

//动态绑定失去焦点事件
let elementOnblur = document.getElementById("onblurTest");

//绑定事件
elementOnblur.onblur = function (){

    alert("触发了失去焦点事件，动态注册的方式");

}

内容发送改变事件（onchange）

测试内容发生改变事件(静态):<input type="text" value="123" onchange="alert('内容已发生改变')"><br>

//内容发生改变事件
let elementSelect = document.getElementById("onchangeTest");

//绑定事件
elementSelect.onchange = function (){

    alert("内容已发生改变,动态注册的方式");

}

关于html的上下文文本对象document

这个是html内置的对象，通过这个对象可以去获取html对象（标签）

而且获取的方式有很多种（比如：根据id属性获取，根据name属性获取，根据具体的标签名称获取）

DOM模型和document对象

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

document对象

1.Document它管理了所有的HTML文档内容

2.document它是一种树结构的文档，有层级关系

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

4.我们可以通过document访问所有的标签对象

Document对象中的方法

document.getElementById(elementId)通过标签的id属性查找标签dom对象，elementId是标签的id属性值
document.getElementsByName(elementName)通过标签的name属性查找标签dom对象，elementName标签的name属性值
document.getElementsByTagName(tagname)通过标签名找标签dom对象，tagname是标签名
document.createElement(tagName)方法，通过给定的标签名，创建一个标签对象，tagName是要创建的标签名

//获取所有name属性值为username的标签
let inputEls = document.getElementsByName("username");

//[object NodeList]
alert(inputEls);

for (let i = 0; i < inputEls.length; i++) {

    alert(inputEls[i]);

}

标签的常用属性

childNodes属性，获取当前节点的所有子节点
firstChild属性，获取当前节点的第一个子节点
lastChild属性，获取当前节点的最后一个子节点
parentNode属性，获取当前节点的父节点
nextSibling，获取当前节点的下一个节点
previousSibling属性，获取当前节点的上一个节点
className用于获取或设置标签的class属性值
innerHTML属性，表示获取/设置起始标签和结束标签中的内容
innerText属性，表示获取/设置起始标签和结束标签中的文本

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以邮件至 1300452403@qq.com