网页前端开发(基础进阶2)

news2025/6/3 20:00:41

前面学习了html与css,接下来学习JS(JavaScript与Java无关)。

web标准(网页标准)分为3个部分:

1.html主要负责网页的结构(页面的元素和内容)

2.css主要负责网页的表现(元素的外观,位置等页面样式)

3.js主要负责网页的行为(交互效果 )

JavaScript是跨平台,脚本语言(不用编译,直接运行的语言)

JS主要负责控制网页的行为,实现网页的交互效果。

JS的组成(3个部分)

1.ECMAScript:规定了JS基础语法的核心知识,包含:变量,数据类型,流程控制,函数,对象。

2.BOM:浏览器对象模型,用于操作浏览器,如:页面弹窗,地址栏操作。

3.DOM:文档对象模型,用于操作html文档,改变标签内容,改变标签样式。

JS的核心语法

1.JS的引入方法

(1)使用内部脚本:将JS代码定义在html页面中。

        JS代码位于<script>  </script>标签之间

        在html文件中,可在任意地方,放置任意的<script>  </script>标签

建议在html文件中,将<script>  </script>标签放置在<body>的最下方

示例:

<body>

        ..........

        .........

        <script> 

                alert(‘hello world’)//弹出一个提示栏,显示hello world

        </script>

</body>

(2)使用外部脚本:新建text.js文件

        在text.js文件中写入 alert(‘hello world’)//弹出一个提示栏

        在html文件中,引用js文件。<script src=“js/text.js”> </script>

示例:

在text.js文件

alert(‘hello world’)

在html文件中

<body>

        ..........

        .........

       <script src=“js/text.js”> </script>

</body>

2.JS的基础语法

(1)声明变量

        JS中使用let声明变量,JS是若类型语言,同一变量可存放不同类型的值。

<body>

        ..........

        .........

        <script> 

                let a=20;

                a="hello";

                alert(a)//弹出一个提示栏,显示hello

                const PI=3.14;//使用const定义变量,定义后变量不可改变

                PI=3.2;//报错

        </script>

</body>

(2)数据类型

        JS的数据类型分为两种:基本数据类型和引用数据类型(对象)。

        基本数据类型有5种,number(数字类型,包含整数,浮点数。NaN),boolear(布尔类型,只有true和false),null(为空),undefined(未初始化),string(字符串类型,推荐使用‘ ’单引号)。

        使用typeof可获取变量的数据类型。

<body>

        ..........

        .........

        <script> 

                let name='Tom';

                let age=20;

                console.log('你好,我是'+name+',我今年'+age+'岁了。')

                console.log(`你好,我是${name},我今年${age}岁了。`)//可使用` `反引号,对字符串进行拼接,使用${ }。

                alert(typeof name); //获取变量name的数据类型,为string(字符串)。

        </script>

</body>

     

 (3)函数 function

        函数:执行特定任务的代码块,方便程序的封装复用。

JS中函数的定义

function My(参数1,参数2){

        ..............
}

示例:

<body>

        ..........

        .........

        <script> 

                function add(a,b){

                        return a+b;
                }

                let result=add(10,20);

                console.log(result)

        </script>

</body>

特殊的函数:匿名函数

方法1:

        let add=function(a,b){

                return a+b;
        }

方法2:

        let add=(a,b)=>{

                return a+b;
        }

 (4)自定义对象

定义格式

let user={

        name='Tom',

        age=20,

        gender=‘男’,

                sing:function(){

                        alert(‘我的名字是’+this.name);

                }

}

调用格式:

console.log(user.name);

user.sing();

 (5)json

json用于数据载体,用来存储数据。

特点:层次分明,结构简单

JS对象

{

        name=“Tom”,

        age=20,

        gender="男"

}

json文本

{

        "name"=“Tom”,

        "age"=20,

        "gender"="男"

}

JS对象->json文本 使用JSON.stringify()进行转换

json文本->JS对象 使用JSON.parse()进行转换

示例1

let person={

        name=“Tom”,

        age=20,

        gender="男"

}

alert(person)        //弹出框,只能弹出[Object,Object,Object]

alert(JSON.stringify(person))  //弹出框,弹出{"name"=“Tom”,"age"=20,"gender"="男"}

示例2

let personJ='{"name"=“Tom”,"age"=20,"gender"="男"}'

alert(JSON.parse(personJ).name)   //弹出Tom

JS的事件监听

        事件:HTML事件是发生在HTML元素上的事情。如:按钮被点击,鼠标移动到元素上,按下键盘的按钮。

        事件监听:JavaScript可以在事件触发时,就立即调用一个函数,做出响应,被称为“事件绑定”或“注册事件”。

        事件源:.addEventListener('事件类型',事件触发时执行的函数)

