当前位置： 首页 > news >正文

web前端开发-JS

news 2025/7/29 19:14:00

web前端开发-JS

什么是JavaScript

  • Web标准也称网页标准,由一系列的标准组成,大部分由W3C(World Wide Web Consortium,万维网联盟)负责制定。
  • 三个组成部分:
    • HTML:负责网页的结构(页面元素和内容)。
    • CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。
    • JavaScript:负责网页的行为(交互效果)。
  • JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言（不用编译直接运行）,是用来控制网页行为,实现页面的交互效果。
    JavaScript 和 Java 是完全不同的语言,不论是概念还是设计。但是基础语法类似。
  • 组成:
    • ECMAScript:规定了JS基础语法核心知识,包括变量、数据类型、流程控制、函数、对象等。
      • ECMA:ECMA国际(前身为欧洲计算机制造商协会),制定了标准化的脚本程序设计语言 ECMAScript,这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的(ES2024是最新版本)。
    • BOM:浏览器对象模型,用于操作浏览器本身,如:页面弹窗、地址栏操作、关闭窗口等。
    • DOM:文档对象模型,用于操作HTML文档,如:改变标签内的内容、改变标签内字体样式等。

核心语法

引入方式

  • 内部脚本:将JS代码定义在HTML页面中
    • JavaScript代码必须位于标签之间
    • 在HTML文档中,可以在任意地方,放置任意数量的

在这里插入图片描述

  • 外部脚本:将 JS代码定义在外部 JS文件中,然后引入到HTML页面中，复用性更强
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
</head>
<body>
    <script>
    // 弹出提示框,结尾分号可有可无
    // 内部脚本
    alert("hello JS");
    </script>

    <!--  外部脚本-->
    <script src="js/test.js"></script>
    
    
</body>
</html>

JS书写规范

  • 结束符:每行结尾以分号结尾,结尾分号可有可无，最好要么全加要么不加

基础语法

变量：

  • JS中用 let 关键字来声明变量(弱类型语言,变量可以存放不同类型的值)。
  • 变量名需要遵循如下规则:
    • 只能用 字母、数字、下划线(_)、美元符号($)组成,且数字不能开头
    • 变量名严格区分大小写,如 name 和 Name 是不同的变量
    • 不能使用关键字,如:let、var、if、for等

在这里插入图片描述

早期的js中，还可以使用var声明变量，但是不严谨，使用这个可以重复声明和全局作用域

常量：

  • JS中用 const 关键字来声明常量。
  • 一旦声明,常量的值就不能改变(不可以重新赋值)。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基础语法</title>
</head>
<body>
    <script>
        // 什么变量，弱类型，不用申明变量类型
        let a = 1;
        a="HELLO"
        alert(a)//弹出框
        const PI=3.14;
        //pI =5.0;// 不报错,但没改变值
        console.log(PI);//输出到控制台，按f12，这时可以看到控制台报错（不能为常量赋值）
        document.write("hello world");//不常用，直接将内容输出到页面的body中
    </script>
    
</body>
</html>

数据类型 ：

