JavaScript 入门基础 第1章

第一部分：入门篇

第1章：JavaScript 基础

JavaScript 是什么？
JavaScript 是一种广泛使用的脚本语言，主要用于Web开发，为网页添加交互功能。它是一种解释型语言，可以在客户端（浏览器）或服务器端（如Node.js）运行。JavaScript 具有动态类型、原型继承等特性，支持面向对象、命令式、函数式等多种编程风格。

JavaScript 与其他编程语言的区别

  • 动态类型：变量可以在运行时改变类型。
  • 弱类型：变量类型由赋值决定，而不是在声明时固定。
  • 原型继承：使用原型链实现继承，而不是传统的类继承。
  • 事件驱动：通过事件响应用户的交互动作。
  • 异步执行：支持非阻塞的异步编程模式，如回调函数、Promise、async/await。

开发环境搭建：编辑器与浏览器

  1. 选择编辑器：推荐使用 Visual Studio Code 或 Sublime Text 等现代编辑器。
  2. 安装浏览器：现代浏览器（如 Chrome、Firefox、Edge）内置了JavaScript引擎，可以直接运行JavaScript代码。
  3. 调试工具：使用浏览器的开发者工具（Developer Tools），如 Chrome DevTools，进行代码调试。

Hello World 示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello World</title>
</head>
<body><script>// 输出 "Hello World" 到浏览器控制台console.log("Hello World");// 输出 "Hello World" 到网页document.write("Hello World");</script>
</body>
</html>

JavaScript 在HTML中的使用方式
JavaScript 可以嵌入到HTML文档中，通过 <script> 标签来定义。有三种常见的使用方式：

  1. 内联式：直接在HTML标签中使用 onclick 等事件属性。
    <button onclick="alert('Button clicked!')">Click me!</button>
  2. 嵌入式：在HTML文档内部的 <head> 部分或 <body> 部分使用 <script> 标签。
    <script>alert('Page loaded!');
</script>
  3. 外部式：将JavaScript代码放在单独的 .js 文件中，然后通过 <script> 标签引入。
    <script src="app.js"></script>

示例代码：外部式JavaScript文件
假设我们有一个名为 app.js 的外部JavaScript文件：

// app.js 文件内容
console.log("JavaScript file is loaded!");function greet(name) {return "Hello, " + name + "!";
}document.write(greet("World"));

HTML 文件引用该文件的方式如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>External JavaScript Example</title>
</head>
<body><script src="app.js"></script>
</body>
</html>

以上就是第一章的详细介绍，通过这些内容，读者可以初步了解JavaScript是什么，它与其它语言有何不同，如何搭建基本的开发环境，以及如何编写和使用简单的JavaScript代码。

在这里插入图片描述

接下来我会为第一章增加几个常见的JavaScript示例，以帮助读者更好地理解JavaScript的基本用法及其在Web开发中的应用。

第一部分：入门篇

第1章：JavaScript 基础

示例代码：弹窗与提示框

  1. 弹出警告框：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Alert Example</title>
</head>
<body><script>alert("这是一个警告框！");</script>
</body>
</html>

  2. 确认框：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Confirm Box Example</title>
</head>
<body><script>if (confirm("您确定要继续吗？")) {alert("用户点击了确认！");} else {alert("用户点击了取消！");}</script>
</body>
</html>

  3. 提示输入框：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Prompt Example</title>
</head>
<body><script>let userName = prompt("请输入您的名字：", "您的名字");alert("欢迎 " + userName);</script>
</body>
</html>

示例代码：动态修改网页内容

  1. 修改标题：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Initial Title</title>
</head>
<body><script>document.title = "New Title";</script>
</body>
</html>

  2. 修改段落内容：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Change Paragraph Content</title>
</head>
<body><p id="demo">初始内容</p><script>document.getElementById("demo").innerHTML = "新的段落内容";</script>
</body>
</html>

示例代码：按钮点击事件

  1. 按钮点击触发函数：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Button Click Example</title>
</head>
<body><button onclick="greet()">点击我</button><script>function greet() {alert("你好！");}</script>
</body>
</html>

  2. 按钮点击改变元素颜色：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Change Element Color</title>
</head>
<body><p id="text">点击按钮改变文字颜色</p><button onclick="changeColor()">点击我</button><script>function changeColor() {document.getElementById("text").style.color = "red";}</script>
</body>
</html>

示例代码：条件判断与循环

  1. 条件判断：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Conditional Statement Example</title>
