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

JavaScript基础——JavaScript调用的三种方式

JavaScript简介

JavaScript的作用

JavaScript的使用方式

内嵌JS

引入外部js文件

编写函数


JavaScript简介

        JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。它是Web开发中最常用的脚本语言之一,通常用于创建动态网页,允许用户与网页进行交互。JavaScript最初由Brendan Eich在1995年为Netscape Navigator浏览器设计,现在已经成为几乎所有现代浏览器的标准组成部分。

JavaScript的作用

        JavaScript作为一种功能强大的编程语言,它在现代Web开发中扮演着至关重要的角色。它不仅能够实现用户与界面之间的丰富交互,如开关按钮、下拉菜单、轮播图、列表渲染以及条件渲染等,提供用户友好和动态的网页体验,而且还能够通过Ajax技术处理数据的前后端交互,实现无需重新加载页面即可更新内容的功能。此外,JavaScript的Node.js平台允许开发者搭建Web服务并处理后端业务逻辑,例如用户登录、注册、找回密码、发送邮件验证以及数据的持久化存储等。这些能力使得JavaScript成为了构建全栈Web应用程序不可或缺的工具,从前端的交互逻辑到后端的服务搭建,JavaScript都能提供强大的支持和灵活的解决方案。

        可以实现用户与界面交互的逻辑(开关、下拉菜单、轮播图、列表渲染、条件渲染、滚动加载等)

        可以处理数据的前后端交互 ajax (网络请求)

        可以搭建web服务、处理后端的业务逻辑 nodejs (登录、注册、找回密码、发送邮件验证、数据持久化)

JavaScript的使用方式

        一个JavaScript可以有三种使用方式:内嵌、外部引入、编写函数。

内嵌JS

        使用<script>标签将JavaScript代码直接嵌入HTML页面中。

        内嵌JavaScript的优点包括:

  1. 简单快捷:对于简单的交互和功能,可以直接在HTML文件中编写和测试JavaScript代码。
  2. 易于理解:对于初学者来说,将JavaScript代码和HTML元素放在一起可以更容易地理解它们之间的关系。

        然而,内嵌JavaScript也有一些缺点:

  1. 维护困难:随着代码量的增加,内嵌JavaScript可能会使HTML文件变得难以维护。
  2. 性能问题:如果JavaScript代码在每个页面加载时都重复,可能会影响页面的加载速度。
  3. 安全性问题:直接在HTML中编写JavaScript代码可能会增加跨站脚本攻击(XSS)的风险。写成一段话

引入外部js文件

        外部JavaScript文件是一种将JavaScript代码与HTML文档分离的方法,这样做可以提高代码的可维护性、可重用性和安全性。

        首先,创建.js扩展名的文件。例如,你可以创建一个名为helloworld.js的文件。

        然后,在这个.js文件中编写JavaScript代码,并在html文件中引入.js文件。

 

编写函数

        使用function关键字来定义一个函数。函数可以有参数(也称为形参),这些参数用于接收传递给函数的数据。

 

        定义函数后,可以通过函数名和一对圆括号来调用它。如果函数有参数,需要在圆括号内传递相应的参数。

相关文章:

JavaScript基础——JavaScript调用的三种方式

JavaScript简介 JavaScript的作用 JavaScript的使用方式 内嵌JS 引入外部js文件 编写函数 JavaScript简介 JavaScript&#xff08;简称“JS”&#xff09;是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言。它是Web开发中最常用的脚本语言之一&#x…...

ITSS:IT服务工程师

证书亮点&#xff1a;适中的费用、较低的难度、广泛的应用范围以及专业的运维认证。 总体评价&#xff1a;性价比良好&#xff01; 证书名称&#xff1a;ITSS服务工程师 证书有效期&#xff1a;持续3年 培训要求&#xff1a;必须参加培训&#xff0c;否则将无法参与考试 发…...

鸿蒙开发——axios封装请求、拦截器

描述&#xff1a;接口用的是PHP&#xff0c;框架TP5 源码地址 链接&#xff1a;https://pan.quark.cn/s/a610610ca406 提取码&#xff1a;rbYX 请求登录 HttpUtil HttpApi 使用方法...

Scikit-Learn中的分层特征工程:构建更精准的数据洞察

Scikit-Learn中的分层特征工程&#xff1a;构建更精准的数据洞察 在机器学习中&#xff0c;特征工程是提升模型性能的核心技术之一。Scikit-Learn&#xff08;简称sklearn&#xff09;&#xff0c;作为Python中广受欢迎的机器学习库&#xff0c;提供了多种方法来进行特征工程&…...

CSOL遭遇DDOS攻击如何解决

CSOL遭遇DDOS攻击如何解决&#xff1f;在错综复杂的数字网络丛林中&#xff0c;《Counter-Strike Online》&#xff08;简称CSOL&#xff09;犹如一座坚固的堡垒&#xff0c;屹立在游戏世界的中心&#xff0c;吸引着无数玩家的目光与热情。这座堡垒并非无懈可击&#xff0c;DDo…...