弱类型的语言不代表没有类型，只是声明变量时不用声明

  • JavaScript的数据类型分为:基本数据类型和引用数据类型(对象)。

  • 基本数据类型:

    • number:数字(整数、小数、NaN(Not a Number)

    NaN (Not a Number) 是一个特殊的数值，表示一个不是数字的数值。当执行数学运算但结果不是有效数字时就会出现NaN。例如：

    • 试图将字符串转换为数字但失败时
    • 执行无法得到数字结果的数学运算时（比如 0/0）
    • 使用NaN进行任何数学运算，结果都会是NaN

    有趣的是，尽管NaN表示"不是一个数字"，它在JavaScript中的数据类型仍然是number。

    • boolean:布尔。true,false
    • null:对象为空。JavaScript是大小写敏感的,因此null、Null、NULL是完全不同的
    • undefined:当声明的变量未初始化时,该变量的默认值是 undefined
    • string:字符串,单引号、双引号、反引号皆可,推荐使用单引号

● 使用 typeof 运算符可以获取数据类型:

在这里插入图片描述

  • 模板字符串语法:
    • ``(反引号,英文输入模式下按键盘的tab键上方波浪线~那个键)
    • 内容拼接变量时,使用 ${} 包住变量

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-数据类型</title>
</head>
<body>
    <script>
           alert(typeof 1)
    alert(typeof "1")
    alert(typeof true)
    alert(typeof undefined)
    alert(typeof null)//object
    alert(typeof NaN)
    let a;
    alert(typeof a)
    alert(typeof `javascript`)
    //2.模板字符串，简化字符串拼接
    let name = "小明"
    let age = 18
    alert(`${name}今年${age}岁`)
    </script>

 
</body>
</html>

函数：

  • 介绍:函数(function)是被设计用来执行特定任务的代码块,方便程序的封装复用。
  • 定义:JavaScript中的函数通过function关键字进行定义,语法为:
  • 不指定返回值的类型和参数类型名

在这里插入图片描述

  • 调用：函数名称（实际参数列表）

在这里插入图片描述

注意:

  • 由于JS是弱类型语言,形参、返回值都不需要指定类型。在调用函数时,实参个数与形参个数可以不一致,但是建议一致。

匿名函数;

  • 匿名函数是指一种没有名称的函数。可以通过两种方式定义：函数表达式和箭头函数

在这里插入图片描述

  • 匿名函数定义后，可以通过变量名直接调用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-函数</title>
</head>
<body>
    <script>
        //1具名函数
    function add(a,b){
       return a+b;
    }
    let c=add(1,2);
    console.log(c);
    let d=add(3,4,6);//只传入2个参数，所以只返回2个参数相加的结果
    console.log(d);
    let add1=function(a,b){
        return a+b;
    }
    console.log(add1(1,22));
    
    let add2=(a,b)=>a+b;
    console.log(add2(1,200));
   </script>
    
</body>
</html>

自定义对象：

定义格式：

在这里插入图片描述

调用格式：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-自定义对象</title>
</head>
<body>
    <script>
        class Person{
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            say(){
                console.log(`我叫${this.name},今年${this.age}岁`);
            }
        }
        let p = new Person('张三',18);
        alert(p.name)
        
        let user={
            name:'张三',
            age:18,
            sing1:()=>{//箭头函数的this指向外部函数的this,不推荐
                console.log(`我叫${this.name},今年${this.age}岁`);
            },
            say:function(){
                console.log(`我叫${this.name},今年${this.age}岁`);
            },
            sing:function(){
                console.log(`我叫${this.name},今年${this.age}岁`);
            }
            
        }
        alert(user.name)
        alert(user.age)
        alert(user.say())
    </script>
</body>
</html>

Json

  • 概念:JavaScript Object Notation,JavaScript对象标记法(JS对象标记法书写的文本)。
  • 由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输。

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-自定义对象</title>
</head>
<body>
    <script>

        
        let user={
            name:'张三',
            age:18,
            sing1:()=>{//箭头函数的this指向外部函数的this,不推荐
                console.log(`我叫${this.name},今年${this.age}岁`);
            },
            say:function(){
                console.log(`我叫${this.name},今年${this.age}岁`);
            },
            sing:function(){
                console.log(`我叫${this.name},今年${this.age}岁`);
            }
        }
        alert(JSON.stringify(user));
        let personJson='{"name":"heima","age":"18"}';//注意外面要单引号，里面name不用大括号，必须双引号
        alert(JSON.parse(personJson).name);
        
    </script>
</body>
</html>

DOM

  • 概念:Document Object Model,文档对象模型。
    • 将标记语言的各个组成部分封装为对应的对象:
    • Document:整个文档对象
    • Element:元素对象
    • Attribute:属性对象
    • Text:文本对象
    • Comment:注释对象
  • JavaScript 通过DOM,就能够对HTML进行操作:
    • 改变 HTML 元素的内容
    • 改变 HTML 元素的样式(CSS)
    • 对 HTML DOM 事件作出反应
    • 添加和删除 HTML 元素

在这里插入图片描述

在这里插入图片描述

DOM操作：

  • DOM操作核心思想:将网页中所有的元素当做对象来处理。(标签的所有属性在该对象上都可以找到)
  • 操作步骤:
    • 获取要操作的DOM元素对象
    • 操作DOM对象的属性或方法(查文档或AI)
  • 获取DOM对象

    • 根据CSS选择器来获取DOM元素,获取匹配到的第一个元素:document.querySelector(‘选择器’)#sid .txt span

    • 根据CSS选择器来获取DOM元素,获取匹配到的所有元素:document.querySelectorAll(‘选择器’)

      注意:得到的是一个NodeList节点集合,是一个伪数组(有长度、有索引的数组)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
DOM
    </title>
</head>
<body>
    <h1 id="title1">DOM</h1>
    <h1>111111111111111</h1>
    <h1>1111111222222</h1>
    <script>
        //1.修改第一个h1标签的文本内容
        // let h1=document.querySelector('#title1');
        let h1=document.querySelector('h1');//获取第一个h1标签
        let hs=document.querySelectorAll('h1');//获取所有h1标签
        //w3shchool.com中DOM查对象
        h1.innerHTML='DOM修改文本内容';
        hs[0].innerHTML='DOM修改文本内容1231';

    </script>

    
</body>
</html>

事件监听

  • 事件:HTML事件是发生在HTML元素上的“事情”。比如:
    • 按钮被点击
    • 鼠标移动到元素上
    • 按下键盘按键
  • 事件监听:JavaScript可以在事件触发时,就立即调用一个函数做出响应,也称为 事件绑定或注册事件。
  • 语法:事件源.addEventListener('事件类型’,事件触发执行的函数);
  • 事件监听三要素
    • 事件源:哪个dom元素触发了事件,要获取dom元素
    • 事件类型:用什么方式触发,比如:鼠标单击 click
    • 事件触发执行的函数:要做什么事

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听</title>
</head>
<body>
    <input type="button" id="btn1" value="按钮1">
    <input type="button" id="btn2" value="按钮2">
    <script>
        //可以多次绑定同一事件，多次显示
        document.querySelector('#btn1').addEventListener('click',()=>{
            alert('btn1');
        })
        document.querySelector('#btn2').addEventListener('click',()=>{
            alert('btn2');
        })
        // onclick.早期的方式,多次绑定同一事件会覆盖之前的绑定
        document.querySelector('#btn1').onclick=()=>{
            alert('btn1');
        }

    </script>
    
</body>
</html>

常见事件

鼠标事件

  • click：鼠标点击
  • mouseenter：鼠标移入
  • mouseleave：鼠标移出

键盘事件：

  • keydown：键盘按下触发
  • keyup：键盘抬起触发

焦点事件：

  • focus：获得焦点触发
  • blur：失去焦点触发

表单事件：

  • input：用户输入时触发
  • submit：表单提交时触发

import和export：js文件之间的引入(模块化js)

然后再html属性要声明type=“module”

http://www.dtcms.com/a/106381.html

相关文章：

  • Python爬虫第3节-会话、Cookies及代理的基本原理
  • PCL RANSAC探测空间直线（指定方向）
  • Pyspark学习一：概述
  • ARM板 usb gadget hid 模拟键鼠
  • 基于 Jackson 的 JSON 工具类实现解析与设计模式应用
  • 网盘解析工具v1.3.1发布，希望能解决黑号问题吧
  • LTSPICE仿真电路：（二十四）MOS管推挽驱动电路简单仿真
  • 【idea】实用插件
  • Redis 03
  • HTML表单元素input
  • C++17更新内容汇总
  • CentOS 7 上安装 Hadoop 集群的详细教程
  • 华为2024年营收逼近历史峰值：终端业务复苏、智能汽车爆发式增长
  • Leetcode hot 100（day 3）
  • HDMI接口类型介绍
  • 在openharmony中部署helloworld应用(超详细)
  • 线段树,单点,区间修改查阅
  • 酶动力学预测工具CataPro安装教程
  • Rabbit：流加密的 “极速赛车手”
  • 单例模式与线程安全
  • 每日算法-250402
  • SESSION_UPLOAD_PROGRESS 的利用
  • Spark、Flink 和 TensorFlow 三大分布式数据处理框架对比
  • 微服务架构技术栈选型避坑指南：10大核心要素深度拆解
  • 供应链中的的“四流合一”
  • 以太网报文结构 via ethernetPacket in CAPL
  • 三轴云台之相机技术篇
  • JavaWeb开发基础知识-Servlet终极入门指南（曼波萌新版）
  • KingbaseES物理备份还原之物理备份
  • 单框架鸿蒙开发