【JavaScript — 前端快速入门】 JavaScript 引入方式

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


JavaScript


1. JavaScript 介绍


1.1 什么是JavaScript?


最初在网景公司,该语言命名为 LiveScript,当时网景公司认为,Java 作为当时最流行的编程语言,带有
“Java” 的名字有助于这门新生语言的传播,将 LiveScript 命名为 JavaScript.

其实 Java 和 JavaScript 之间的语法风格相去甚远,Java 和 JavaScript 的关系,就像雷锋和雷峰塔一样,就像印度和印度尼西亚一样,就像周杰和周杰伦一样,就像张三和张三丰一样,就像黑客和博客一样;

JavaScript 发展历史可以参考阮一峰大神的博客

http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html


1.2 JavaScript 和 HTML 和 CSS 之间的关系


在这里插入图片描述

  • HTML:网页的结构(骨)
  • CSS:网页的表现(皮)
  • JavaScript:网页的行为(魂)

在这里插入图片描述


2. JavaScript 快速上手


在 HTML 文件中,写如下代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>alert("弹了一个框");</script>
</body>
</html>

在这里插入图片描述

可以和用户进行交互,点击确认之后,弹框消失,再次刷新页面,弹框会再次弹出;


3.引入方式


JS 有3种引入方式,语法如下表格所示:

在这里插入图片描述

  • 行内样式在之前的 HTML 的学习中,我们大概了解到,这其实是一个按钮,标签点击属性 onclick 被赋值为弹窗形式;只适合于写简单样式,只针对某个标签生效,缺点是不能写太复杂的 jS.

  • 内部样式的具体表现形式在上文已列举出,这种写法过于冗余,不方便后期的维护,所以不常用;

  • 外部样式,html 和 js 实现了完全的分离,是企业开发常用方式,简单写法如下:

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

<script>标签中的内容移到 src 文件后,保存两个文件的代码,打开页面,效果和上文相同;


在这里插入图片描述

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5c/c++内存管理

1. C/C内存分布 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd";int* ptr1 (int*)malloc(sizeof(int) * 4);i…

vulnhub靶场之【digitalworld.local系列】的mercy靶机

前言 靶机&#xff1a;digitalworld.local-mercy&#xff0c;IP地址为192.168.10.11 攻击&#xff1a;kali&#xff0c;IP地址为192.168.10.6 kali采用VMware虚拟机&#xff0c;靶机选择使用VMware打开文件&#xff0c;都选择桥接网络 这里官方给的有两种方式&#xff0c;一…

SqlSugar 语法糖推荐方式

//方式1&#xff1a;var dd _repository._Db.Queryable<ConfigAggregateRoot, UserRoleEntity>((o, p) > o.Id p.Id).Select((o, p) > new{o.Id,o.Remark,p.RoleId,});//方式2&#xff1a;不推荐使用&#xff0c;建议优先使用 Lambda 表达式&#xff0c;因为它更…

unity学习63,第2个小游戏:用fungus做一个简单对话游戏

目录 1 目标用fungus做一个简单的剧情对话游戏 1.1 先创建一个新的3D项目 1.2 fungus是什么 1.2.1 怎么获得 1.2 在AssetStore里搜索fungus (插件类)--千万别买收费的错的&#xff01; 1.3 fungus的官网 1.3.1 官网给的3个下载链接&#xff0c;unity的果然已经失效了 …

【RabbitMQ】Producer之TTL过期时间 - 基于AMQP 0-9-1

这篇文章和大家分享Producer发布消息时如何设置消息过期时间&#xff0c;包括队列级别和消息级别&#xff0c;还有如何设置队列的过期时间。 消息过期时间 给消息设置TTL&#xff0c;在超过TTL值后&#xff0c;消息就会变成dead message&#xff08;死信&#xff09;&#xf…

2025.3.2机器学习笔记:PINN文献阅读

2025.3.2周报 一、文献阅读题目信息摘要Abstract创新点网络架构实验结论不足以及展望 一、文献阅读 题目信息 题目&#xff1a; Physics-Informed Neural Networks of the Saint-Venant Equations for Downscaling a Large-Scale River Model期刊&#xff1a; Water Resource…

【HeadFirst系列之HeadFirst设计模式】第14天之与设计模式相处:真实世界中的设计模式

与设计模式相处&#xff1a;真实世界中的设计模式 设计模式是软件开发中的经典解决方案&#xff0c;它们帮助我们解决常见的设计问题&#xff0c;并提高代码的可维护性和可扩展性。在《Head First设计模式》一书中&#xff0c;作者通过生动的案例和通俗的语言&#xff0c;深入…

基于物联网技术的电动车防盗系统设计(论文+源码)

