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

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...