</head>
<body><script>let age = 20;if (age >= 18) {console.log("成年");} else {console.log("未成年");}</script>
</body>
</html>

  2. 使用循环打印数字：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Loop Example</title>
</head>
<body><script>for (let i = 1; i <= 10; i++) {console.log(i);}</script>
</body>
</html>

通过这些示例，读者可以学习如何使用JavaScript进行简单的用户交互、修改网页内容以及实现基本的逻辑控制。这些基础技能是后续学习JavaScript更高级内容的重要基石。
在这里插入图片描述

我们继续增加一些JavaScript的示例，以帮助读者更好地理解和应用JavaScript的各种功能。以下是一些常见的应用场景和相应的代码示例：

更多示例代码

动态生成HTML元素

示例：动态创建一个新的段落并添加到页面中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Dynamic Element Creation</title>
</head>
<body><div id="content"></div><button onclick="addParagraph()">添加段落</button><script>function addParagraph() {// 创建一个新的段落元素var newPara = document.createElement("p");// 设置段落的内容newPara.innerHTML = "这是新添加的段落。";// 将新段落添加到页面上的某个位置document.getElementById("content").appendChild(newPara);}</script>
</body>
</html>
处理表单数据

示例：获取表单输入并显示结果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Form Data Handling</title>
</head>
<body><form id="myForm"><label for="nameInput">姓名：</label><input type="text" id="nameInput" name="nameInput"><br><br><label for="emailInput">邮箱：</label><input type="email" id="emailInput" name="emailInput"><br><br><input type="submit" value="提交"></form><div id="result"></div><script>document.getElementById("myForm").onsubmit = function(event) {event.preventDefault(); // 阻止默认提交行为var name = document.getElementById("nameInput").value;var email = document.getElementById("emailInput").value;document.getElementById("result").innerText = "姓名：" + name + "，邮箱：" + email;};</script>
</body>
</html>
操作CSS样式

示例：根据按钮点击切换元素的颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Change Element Style</title>
</head>
<body><p id="colorText">点击按钮改变文字颜色</p><button onclick="toggleColor()">点击我</button><script>function toggleColor() {var element = document.getElementById("colorText");if (element.style.color === "red") {element.style.color = "blue";} else {element.style.color = "red";}}</script>
</body>
</html>
日期和时间

示例：显示当前日期和时间

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Date and Time</title>
</head>
<body><p id="timeDisplay"></p><script>function displayCurrentDateTime() {var now = new Date();var dateString = now.toLocaleString();document.getElementById("timeDisplay").innerText = "当前时间：" + dateString;}displayCurrentDateTime(); // 页面加载时立即显示时间</script>
</body>
</html>
数组操作

示例：数组的遍历与筛选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Array Operations</title>
</head>
<body><button onclick="filterArray()">筛选数组</button><script>var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];function filterArray() {var evenNumbers = numbers.filter(function(number) {return number % 2 === 0;});console.log("偶数:", evenNumbers);}</script>
</body>
</html>

在这里插入图片描述

AJAX请求

示例：使用Fetch API获取远程数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>AJAX Request with Fetch API</title>
</head>
<body><p id="weatherInfo"></p><button onclick="getWeather()">获取天气</button><script>function getWeather() {fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY').then(response => response.json()).then(data => {document.getElementById("weatherInfo").innerText = "温度：" + data.main.temp + "K";}).catch(error => console.error('Error:', error));}</script>
</body>
</html>

请注意，上述示例中的天气API请求需要替换 YOUR_API_KEY 为你从 OpenWeatherMap 获取的实际API密钥。

这些示例涵盖了JavaScript在Web开发中的多种应用场景，从简单的DOM操作到复杂的异步请求，可以帮助读者更好地掌握JavaScript的核心功能和技术要点。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

重学SpringBoot3-集成Redis（九）之共享Session

重学SpringBoot3-集成Redis（九）之共享Session

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-集成Redis&#xff08;九&#xff09;之共享Session 1. 为什么需要 Session 共享2. Spring Session 和 Redis 的集成2.1. 引入依赖2.2. 配置 Redis 连接…
阅读更多...
猿人学— 第一届第1题（解题思路附源码）

猿人学— 第一届第1题（解题思路附源码）

猿人学 — 第一届第1题&#xff08;解题思路附源码&#xff09; F12进入开发者工具—> 发现停止在debugger处 —> 右键点击Never pause here后下一步 翻页&#xff0c;抓包后发现请求携带page和m两个参数&#xff0c;page应该就是页数&#xff0c;m则需要逆向 依次查…
阅读更多...
《深度学习》循环神经网络RNN 结构及原理解析

《深度学习》循环神经网络RNN 结构及原理解析

目录 一、关于RNN 1、传统神经网络存在的问题 2、什么是循环神经网络 3、RNN特点 二、RNN基本结构 1、RNN基本结构 2、推导方式 注意&#xff1a; 3、循环的由来 4、RNN的局限性 一、关于RNN 1、传统神经网络存在的问题 无法训练出具有顺序的数据&#xff0c;模型搭…
阅读更多...
【LeetCode】每日一题 2024_10_9 找到按位或最接近 K 的子数组（LogTrick、位运算）

【LeetCode】每日一题 2024_10_9 找到按位或最接近 K 的子数组（LogTrick、位运算）

前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动&#xff01; 题目&#xff1a;找到按位或最接近 K 的子数组 代码与解题思路 今天是 2100 的题目&#xff0c;难度略高&#xff0c;不在我的能力范围&#xff0c;推荐题解&#xff1a;两种方法&#xff1a;LogTrick/滑…
阅读更多...
大模型转型指南：现在开始学习还来得及吗？非常详细收藏我这一篇就够了

大模型转型指南：现在开始学习还来得及吗？非常详细收藏我这一篇就够了

大模型学习路线&#xff0c;从基础入门到项目实战&#xff01; 第一阶段&#xff1a;AI大模型时代 理解大模型大模型提示工程 第二阶段&#xff1a;AI大模型API应用开发工程 3. 理解Function Calling 4. RAG与Embedding 5. 向量数据库 6. OpenAI GPTs与Assistant API 7. 实战…
阅读更多...
智融SW3536DC/DC+快充协议二合一IC

智融SW3536DC/DC+快充协议二合一IC

描述 SW3536 是一款高集成度的多快充协议双口充电芯片&#xff0c;支持 AC 口任意口快充输出&#xff0c;支持双口独立限流。其集成了 7A 高效率同步降压变换器&#xff0c;支持 PPS/ PD/ QC/ AFC/ FCP/ SCP/ PE/ SFCP/TFCP 等多种快充协议&#xff0c;支持 140W 输出功率&…
阅读更多...
骨传导耳机哪款好？五大绝佳骨传导耳机集锦推荐！

骨传导耳机哪款好？五大绝佳骨传导耳机集锦推荐！

随着科技的不断进步&#xff0c;骨传导耳机以其独特的听音方式和开放双耳的设计&#xff0c;逐渐成为了众多音乐爱好者、运动达人乃至日常通勤者的首选。相比传统的入耳式耳机&#xff0c;骨传导耳机不仅能够保护听力&#xff0c;还能让使用者在享受音乐的同时保持对外界环境的…
阅读更多...
一文彻底搞懂大模型 - Hugging Face Transformers

一文彻底搞懂大模型 - Hugging Face Transformers

Hugging Face Hugging Face Transformers是一个开源的预训练模型库&#xff0c;旨在将NLP领域的最新进展向更广泛的机器学习社区开放。该库包含了经过精心设计的最先进的Transformer架构&#xff0c;并提供了易于使用的API**&#xff0c;使得研究人员和开发者能够轻松地加载、…
阅读更多...
如何自己动手实现一个图片解答小助手

如何自己动手实现一个图片解答小助手

有一张图片如下所示&#xff1a; Kimi上有一个功能&#xff0c;就是解析图片内容&#xff0c;给出回答&#xff1a; 这样可以用于拍照向AI提问的场景&#xff0c;我自己也有这方面的需求&#xff0c;因此动手实践了一下。 自己动手实现的效果如下所示&#xff1a; 那么自己如何…
阅读更多...
记录一次fdisk分区成功后lsblk不显示新建的分区

记录一次fdisk分区成功后lsblk不显示新建的分区

1. 查看vda盘还剩余900G空间 2. 使用fdisk分区vda3并保存 3. 分区后&#xff0c;使用lsblk发现没有显示vda3 4. 使用partprobe或者kpartx -a /dev/vda强制重新读取分区表&#xff0c;后成功显示
阅读更多...
Spring系列 Bean的生命周期

Spring系列 Bean的生命周期

文章目录 初始化时机单例初始化流程getBeandoGetBeangetSingleton(String) 获取单例getSingleton(String, ObjectFactory) 创建单例beforeSingletonCreationcreateBeanafterSingletonCreation createBean 创建对象doCreateBeanaddSingletonFactory createBeanInstance 创建 Bea…
阅读更多...
文本区域分割系统源码＆数据集分享

文本区域分割系统源码＆数据集分享

文本区域分割系统源码&#xff06;数据集分享 [yolov8-seg-EfficientHead&#xff06;yolov8-seg-EfficientRepBiPAN等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challenge 项目来源AAAI …
阅读更多...
STM32（十八）：SPI通信

STM32（十八）：SPI通信

SPI通信&#xff1a; SPI&#xff08;Serial Peripheral Interface&#xff09;是由Motorola公司开发的一种通用数据总线 四根通信线&#xff1a;SCK&#xff08;Serial Clock&#xff09;、MOSI&#xff08;Master Output Slave Input&#xff09;主机输出从机输入、MISO&…
阅读更多...
腾讯IM SDK：TUIKit发送多张图片

腾讯IM SDK：TUIKit发送多张图片

一、问题描述 在使用腾讯IM DEMO&#xff08;https://github.com/TencentCloud/chat-uikit-vue.git&#xff09;时发现其只支持发送一张图片&#xff1a; 二、解决方案 // src\TUIKit\components\TUIChat\message-input-toolbar\image-upload\index.vue<inputref"inp…
阅读更多...
迎接国庆旅游热潮，火山引擎数据飞轮助力景区数智化升级

迎接国庆旅游热潮，火山引擎数据飞轮助力景区数智化升级

随着人们生活水平的提高和旅游消费观念的转变&#xff0c;国庆假期成为人们出行旅游的黄金时段。同程旅行发布的报告显示&#xff0c;北京、杭州、重庆、上海、南京、成都等城市仍是 “十一” 假期国内热门的目的地&#xff0c;而一些新兴的宝藏旅游目的地如新疆阿勒泰、云南迪…
阅读更多...
人工智能学者荣获2024诺贝尔物理学奖

人工智能学者荣获2024诺贝尔物理学奖

10月的第一周&#xff0c;诺贝尔物理学奖再次吸引了全球的目光。10月8日&#xff0c;2024年诺贝尔物理学奖授予了两位机器学习领域的杰出科学家——约翰霍普菲尔德&#xff08;John Hopfield&#xff09;和杰弗里辛顿&#xff08;Geoffrey Hinton&#xff09;&#xff0c;以表彰…
阅读更多...
PicGo+Gitee搭建Typora图床

PicGo+Gitee搭建Typora图床

PicGoGitee搭建Typora图床 下载PicGo 下载链接&#xff1a;https://picgo.github.io/PicGo-Doc/zh/guide/#%E4%B8%8B%E8%BD%BD%E5%AE%89%E8%A3%85 配置PicGo 插件安装 在PicGo的【插件设置】中搜索gitee-uploader插件并安装 在【图床设置】下配置Gitee repo&#xff1a;用…
阅读更多...
免费ppt模板从哪找？一文看这里

免费ppt模板从哪找？一文看这里

国庆假期结束&#xff0c;回工作岗位的你是不是正忙着准备汇报材料&#xff1f;别担心&#xff0c;一份精美的PPT能为你的工作汇报增色不少。 而一个吸引人的PPT背景模板&#xff0c;更是能让你的演示脱颖而出。 为了帮助你们快速找到高质量免费ppt模板背景&#xff0c;以下特…
阅读更多...
数字人直播带货操作流程详解！怎样的数字人直播系统能保证效果？

数字人直播带货操作流程详解！怎样的数字人直播系统能保证效果？

随着人工智能技术的不断成熟&#xff0c;以数字人直播为首的各项应用逐渐被各大中小型企业引进&#xff0c;连带着与之相关的各类话题&#xff0c;如数字人直播带货怎么操作等也开始备受关注。 而就目前的使用情况来看&#xff0c;绝大多数企业都或多或少地遭遇过数字人直播违…
阅读更多...
Redis 五种数据类型的操作命令

Redis 五种数据类型的操作命令

一、五种数据类型的介绍 五种数据类型如图所示&#xff1a; Redis 是一个开源的键值存储系统&#xff0c;它支持多种数据结构&#xff0c;每种数据结构都有其特定的用例和底层实现。以下是 Redis 的五种主要数据类型&#xff0c;以及它们适合存储的数据类型和底层实现&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023