1.事件源:哪个元素触发事件,就获取哪个元素

2.事件类型:触发事件的类型。如:鼠标点击 click

3.事件触发时,执行的函数

示例

<body>

        ..........

        .........

        <input id="bin" type="button" value="点击一下">

        <script> 

                document.querySelector('#bin').addEventListener('click',()=>{

                        alert('测试');   

                })

        </script>

</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2395413.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

简历制作要精而不简

不得不说&#xff0c;不管是春招&#xff0c;还是秋招&#xff0c;我们在求职时&#xff0c;第一步便是制作一份简历。不得不承认&#xff0c;好的简历&#xff0c;就像一块敲门砖&#xff0c;能让面试官眼前一亮&#xff0c;让应聘成功的概率增添一分。 对于一个初次求职者来…

SPA-RL:通过Stepwise Progress Attribution训练LLM智能体

SPA-RL&#xff1a;通过Stepwise Progress Attribution训练LLM智能体 在大语言模型&#xff08;LLM&#xff09;驱动智能体发展的浪潮中&#xff0c;强化学习&#xff08;RL&#xff09;面临着延迟奖励这一关键挑战。本文提出的SPA-RL框架&#xff0c;通过创新的分步进度归因机…

【深度学习】9. CNN性能提升-轻量化模型专辑:SqueezeNet / MobileNet / ShuffleNet / EfficientNet

SqueezeNet / MobileNet / ShuffleNet / EfficientNet 一、背景与动机 随着深度神经网络在图像识别任务上取得巨大成功&#xff0c;它们的结构越来越深、参数越来越多。然而在移动端或嵌入式设备中&#xff1a; 存储资源有限推理计算能力弱能耗受限 因此&#xff0c;研究者…

Relational Algebra(数据库关系代数)

目录 What is an “Algebra” What is Relational Algebra? Core Relational Algebra Selection Projection Extended Projection Product&#xff08;笛卡尔积&#xff09; Theta-Join Natural Join Renaming Building Complex Expressions Sequences of Assignm…

Chorme如何对于youtube视频进行画中画背景播放?

画中画可以让你小窗播放&#xff0c;然后浏览器放后台还可以做点别的事情。 B站直接可以选择小窗播放&#xff0c;游览器最小化就可以&#xff0c;但是youtube的小窗播放游览器一切换就不显示了。 其实是因为youtube的小窗播放不是真的小窗播放。要想真的实现需要在youtube视…

017搜索之深度优先搜索——算法备赛

深度优先搜索 如果说广度优先搜索是逐层扩散&#xff0c;那深度优先搜索就是一条道走到黑。 深度优先遍历是用递归实现的&#xff0c;预定一条顺序规则&#xff08;如上下左右顺序&#xff09; &#xff0c;一直往第一个方向搜索直到走到尽头或不满足要求后返回上一个叉路口按…

睿抗机器人开发者大赛CAIP-编程技能赛-历年真题 解题报告汇总 | 珂学家

前言 汇总 睿抗机器人开发者大赛CAIP-编程技能赛-历年真题 解题报告汇总 2024年 2024 睿抗机器人开发者大赛CAIP-编程技能赛-本科组 (国赛) 解题报告 2024 睿抗机器人开发者大赛CAIP-编程技能赛-本科组&#xff08;省赛&#xff09;解题报告 2024 睿抗机器人开发者大赛CAI…

【c++】【数据结构】AVL树

目录 AVL树的定义AVL树的部分模拟实现平衡因子的引入平衡因子的向上调整旋转算法单旋算法右单旋左单旋 双旋算法左右双旋右左双旋 AVL树的定义 AVL树本质是一种搜索二叉树&#xff0c;传统的二叉搜索树我们都有所了解&#xff0c;其在理想情况下也就是接近满二叉树时拥有极高的…

通义灵码深度实战测评:从零构建智能家居控制中枢,体验AI编程新范式

一、项目背景&#xff1a;零基础挑战全栈智能家居系统 目标&#xff1a;开发具备设备控制、环境感知、用户习惯学习的智能家居控制中枢&#xff08;PythonFlaskMQTTReact&#xff09; 挑战点&#xff1a; 需集成硬件通信(MQTT)、Web服务(Flask)、前端交互(React) 调用天气AP…

头歌之动手学人工智能-Pytorch 之优化

