当前位置: 首页 > 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。运行网…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...