JavaWeb(二）JavaScript-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_38143506/article/details/116430883

本文详细介绍了JavaScript的基础知识，包括其与Java的区别、弱类型特性、变量类型、特殊值、关系和逻辑运算符、函数定义、自定义对象、事件处理及正则表达式。此外，还探讨了DOM操作，如节点属性和方法，以及事件注册的静态和动态方式。通过实例展示了如何在实际网页中应用JavaScript进行交互和验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript介绍

Java和JavaScript的关系
JS是弱类型语言
特点
（1）交互性：信息的动态交互
（2）安全性：不允许直接访问本地硬盘
（3）跨平台性：只要可以解释JS的浏览器都可以执行，和平台无关
使用初体验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--src属性专门用来引入js文件路径-->
  <!--scrip标签可以用来定义js代码，也可以用来引入js文件，但两个功能只能选择一个使用
    如果要使两个都生效，需要再创建一个script标签-->
  <script type="text/javascript" src="MyJavaScript.js">
    /*错误，不会生效*/
    //alert("hello myBaby");
  </script>
  <script type="text/javascript">
    alert("hello myBaby");
  </script>
</head>
<body>

</body>
</html>

JS中的变量

JS的变量类型

数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function
任意类型：var
typeof(变量名）:返回变量的类型

JS中特殊的值

undefined：未定义，所有js变量未赋予初始值时，默认值都是undefined
null:空值
NAN：not a number。非数字，非数值（如一个number*string）

JS中的关系运算符

主要注意两个符号：
（1）“”：比较两个的值是否相等123“123”是true
(2) "=":不仅计较值，还要比较变量类型，123=“123”是false

JS中逻辑运算符

0、null、undefined、空串（“”）为false，其他任何值都为true
&&且运算
（1）当表达式全为真时，返回最后一个表达式的值
（2）有一个为假时，返回第一个为假的表达式的值
||或运算
（1）当表达式全为假时，返回最后一个表达式的值
（2）只要有一个表达式为真，就把第一个为真的表达式的值返回
总结
进行布尔运算的且和或的运算，当运算到某一个变量就得出最终结果，就返回该变量的值

JS中函数的定义

第一种定义方式：使用function关键字定义函数
function 函数名（参数）{
…
return
}
参数无需类型，函数无需返回类型
第二种定义方式
var 函数名 = function（形参列表）{函数体}
在JS中函数不允许重载,否则会直接覆盖上一次的定义
函数的arguments隐形参数（只在function函数内）
（1）就是在function函数中不需要定义参数，但却可以直接用来获取实际传入的参数的变量，称为隐形参数
（2）隐形参数类似Java基础的可变参数一样
（3）可变参数其实是一个数组，隐形参数也是一个数组
（4）arguments.length:参数的个数
arguments[i]：第i个参数值

JS中自定义对象

Object形式的自定义对象

var 变量名 = new Object();
变量名.属性名 = 值；
变量名.函数名 = function（）{}

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

var 变量名 = {
属性名：值，
属性名：值，
函数名：function（）{
}
}；

JS中的事件

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

事件的注册

告诉浏览器，当事件相应后要执行哪些操作代码，叫事件注册或事件绑定

静态注册事件

通过html标签的事件属性直接赋予事件相应后的代码
示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function init(){
      alert("初始化页面1");
    }
    function onclickFunc(){
      alert("按钮1");
    }
  </script>
</head>
<body onload="init()">
  <button onclick="onclickFunc()">按钮1</button>
</body>
</html>

动态注册事件

先通过js代码得到dom对象，然后通过dom对象.事件名=function()这种形式赋予事件相应后的代码
示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    window.onload = function(){
      alert("动态初始化");
      //1. 获取标签对象
      var button1 = document.getElementById("button_1");
      //2. 通过标签对象.事件名=function（）{}
      button1.onclick = function (){
        alert("按钮1");
      }
    }

  </script>
</head>
<body>
  <button id="button_1">按钮1</button>
</body>
</html>

正则表达式

https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

DOM模型

在这里插入图片描述

DOM全称是：Document Object Model文档对象模型。就是把文档中的标签，属性，文本转换为对象来管理。

Document对象的三个查询方法

在这里插入图片描述
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象

判断输入框内容的合法性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function onclickFun(){
      var username = document.getElementById("username");
      var usernameValue = username.value;
      /*利用正则表达式判断格式的合法性*/
      var rule = /^\w{5,12}$/;
      var info = document.getElementById("info");
      if(rule.test(usernameValue)){
        info.style.color="green";
        info.innerHTML="正确";
      }
      else{
        info.style.color="red";
        info.innerHTML="错误";
      }
    }
  </script>
</head>
<body>
    用户名:<input type="text" id="username"/>
    <span id="info"></span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

节点的常用属性和方法

节点就是标签对象,文本也属于节点

方法

通过具体的元素节点调用：getElementByTagName()获取当前节点的指定标签名的孩子节点
appendChild（oChildNode):可以添加一个子节点，oChildNode是要添加的孩子节点

属性：

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

DOM查询练习

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>dom查询</title>
  <link rel="stylesheet" type="text/css" href="style/css.css"/>
  <script type="text/javascript">
    window.onload = function () {
      //1.查找#bj节点
      document.getElementById("btn01").onclick = function () {
        var bjobj = document.getElementById("bj");
        alert(bjobj.innerHTML);
      }
      //2.查找所有li节点
      var btn02Ele = document.getElementById("btn02");
      btn02Ele.onclick = function () {
        var liobj = document.getElementsByTagName("li");
        alert(liobj.length);
      };
      //3.查找name=gender的所有节点
      var btn03Ele = document.getElementById("btn03");
      btn03Ele.onclick = function () {
        var genderrobj = document.getElementsByName("gender");
        alert(genderrobj.length);
      };
      //4.查找#city下所有li节点
      var btn04Ele = document.getElementById("btn04");
      btn04Ele.onclick = function () {
        var cityobj = document.getElementById("city");
        var cityliobj = cityobj.getElementsByTagName("li");
        alert(cityliobj.length);
      };
      //5.返回#city的所有子节点
      var btn05Ele = document.getElementById("btn05");
      btn05Ele.onclick = function () {
        var cityobj = document.getElementById("city");
        var citychilds = cityobj.childNodes;
        alert(citychilds.length);
      };
      //6.返回#phone的第一个子节点
      var btn06Ele = document.getElementById("btn06");
      btn06Ele.onclick = function () {
        var phoneobj = document.getElementById("phone");
        var phonefirstchild = phoneobj.firstChild;
        alert(phonefirstchild.innerHTML);
      };
      //7.返回#bj的父节点
      var btn07Ele = document.getElementById("btn07");
      btn07Ele.onclick = function () {
        var parentNode = document.getElementById("bj").parentNode;
        alert(parentNode.id);
      };
      //8.返回#android的前一个兄弟节点
      var btn08Ele = document.getElementById("btn08");
      btn08Ele.onclick = function () {
        var previousSibling = document.getElementById("android").previousSibling;
        alert(previousSibling.innerHTML);
      };
      //9.读取#username的value属性值
      var btn09Ele = document.getElementById("btn09");
      btn09Ele.onclick = function () {
        var value = document.getElementById("username").value;
        alert(value);
      };
      //10.设置#username的value属性值
      var btn10Ele = document.getElementById("btn10");
      btn10Ele.onclick = function () {
        document.getElementById("username").value = "hello world";
      };
      //11.返回#bj的文本值
      var btn11Ele = document.getElementById("btn11");
      btn11Ele.onclick = function () {
        var bjtext = document.getElementById("bj").innerHTML;
        alert(bjtext);
      };
    };
  </script>
</head>
<body>
<div id="total">
  <div class="inner">
    <p>
      你喜欢哪个城市?
    </p>

    <ul id="city">
      <li id="bj">北京</li>
      <li>上海</li>
      <li>东京</li>
      <li>首尔</li>
    </ul>

    <br>
    <br>

    <p>
      你喜欢哪款单机游戏?
    </p>

    <ul id="game">
      <li id="rl">红警</li>
      <li>实况</li>
      <li>极品飞车</li>
      <li>魔兽</li>
    </ul>

    <br/>
    <br/>

    <p>
      你手机的操作系统是?
    </p>

    <ul id="phone">
      <li>IOS</li>
      <li id="android">Android</li>
      <li>Windows Phone</li>
    </ul>
  </div>

  <div class="inner">
    gender:
    <input type="radio" name="gender" value="male"/>
    Male
    <input type="radio" name="gender" value="female"/>
    Female
    <br>
    <br>
    name:
    <input type="text" name="name" id="username" value="abcde"/>
  </div>
</div>
<div id="btnList">
  <div>
    <button id="btn01">查找#bj节点</button>
  </div>
  <div>
    <button id="btn02">查找所有li节点</button>
  </div>
  <div>
    <button id="btn03">查找name=gender的所有节点</button>
  </div>
  <div>
    <button id="btn04">查找#city下所有li节点</button>
  </div>
  <div>
    <button id="btn05">返回#city的所有子节点</button>
  </div>
  <div>
    <button id="btn06">返回#phone的第一个子节点</button>
  </div>
  <div>
    <button id="btn07">返回#bj的父节点</button>
  </div>
  <div>
    <button id="btn08">返回#android的前一个兄弟节点</button>
  </div>
  <div>
    <button id="btn09">返回#username的value属性值</button>
  </div>
  <div>
    <button id="btn10">设置#username的value属性值</button>
  </div>
  <div>
    <button id="btn11">返回#bj的文本值</button>
  </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>创建html标签</title>
  <script type="text/javascript">
    window.onload = function (){
      var htmlDivElement = document.createElement("div");
      htmlDivElement.innerHTML = "夏日午后";
      //添加子元素
      document.body.appendChild(htmlDivElement);
    }

  </script>
</head>
<body>

</body>
</html>