目录 第1关&#xff1a;如何使用optimizer 任务描述 编程要求 测试说明 真正的科学家应当是个幻想家&#xff1b;谁不是幻想家&#xff0c;谁就只能把自己称为实践家。 —— 巴尔扎克开始你的任务吧&#xff0c;祝你成功&#xff01; 第2关&#xff1a;optim.SGD 任务描述…

基于谷歌ADK的智能客服系统简介

Google的智能体开发工具包&#xff08;Agent Development Kit&#xff0c;简称ADK&#xff09;是一个开源的、以代码为中心的Python工具包&#xff0c;旨在帮助开发者更轻松、更灵活地构建、评估和部署复杂的人工智能智能体&#xff08;AI Agent&#xff09;。ADK 是一个灵活的…

(一)视觉——工业相机(以海康威视为例)

一、工业相机介绍 工业相机是机器视觉系统中的一个关键组件&#xff0c;其最本质的功能就是将光信号转变成有序的电信号。选择合适的相机也是机器视觉系统设计中的重要环节&#xff0c;相机的选择不仅直接决定所采集到的图像分辨率、图像质量等&#xff0c;同时也与整个系统的运…

DAY 36 超大力王爱学Python

仔细回顾一下神经网络到目前的内容&#xff0c;没跟上进度的同学补一下进度。 作业&#xff1a;对之前的信贷项目&#xff0c;利用神经网络训练下&#xff0c;尝试用到目前的知识点让代码更加规范和美观。探索性作业&#xff08;随意完成&#xff09;&#xff1a;尝试进入nn.Mo…

SRD-12VDC-SL-C 继电器‌接线图解

这个继电器可以使用12伏的直流电源控制250伏和125伏的交流电&#xff0c;也可以控制30伏和28伏的直流电&#xff0c;电流都为10安。 此继电器有5个引脚&#xff0c;各个的作用如下&#xff1a; 引脚4和引脚5为触点&#xff0c; 引脚1和引脚3为线圈引脚&#xff0c;接12伏的直…

基于开源链动2+1模式AI智能名片S2B2C商城小程序的企业组织生态化重构研究

摘要&#xff1a;本文以互联网时代企业组织结构变革为背景&#xff0c;探讨开源链动21模式AI智能名片S2B2C商城小程序在推动企业从封闭式向开放式生态转型中的核心作用。通过分析传统企业资源获取模式与网络化组织生态的差异&#xff0c;结合开源链动21模式的裂变机制、AI智能名…

2,QT-Creator工具创建新项目教程

目录 1,创建一个新项目 demo_01.pro(项目配置文件) 类似 CMakeList.txt widget.h(头文件)​ main.cpp(程序入口)​ widget.cpp(源文件)​ widget.ui(界面设计文件)​ 1,创建一个新项目 依次选择: 设置路径: 选择编译器: 如果选择CMake, 就会生成cmakel…

《深入解析SPI协议及其FPGA高效实现》-- 第一篇:SPI协议基础与工作机制

第一篇&#xff1a;SPI协议基础与工作机制 1. 串行外设接口导论 1.1 SPI的核心定位 协议本质 &#xff1a; 全双工同步串行协议&#xff08;对比UART异步、IC半双工&#xff09;核心优势 &#xff1a; 无寻址开销&#xff08;通过片选直连&#xff09;时钟速率可达100MHz&…

2025年5月6日 飞猪Java一面

锐评 鸡蛋鸭蛋荷包蛋 我的蛋仔什么时候才能上巅峰凤凰蛋? 1. 如何保证数据库数据和redis数据一致性 数据库数据和 redis 数据不一致是在 高并发场景下更新数据的情况 首先我们要根据当前保持数据一致性的策略来决定方案 如果采取的策略是先删除缓存 更新数据库 我们假设现…

【AI论文】推理语言模型的强化学习熵机制

摘要&#xff1a;本文旨在克服将强化学习扩展到使用 LLM 进行推理的主要障碍&#xff0c;即策略熵的崩溃。 这种现象在没有熵干预的RL运行中一直存在&#xff0c;其中策略熵在早期训练阶段急剧下降&#xff0c;这种探索能力的减弱总是伴随着策略性能的饱和。 在实践中&#xff…

Ubuntu22.04 安装 IsaacSim 4.2.0

1. 从官网下载 IsaacSim 4.2.0 安装包 https://download.isaacsim.omniverse.nvidia.com/isaac-sim-standalone%404.2.0-rc.18%2Brelease.16044.3b2ed111.gl.linux-x86_64.release.zip 2. 查阅 Workstation Installation 安装方式 Workstation Installation — Isaac Sim Do…