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

编程笔记 html5cssjs 062 JavaScrip如何使用

编程笔记 html5&css&js 062 JavaScrip如何使用

  • 一、 引入JavaScript
  • 二、DOM操作
  • 三、事件处理
  • 四、数据验证
  • 五、异步编程
  • 六、使用库和框架
  • 七、模块化开发
  • 小结

开始学习使用JavaScript进行前端开发的基本步骤和常见实践。

这里先列示基本的步骤和内容,后面慢慢深入。

一、 引入JavaScript

在HTML文档中,可以通过<script>标签来引入外部JavaScript文件或直接编写内联脚本。

<!-- 引入外部JavaScript文件 -->
<script src="path/to/your/script.js"></script>
<!-- 或者编写内联脚本 -->
<script>// JavaScript 代码可以直接写在这里console.log('Hello, World!');
</script>

二、DOM操作

使用JavaScript与DOM交互,可以获取、修改或创建页面元素。

// 获取元素
var element = document.getElementById('myElement');
// 修改内容
element.textContent = 'New content';
// 创建新元素并添加到DOM
var newElement = document.createElement('div');
newElement.textContent = 'Created with JS';
document.body.appendChild(newElement);

三、事件处理

绑定事件处理器以响应用户的交互行为。

// 给按钮绑定点击事件
var button = document.querySelector('button');
button.addEventListener('click', function() {alert('Button was clicked!');
});

四、数据验证

在表单提交前对输入进行验证。

// 表单提交时的验证示例
var form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {var input = document.getElementById('username');if (!input.value) {event.preventDefault(); // 阻止表单默认提交alert('Username is required!');}
});

五、异步编程

使用Ajax或其他API(如Fetch API)从服务器获取数据。