基于python的BP神经网络红酒品质分类预测模型

1 导入必要的库 import pandas as pd import numpy as np import matplotlib.pyplot as plt from sklearn.model_selection import train_test_split from sklearn.preprocessing import LabelEncoder from tensorflow.keras.models import Sequential from tenso…...

Kylin与Spark:大数据技术集成的深度解析

引言 在大数据时代&#xff0c;企业面临着海量数据的处理和分析需求。Kylin 和 Spark 作为两个重要的大数据技术&#xff0c;各自在数据处理领域有着独特的优势。Kylin 是一个开源的分布式分析引擎&#xff0c;专为大规模数据集的 OLAP&#xff08;在线分析处理&#xff09;查…...

⌈ 传知代码 ⌋ 利用scrapy框架练习爬虫

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…...

深入了解 Python 面向对象编程(最终篇)

大家好&#xff01;今天我们将继续探讨 Python 中的类及其在面向对象编程&#xff08;OOP&#xff09;中的应用。面向对象编程是一种编程范式&#xff0c;它使用“对象”来模拟现实世界的事务&#xff0c;使代码更加结构化和易于维护。在上一篇文章中&#xff0c;我们详细了解了…...

手把手教你实现基于丹摩智算的YoloV8自定义数据集的训练、测试。

摘要 DAMODEL&#xff08;丹摩智算&#xff09;是专为AI打造的智算云&#xff0c;致力于提供丰富的算力资源与基础设施助力AI应用的开发、训练、部署。 官网链接&#xff1a;https://damodel.com/register?source6B008AA9 平台的优势 &#x1f4a1; 超友好&#xff01; …...

SSH相关

前言 这篇是K8S及Rancher部署的前置知识。因为项目部署测试需要&#xff0c;向公司申请了一个虚拟机做服务器用。此前从未接触过服务器相关的东西&#xff0c;甚至命令也没怎么接触过&#xff08;接触最多的还是git命令&#xff0c;但我日常用sourceTree&#xff09;。本篇SSH…...

mysql超大分页问题处理~

大家好&#xff0c;我是程序媛雪儿&#xff0c;今天咱们聊mysql超大分页问题处理。 超大分页问题是什么&#xff1f; 数据量很大的时候&#xff0c;在查询中&#xff0c;越靠后&#xff0c;分页查询效率越低 例如 select * from tb_sku limit 0,10; select * from tb_sku lim…...

Gitlab以及分支管理

一、概述 Git 是一个分布式版本控制系统&#xff0c;用于跟踪文件的变化&#xff0c;尤其是源代码的变化。它由 Linus Torvalds 于 2005 年开发&#xff0c;旨在帮助管理大型软件项目的开发过程。 二、Git 的功能特性 Git 是关注于文件数据整体的变化&#xff0c;直接会将文件…...

探索Axure在数据可视化原型设计中的无限可能

在当今数字化浪潮中&#xff0c;产品设计不仅关乎美观与功能的平衡&#xff0c;更在于如何高效、直观地传达复杂的数据信息。Axure RP&#xff0c;作为原型设计领域的佼佼者&#xff0c;其在数据可视化原型设计中的应用&#xff0c;正逐步揭开产品设计的新篇章。本文将从多个维…...

Redis 内存淘汰策略

Redis 作为一个内存数据库&#xff0c;必须在内存使用达到配置的上限时采取策略来处理新数据的写入需求。Redis 提供了多种内存淘汰策略&#xff08;Eviction Policies&#xff09;&#xff0c;以决定在内存达到上限时应该移除哪些数据。...

逆天!吴恩达+OpenAI合作出了大模型课程!重磅推出《LLM CookBook》中文版

吴恩达老师与OpenAI合作推出的大模型系列教程&#xff0c;从开发者在大型模型时代的必备技能出发&#xff0c;深入浅出地介绍了如何基于大模型API和LangChain架构快速开发出结合大模型强大能力的应用。 这些教程非常适合开发者学习&#xff0c;以便开始基于LLM实际构建应用程序…...

uint16_t、uint32_t类型数据高低字节互换

1. 使用位运算和逻辑运算符实现 #include<stdio.h> #include<stdint.h> int main() {void test_3() {uint16_t version = 0x1234;printf("%#x\n",(uint8_t)version);printf("%#x\n", version>>8);/*** 在C语言中,uint16和uint8是无符号…...

Java实现数据库图片上传(包含从数据库拿图片传递前端渲染)-图文详解

目录 1、前言&#xff1a; 2、数据库搭建 &#xff1a; 建表语句&#xff1a; 3、后端实现&#xff0c;将图片存储进数据库&#xff1a; 思想&#xff1a; 找到图片位置&#xff08;如下图操作&#xff09; 图片转为Fileinputstream流的工具类&#xff08;可直接copy&#…...

开放式耳机原理是什么?通过不入耳的方式,享受健康听音体验

