您的位置：首页 > 游戏 > 游戏 > 上海建站模板系统_网页设计html代码大全ppt_国外免费域名申请_搜索引擎营销有哪些方式

上海建站模板系统_网页设计html代码大全ppt_国外免费域名申请_搜索引擎营销有哪些方式

2025/4/3 12:43:23 来源：https://blog.csdn.net/2402_84235386/article/details/146967633  浏览:  次   关键词：上海建站模板系统_网页设计html代码大全ppt_国外免费域名申请_搜索引擎营销有哪些方式
上海建站模板系统_网页设计html代码大全ppt_国外免费域名申请_搜索引擎营销有哪些方式

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)//objectalert(typeof NaN)let a;alert(typeof a)alert(typeof `javascript`)//2.模板字符串，简化字符串拼接let name = "小明"let age = 18alert(`${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”

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

最新新闻

热搜词

格初步（五） 互联网+教育 Spring-事务属性 java继承总结 嗖嗖二手汽车网站(需求文档) 手持枪光源的选择

声明：本站所有新闻及新闻图片来源于其他网站，如有侵权，请及时联系我们！

客户服务 | 关于我们 | 版权声明

版权所有：

Copyright 2024 尧图网 All Rights Reserved.QQ:809451989