1总体设计 本课题为基于物联网技术的电动车防盗系统&#xff0c;在此将整个系统架构设计如图2.1所示&#xff0c;其采用STM32F103单片机为控制器&#xff0c;通过NEO-6M实现GPS定位功能&#xff0c;通过红外传感器检测电瓶是否离开位&#xff0c;通过Air202 NBIOT模块将当前的数…

玩转大语言模型——Ubuntu系统环境下使用llama.cpp进行CPU与GPU混合推理deepseek

系列文章目录 玩转大语言模型——使用langchain和Ollama本地部署大语言模型 玩转大语言模型——三分钟教你用langchain提示词工程获得猫娘女友 玩转大语言模型——ollama导入huggingface下载的模型 玩转大语言模型——langchain调用ollama视觉多模态语言模型 玩转大语言模型—…

Redis——快速入门

目录 Redis简介 安装配置(Windows) GUI工具RedisInsight的使用 十大数据类型&#xff08;5基本5高级&#xff09; 字符串String 列表List 集合Set(S) 有序集合SortedSet(Z) 哈希Hash(H) 发布订阅模式 消息队列Stream(X) 地理空间Geospatial(GEO) HyperLogLog(PF) …

MQ保证消息的顺序性

在消息队列&#xff08;MQ&#xff09;中保证消息的顺序性是一个常见的需求&#xff0c;尤其是在需要严格按顺序处理业务逻辑的场景&#xff08;例如&#xff1a;订单创建 → 支付 → 发货&#xff09;。 一、消息顺序性被破坏的原因 生产者异步/并行发送&#xff1a;消息可能…

SPI驱动(二) -- SPI驱动程序模型

文章目录 参考资料&#xff1a;一、SPI驱动重要数据结构1.1 SPI控制器数据结构1.2 SPI设备数据结构1.3 SPI驱动数据结构 二、SPI 驱动框架2.1 SPI控制器驱动程序2.2 SPI设备驱动程序 三、总结 参考资料&#xff1a; 内核头文件&#xff1a;include\linux\spi\spi.h 一、SPI驱…

Gpt翻译完整版

上一篇文章收到了很多小伙伴的反馈&#xff0c;总结了一下主要以下几点&#xff1a; 1. 说不知道怎么调api 2. 目前只是把所有的中文变成了英文&#xff0c;如果想要做多语言还需要把这些关键字提炼出来成放到message_zh.properties和message_en.properties文件中&#xff0c…

图解MOE大模型的7个核心问题并探讨DeepSeekMoE的专家机制创新

原文地址:https://newsletter.maartengrootendorst.com/p/a-visual-guide-to-mixture-of-experts #mermaid-svg-FU7YUSIfuXO6EVHa {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-FU7YUSIfuXO6EVHa .error-icon{fill…

windows电脑上安装llama-factory实现大模型微调

一、安装环境准备 这是官方给的llama-factory安装教程&#xff0c;安装 - LLaMA Factory&#xff0c;上面介绍了linux系统上以及windows系统上如何正确安装。大家依照安装步骤基本能够完成安装&#xff0c;但是可能由于缺少经验或者相关的知识导致启动webUi界面运行相应内容时…

vscode+vue前端开发环境配置

目录 一、安装Vue二、使用vue新建项目 一、安装Vue 在node.js安装好之后&#xff0c; npm config set registry https://registry.npmmirror.com# 安装vue相关工具&#xff0c;webpack用来项目构建、打包、资源整合等。 npm install webpack -g# 安装vue-cli脚手架 npm insta…

基于javaweb的SpringBoot田径运动会管理系统设计和实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…

【Python编程】高性能Python Web服务部署架构解析

一、FastAPI 与 Uvicorn/Gunicorn 的协同 1. 开发环境&#xff1a;Uvicorn 直接驱动 作用&#xff1a;Uvicorn 作为 ASGI 服务器&#xff0c;原生支持 FastAPI 的异步特性&#xff0c;提供热重载&#xff08;--reload&#xff09;和高效异步请求处理。 启动命令&#xff1a; u…

Libgdx游戏开发系列教程(5)——碰撞反弹的简单实践

目录 水平滚动 水平滚动并反弹 四面滚动反弹 加个板子进行弹球 本篇简单以一个小球运动,一步步实现碰撞反弹的效果 本文代码示例以kotlin为主,且需要有一定的Libgdx入门基础 注:下面动态图片看着有些卡顿,是录制的问题,实际上运行时很流畅的 水平滚动 简单起见,我们通过S…

kan pinn

本文介绍了两种主要的 PINNs 结构&#xff0c;分别用于解决数据驱动的偏微分方程求解和数据驱动的偏微分方程发现问题。两种结构都采用了深度前馈神经网络&#xff0c;并使用了双曲正切激活函数。 1. 连续时间模型&#xff1a; 用于数据驱动求解&#xff1a; 包含两个神经网络…