在开放式耳机的领域又细分了骨传导和气传导两种类型的耳机&#xff0c; 气传导开放式耳机原理 气传导是传统的声音传递方式&#xff0c;它依赖于空气作为声音传播的介质。 声源输入&#xff1a;与普通开放式耳机相同&#xff0c;音频设备通过耳机线将电信号传递到耳机。 驱动…...

有趣的PHP小游戏——猜数字

猜数字 这个游戏会随机生成一个1到100之间的数字,然后你需要猜测这个数字是什么。每次你输入一个数字后,程序会告诉你这个数字是“高了”还是“低了”,直到你猜对为止! 使用指南: 代码如下,保存到一个php中:如 index.php。代码部署到PHP服务器,比如 phpstudy。运行网…...

Phi-4-reasoning-vision-15B企业应用:HR招聘系统简历截图信息结构化提取

Phi-4-reasoning-vision-15B企业应用&#xff1a;HR招聘系统简历截图信息结构化提取 1. 企业招聘场景的痛点与解决方案 在传统HR招聘流程中&#xff0c;简历筛选是最耗时耗力的环节之一。特别是当候选人通过邮件、社交平台或招聘网站发送简历时&#xff0c;HR经常面临以下挑战…...

【限时技术白皮书】:Istio 1.20正式版Java适配黄金72小时——我们已验证的6大兼容性断点及热修复方案

第一章&#xff1a;Istio 1.20正式版Java微服务适配全景概览Istio 1.20 正式版于2023年10月发布&#xff0c;针对Java生态的可观测性、安全通信与流量治理能力进行了系统性增强。该版本在Sidecar注入、Java应用兼容性、OpenTelemetry集成及JVM指标采集方面均实现关键演进&#…...

206_深度学习进阶:模型选择、过拟合与欠拟合的生存法则

在机器学习中&#xff0c;我们的目标是发现泛化&#xff08;Generalization&#xff09;模式&#xff0c;即在未见过的数据上也能预测准确。然而&#xff0c;模型往往会陷入两个极端&#xff1a;要么学得太浅&#xff08;欠拟合&#xff09;&#xff0c;要么记住了噪音&#xf…...

BiliBili-UWP:打造Windows平台高效B站观影体验深度指南

BiliBili-UWP&#xff1a;打造Windows平台高效B站观影体验深度指南 【免费下载链接】BiliBili-UWP BiliBili的UWP客户端&#xff0c;当然&#xff0c;是第三方的了 项目地址: https://gitcode.com/gh_mirrors/bi/BiliBili-UWP BiliBili-UWP作为一款专为Windows平台设计的…...

BGE-Reranker-v2-m3企业部署:高并发请求压力测试案例

BGE-Reranker-v2-m3企业部署&#xff1a;高并发请求压力测试案例 1. 项目背景与价值 在企业级RAG&#xff08;检索增强生成&#xff09;系统中&#xff0c;检索精度直接影响最终的回答质量。传统向量检索虽然快速&#xff0c;但容易受到关键词相似性的干扰&#xff0c;返回大…...

STK 实战:多类型传感器(Sensor)协同探测与可见性分析

1. STK与多传感器协同探测基础 STK&#xff08;Systems Tool Kit&#xff09;是航天领域广泛使用的仿真分析软件&#xff0c;它能够对复杂系统中的传感器进行高精度建模。在实际应用中&#xff0c;单个传感器往往难以满足全方位监测需求&#xff0c;这时就需要多传感器协同工作…...

解锁外语游戏新体验:XUnity自动翻译器完全指南 [特殊字符]

解锁外语游戏新体验&#xff1a;XUnity自动翻译器完全指南 &#x1f3ae; 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 还在为外语游戏中的生涩文本而苦恼吗&#xff1f;XUnity自动翻译器让你轻松打破语…...

搜索时代的命名战略:如何在亚马逊规避“品牌失语症”

在亚马逊这个由算法与关键词统治的商业世界里&#xff0c;一个名字的恰当与否&#xff0c;直接决定了品牌是“响亮宣言”还是“沉默失语”。许多名字如同《时代》或《财富》杂志&#xff0c;在传统语境中或许优雅&#xff0c;但在需要极致精准的数字货架上&#xff0c;却可能因…...

终极免费开源图像修复工具:ComfyUI-BrushNet完整使用指南

终极免费开源图像修复工具&#xff1a;ComfyUI-BrushNet完整使用指南 【免费下载链接】ComfyUI-BrushNet ComfyUI BrushNet nodes 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-BrushNet 想要快速掌握AI图像编辑的核心技术&#xff1f;ComfyUI-BrushNet作为一款…...

2026指纹浏览器与Web端设备识别技术的对抗与协同:从风控博弈到合规共生

在 2026 年的 Web 生态中&#xff0c;指纹浏览器与 Web 端设备识别技术始终处于 “对抗与协同” 的动态平衡中 —— 平台通过设备识别技术构建风控体系&#xff0c;防范恶意注册、批量操作、账号盗用等违规行为&#xff1b;指纹浏览器通过技术手段重构设备特征&#xff0c;实现…...