// 使用fetch API获取数据
fetch('/api/data').then(response => response.json()).then(data => {// 处理返回的数据console.log(data);}).catch(error => {// 处理错误console.error('Error:', error);});

六、使用库和框架

库(Library)和框架(Framework)是软件开发中两种不同的工具,它们都提供了一定程度的代码复用和功能抽象,但核心理念和使用方式有所不同:
库 (Library)

  • 库是一组预先编写的、可重用的函数或类的集合,旨在为开发者解决特定领域的问题或简化常见任务。例如,在JavaScript前端开发中,jQuery是一个知名的库,它提供了一系列便捷的方法来操作DOM、处理事件、执行Ajax请求等。
  • 使用库时,开发者拥有较高的控制权,可以根据自己的需求选择性地调用库中的方法,并在需要的地方插入到自己的代码逻辑中去。
  • 开发者负责应用程序的主要架构和流程控制,而库主要提供了辅助功能。
    框架 (Framework)
  • 框架则更为体系化和结构化,它不仅包含了实现某种功能的组件或模块,还规定了应用的整体架构以及各部分之间的交互规则。比如在Web开发中,Angular、React和Vue.js等都是成熟的前端框架,它们提供了一套完整的解决方案,包括数据绑定、组件化视图管理、路由等功能,并强制或指导开发者遵循一定的编程模式和约定。
  • 使用框架时,框架通常会决定基础的代码组织结构和运行时的控制流,即所谓的“控制反转”(Inversion of Control, IoC)。开发者在框架提供的骨架上填充具体业务逻辑,而不是从零开始构建整个应用。
  • 框架往往会提供一套生命周期方法和钩子函数,让开发者可以在指定的位置插入自定义代码。
    总结来说,库更像是一个工具箱,你根据需要挑选并使用其中的工具;而框架更像是一个预制的房子,你在房子内装修布置,必须按照房子的结构和规则进行工作。
    根据项目需求,可能会引入React、Vue.js、Angular等现代前端框架来构建SPA(单页应用)。
    // React 示例
    import React from 'react';
    function HelloWorld() {return <h1>Hello, World!</h1>;
    }
    ReactDOM.render(<HelloWorld />,document.getElementById('root')
    );
    

七、模块化开发

使用ES6的import/export或者其他模块加载器(如CommonJS)实现模块化编程。
综上所述,使用JavaScript进行前端开发涵盖了从基本的DOM操作、事件监听到更复杂的异步请求、数据处理以及利用现代框架构建复杂应用等多个方面。实际开发过程中,还需要结合具体的项目需求和最佳实践,合理组织代码结构,提高代码质量和可维护性。

小结

饭要一口一口地吃。此处只要简单了解,不理解也不用着急,哈!

相关文章:

编程笔记 html5cssjs 062 JavaScrip如何使用

编程笔记 html5&css&js 062 JavaScrip如何使用 一、 引入JavaScript二、DOM操作三、事件处理四、数据验证五、异步编程六、使用库和框架七、模块化开发小结 开始学习使用JavaScript进行前端开发的基本步骤和常见实践。 这里先列示基本的步骤和内容&#xff0c;后面慢慢…...

【前端基础--7】

DOM操作 DOM&#xff0c;全称(Document Object Model)&#xff0c;文档对象模型。 提供操作HTML的方法&#xff08;操作页面元素&#xff09; 获取节点 --- 操作元素标签 <body><div id"box">我是盒子标签</div><p class"text"&g…...

微信小程序如何搜索iBeacon设备

1.首先在utils文件夹下创建bluetooth.js和ibeacon.js 2.在 bluetooth.js文件中写入 module.exports {initBluetooth: function () {// 初始化蓝牙模块wx.openBluetoothAdapter({success: function (res) {console.log(蓝牙模块初始化成功);},fail: function (res) {console.l…...

JVM篇:垃圾回收算法

标记清除 通过遍历GC Root后得到不再被引用的对象&#xff0c;对没被引用的对象做一个标记处理&#xff0c;然后对其进行清除。 优点&#xff1a;速度快 缺点&#xff1a;会产生内存碎片&#xff0c;可能会导致空闲的内存足够保存对象&#xff0c;但由于不连续而保存失败。 标…...

2024年数学建模美赛 分析与编程

2024年数学建模美赛 分析与编程 1、本专栏将在2024年美赛题目公布后&#xff0c;进行深入分析&#xff0c;建议收藏&#xff1b; 2、本专栏对2023年赛题&#xff0c;其它题目分析详见专题讨论&#xff1b; 2023年数学建模美赛A题&#xff08;A drought stricken plant communi…...

05-Nacos-配置中心接入

1、pom依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId></dependency> 2、配置文件 spring:application:name: nacos-config## 当前环境&#xff0c;这个和…...

服务端开发小记02——Maven

这里写目录标题 Maven简介Maven在Linux下的安装Maven常用命令 Maven简介 Apache Maven Project是一个apache的开源项目&#xff0c;是用于构建和管理Java项目的工具包。 用Maven可以方便地创建项目&#xff0c;基于archetype可以创建多种类型的java项目&#xff1b;Maven仓库…...

DjangoURL调度器(一)

一、介绍 当一个用户请求 Django 站点的一个页面&#xff0c;下面是 Django 系统决定执行哪个 Python 代码使用的算法&#xff1a; Django确定要使用的根URLconf模块&#xff0c;一般是在settings中的ROOT_URLCONF设置的值&#xff0c;但是如果传入 HttpRequest 对象具有一个ur…...

Typora 无法导出 pdf 问题的解决

目录 问题描述 解决困难 解决方法 问题描述 我的 Windows 下&#xff0c;以前&#xff08;Windows 11&#xff09; Typora 可以顺利较快地由 .md 导出 .pdf 文件&#xff0c;此功能当然非常实用与重要。 然而&#xff0c;有一次电脑因故重装了系统&#xff08;刷机&#x…...

uniapp封装公共的方法或者数据请求方法

仅供自己参考&#xff0c;不是每个页面都用到这个方法&#xff0c;所以我直接在用到的页面引用该公用方法&#xff1a; 1、新建一个util.js文件 export const address function(options){return new Promise((resolve,reject)>{uni.request({url:"https://x.cxniu.…...

SpringBoot AOP应用(公共字段填充)

背景 在很多场景下&#xff0c;我们对需要对一些公共字段进行赋值操作&#xff0c;如果我们每一个公共字段都进行代码赋值那无疑会增加很多重复无用代码&#xff0c;都会导致我们的 代码臃肿&#xff0c;所以我们使用AOP切面编程&#xff0c;实现功能增强&#xff0c;来完成公…...

NIO案例-聊天室

NIO案例-聊天室 1. 聊天室服务端编写 package com.my.io.chat.server; ​ import java.io.IOException; import java.net.InetSocketAddress; import java.nio.ByteBuffer; import java.nio.channels.*; import java.nio.charset.StandardCharsets; import java.util.Iterato…...

文心一言情感关怀之旅

【AGIFoundathon】文心一言情感关怀之旅,让我们一起来体验吧! 上传一张照片,用ernie-bot生成专属于你的小故事! 此项目主要使用clip_interrogator获取图片的关键信息,然后将此关键信息用百度翻译API翻译成中文后,使用封装了⼀⾔API的Ernie Bot SDK(ernie-bot)生成故事…...

mac电脑安卓文件传输工具:Android File Transfer直装版

Android File Transfer&#xff08;AFT&#xff09;是一款用于在Mac操作系统上与Android设备之间传输文件。它允许用户将照片、音乐、视频和其他文件从他们的Android手机或平板电脑传输到Mac电脑&#xff0c;以及将文件从Mac上传到Android设备。 下载地址&#xff1a;https://w…...

第九篇【传奇开心果系列】beeware的toga开发移动应用示例:人口普查手机应用

传奇开心果博文系列 系列博文目录beeware的toga开发移动应用示例系列博文目录一、项目目标二、安装依赖三、实现应用雏形示例代码四、扩展功能和组件的考量五、添加更多输入字段示例代码六、添加验证功能示例代码七、添加数据存储功能示例代码八、添加数据展示功能示例代码九、…...

14.5 Flash查询和添加数据库数据

14.5 Flash查询和添加数据库数据 在Flash与数据库通讯的实际应用中&#xff0c;如何实现用户的登录与注册是经常遇到的一个问题。登录实际上就是ASP根据Flash提供的数据查询数据库的过程&#xff0c;而注册则是ASP将Flash提供的数据写入数据库的过程。 1.启动Access2003&…...

[C#]winform部署yolov7+CRNN实现车牌颜色识别车牌号检测识别

【官方框架地址】 https://github.com/WongKinYiu/yolov7.git 【框架介绍】 Yolov7是一种目标检测算法&#xff0c;全称You Only Look Once version 7。它是继Yolov3和Yolov4之后的又一重要成果&#xff0c;是目标检测领域的一个重要里程碑。 Yolov7在算法结构上继承了其前…...

VBA技术资料MF111:将表对象转换为正常范围

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到…...

Nginx代理服务器、HTTP调度、TCP/UDP调度、Nginx优化、HTTP错误代码、状态页面、压力测试

1 案例1&#xff1a;Nginx反向代理 1.1 问题 使用Nginx实现Web反向代理功能&#xff0c;实现如下功能&#xff1a; 后端Web服务器两台&#xff0c;可以使用httpd实现Nginx采用轮询的方式调用后端Web服务器两台Web服务器的权重要求设置为不同的值最大失败次数为2&#xff0c;…...

从 React 到 Qwik:开启高效前端开发的新篇章

1. Qwik Qwik 是一个为构建高性能的 Web 应用程序而设计的前端 JavaScript 框架,它专注于提供即时启动性能,即使是在移动设备上。Qwik 的关键特性是它采用了称为“恢复性”的技术,该技术消除了传统前端框架中常见的 hydration 过程。 恢复性是一种序列化和恢复应用程序状态…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...