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

HTML---JavaScript基础

news 2026/5/13 0:56:21

文章目录

  • 目录

    文章目录

    本章目标

    一.JavaScript基础

    概述

    特点

    JavaScript 基本机构

    语法 

     网页中引用JavaScript的方式

    二. JavaScript核心语法

     变量

    ​编辑

     数据类型

    数组 

    练习

本章目标

  • 掌握JavaScript的组成
  • 掌握JavaScript的基本语法
  • 会定义和使用函数
  • 会使用工具进行代码调试

一.JavaScript基础

概述

JavaScript是一种基于对象和事件驱动的脚本语言，用于在网页上实现交互和动态效果。它是一种客户端脚本语言，意味着它运行在用户的计算机上，而不是在服务器上。JavaScript可以与HTML和CSS配合使用，使网页更加动态和丰富。

特点

  • 向HTML页面中添加交互行为
  • 脚本语言，语法和JAVA类似
  • 解释性语言，边执行边解释

JavaScript 基本机构

语法 

 调用对象

语法：

对象.方法名();

案例 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">//对象.方法名();JavaScript调用方法的语法document.write("<h1>哈哈哈</h1>")document.write("这是JS基础！");</script></head><body></body>
</html>

 document.write("这是JS基础！");代表：调用对象(当前文件)，执行方法(写入)"这是JS基础！"语句，因此上述代码等价于在当前html文件写<body>中写入语句。

执行方法同样会执行标签，效果如下图。

 网页中引用JavaScript的方式

二. JavaScript核心语法

 变量

JavaScript中的变量可以存储不同类型的值，包括数字、字符串、布尔值、对象等。变量的值可以根据需要随时更改。

当我们用到某个数据时，可以将该数据存入变量中再引用该变量，无需重复写入该数据。

 案例

<script type="text/javascript">//申明一个变量(名字自定义)var username = "JS基础";document.write("哈哈哈：" +username+"<br/>");//<br/>换行符//变量的重新赋值var username = "JavaScript基础";var index1 = "哈哈哈";document.write(index1+"："+username);
</Script>

 数据类型

typeof运算符

 案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">document.write("<h2>对变量或值调用typeof运算符返回值：</h2>");var width,height = 10,name = "rose";var date = new Date(); //创建了一个Date类型的对象 并将对象在内存中的引用地址 赋给了变量datevar flag = (11>22);var x = null;document.write("变量width的数据类型是===>"+typeof(width)+"<br/>");document.write("变量height的数据类型是===>"+typeof(height)+"<br/>");document.write("变量name的数据类型是===>"+typeof(name)+"<br/>");document.write("变量date的数据类型是===>"+typeof(date)+"<br/>");document.write("变量flag的数据类型是===>"+typeof(flag)+"<br/>");document.write("变量x的数据类型是===>"+typeof(x)+"<br/>");			</script></head><body></body>
</html>

 String数据类型

 在JavaScript中，string（字符串）类型用于存储和操作文本数据。

案例1：

string.length:返回对应字符串的长度。

<script type="text/javascript">var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";x = message.length; //length属性返回的是字符串的长度document.write("x的值是："+x);
</script>

案例2：

string.charAt(index):返回指定位置的字符       注：计算机从0开始计数

<script type="text/javascript">var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";var y = message.charAt(3);document.write("y的值是==>"+x);
</script>

案例3

indexOf(str, index)：查找指定的字符串在字符中首次出现的位置。

<script type="text/javascript">var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";var z = message.indexOf("河");//返回指定字符串在目标第一次出现的位置document.write("z第一次出现的位置："+z);
</script>

案例4

substring(index1, index2):f返回区间 [index1,index2) 之间的字符

<script type="text/javascript">var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";var submessage = message.substring(0, 3);document.write("submessage的值是："+submessage+"<br/>");var submessage = message.substring(3);document.write("submessage的值是："+submessage);
</script>

boolean数据类型

<script type="text/javascript">var flag=(10>100)document.write("flag是："+flag+"<br/>")
</Script>

数组 

案例：

<script type="text/javascript">//var 数组名称 = new Array(长度)var ilist = new Array(8);//数组的创建ilist[0] = 15; //数组的赋值ilist[1] = 20;//数组的遍历document.write("ilist[0]的值是："+ilist[0]+"<br/>");document.write("ilist[1]的值是："+ilist[1]+"<br/>");document.write("剩余未赋值的数组的数据类型是："+typeof(ilist[2])+"<br/>");var fruit = new Array("apple", "orange", "peach", "banana");document.write(fruit[1]);
</script>

练习

相关文章：

HTML---JavaScript基础

文章目录 目录 文章目录 本章目标 一.JavaScript基础 概述 特点 JavaScript 基本机构 语法 网页中引用JavaScript的方式 二. JavaScript核心语法 变量 ​编辑 数据类型 数组 练习 本章目标 掌握JavaScript的组成掌握JavaScript的基本语法会定义和使用函数会使用工具进行…...

编程日记 2023/12/31 11:36:35

2023年03月17日_微软和谷歌办公AI的感慨

2023年3月17日 最近这个科技圈的消息 有点爆炸的让人应接不暇了 各种大公司简直就是神仙打架 你从来没有见过这么密集的 这么高频的产品发布 昨天微软是发布了Office 365 Copilot 在里边提供了大量的AI的功能 然后谷歌呢也发布了这个Google Workspace AI 也是跟365 Cop…...

编程日记 2023/12/31 11:34:33

2023年新一代开发者工具 Vue ，正式开源！

以下文章来源于前端充电宝 &#xff0c;作者CUGGZ 近日&#xff0c;Vue 新一代开发者工具&#xff08;DevTools&#xff09;正式开源&#xff01;Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具&#xff0c;它提供了一些功能来帮助开发者更好地了解 Vue 应用。下面就来看…...

编程日记 2023/12/31 11:32:31

springboot(ssm校园组团平台 高校组团系统 Java系统

springboot(ssm校园组团平台 高校组团系统 Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 数据库…...

编程日记 2023/12/31 11:28:27

QT 利用开源7z 实现解压各种压缩包,包括进度条和文件名的显示(zip,7z,rar,iso等50多种格式)

想做一个winRAR一样的解压软件吗？很简单，利用开源的7z库就能实现。我看网上其他人说的方法不敢苟同，误人子弟。以前自己在项目中使用过7z，这次又有需要，就想记录下来。如果你研究过如何用7z的话，一定知道7z的每一个GUID都代表了一种格式，50多种GUID也就有50多个格式，最…...

编程日记 2023/12/31 11:24:24

androidStudio 没有新建flutter工程的入口？

装了flutter dart 插件 执行了 flutter doctor 也执行了 flutter doctor --android-license 最后重启了 androidStudio 还是没发现在哪新建flutter项目工程 原来 plugins 下的 Android APK Support没有勾选...

编程日记 2023/12/31 11:21:22

微信小程序开发系列-03全局配置中的“window”和“tabBar”

微信小程序开发系列目录 《微信小程序开发系列-01创建一个最小的小程序项目》《微信小程序开发系列-02注册小程序》《微信小程序开发系列-03全局配置中的“window”和“tabBar”》《微信小程序开发系列-04获取用户图像和昵称》《微信小程序开发系列-05登录小程序》《微信小程序…...

编程日记 2023/12/31 11:18:19

基于CNN神经网络的手写字符识别实验报告

作业要求 具体实验内容根据实际情况自拟&#xff0c;可以是传统的BP神经网络&#xff0c;Hopfield神经网络&#xff0c;也可以是深度学习相关内容。 数据集自选&#xff0c;可以是自建数据集&#xff0c;或MNIST&#xff0c;CIFAR10等公开数据集。 实验报告内容包括但不限于&am…...

编程日记 2023/12/31 11:17:18

Ubuntu 系统中安装和配置 clash

本博客参考 ubuntu下怎么安装clash-ghc? 和 对 clash 进行下载和配置&#xff0c;如有需要可自行点击链接查看原文。 下载 clash 打开终端&#xff08;进入到 主目录/用户目录 &#xff09;&#xff0c;通过命令下载 clash 文件并将其中命名为 clash&#xff1a; # 下载 cl…...

编程日记 2023/12/31 11:15:17

DragonEnglish：COCA20000+单词+释义

去年的时候接触到了 COCA20000 单词&#xff0c;对这种给单词特定顺序的方式蛮感兴趣的。因为我当时接触的版本只有单词或者单词释义的版本&#xff0c;所以我直接通过各种方式给它搭配了音标例句发音&#xff0c;然后每100个切割成1份&#xff0c;分成了 202 个文件来学习&…...

编程日记 2023/12/31 11:14:15

『亚马逊云科技产品测评』活动征文｜云服务器如何快速搭建个人博客（图文详解）

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 文章目录 引言一、前期准备步骤1.1 准备一个亚马逊 EC2 服务器1.2 进入控…...

编程日记 2023/12/31 11:12:14

QT上位机开发（乘法计算小软件）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面一篇文章&#xff0c;我们学习了怎么创建qt的第一个工程&#xff0c;怎么用designer给qt修改界面。虽然我们到目前为止&#xff0c;还没有编写…...

编程日记 2023/12/31 11:11:12

【Matlab】BP 神经网络时序预测算法

资源下载&#xff1a; https://download.csdn.net/download/vvoennvv/88681507 一&#xff0c;概述 BP 神经网络是一种常见的人工神经网络&#xff0c;也是一种有监督学习的神经网络。其全称为“Back Propagation”&#xff0c;即反向传播算法。BP 神经网络主要由输入层、隐藏层…...

编程日记 2023/12/31 11:10:11

GPT在企业自动化方面的应用

GPT和类似的自然语言处理技术在企业自动化方面有许多应用。以下是一些主要的应用领域&#xff1a; 自动化客户支持&#xff1a; 使用GPT可以构建自动化的客户支持系统&#xff0c;能够理解和生成自然语言文本&#xff0c;回答常见问题&#xff0c;解决用户的疑问和问题。 自动…...

编程日记 2023/12/31 11:04:05

STM32——通用计时器

通用计时器框图 1.时钟源 1&#xff09;内部时钟(CK_INT) 2&#xff09;外部时钟模式 1&#xff1a;外部输入引脚(TIx)&#xff0c;x1&#xff0c;2&#xff08;即只能来自于通道 1 或者通道 2&#xff09; 3&#xff09;外部时钟模式 2&#xff1a;外部触发输入(ETR) 4&#…...

编程日记 2023/12/31 11:03:04

【HarmonyOS】鸿蒙开发简介与项目基础配置演示

从今天开始&#xff0c;博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”&#xff0c;对于刚接触这项技术的小伙伴在学习鸿蒙开发之前&#xff0c;有必要先了解一下鸿蒙&#xff0c;从你的角度来讲&#xff0c;你认为什么是鸿蒙呢&#xff1f;它出现的意义又是…...

编程日记 2023/12/31 11:02:03

[MySQL] MySQL数据库创建存储过程

一、mysql存储过程的相关知识 1.1 存储过程的概念 存储过程是一组为了完成特定功能的SQL语句集合。类似于于其他编程语言中的函数&#xff0c;定义一个函数方法&#xff0c;可以随时起到传参调用的功能。 存储过程在使用过程中是将常用或者复杂的工作预先使用SQL语句写好并用…...

编程日记 2023/12/31 11:01:02

mysql哪些情况下不走索引？

mysql哪些情况下不走索引&#xff1f; MySQL是一种常用的关系型数据库&#xff0c;它使用索引来提高查询性能。然而&#xff0c;并非所有的SQL语句都能充分利用索引。在本文中&#xff0c;我们将介绍几个无法使用到索引的MySQL SQL语句。 1. 使用函数&#xff1a;当SQL语句中…...

编程日记 2023/12/31 11:00:00

蓝桥杯python比赛历届真题99道经典练习题 （13-20）

【程序13】 题目：打印出所有的“水仙花数”，所谓“水仙花数”是指一个三位数，其各位数字立方和等于该数 本身。例如：153是一个“水仙花数”，因为153=1的三次方＋5的三次方＋3的三次方。 1.程序分析：利用for循环控制100-999个数，每个数分解出个位，十位，百位。 2.程序…...

编程日记 2023/12/31 10:58:59

初识javaWeb

一、JavaWeb是什么&#xff1f; 1、概念 javaWeb指的是使用java语言进行互联网领域项目开发的技术栈——进行web项目开发所需的技术的集合。 -Web前端——在浏览器中用户可以看到的网页 -Web后端——为前端提供数据的程序 2、Web项目 java语言是可以进行多种类型的项目开发&a…...

编程日记 2023/12/31 10:54:55

ComfyUI-WanVideoWrapper：一站式AI视频生成插件解决方案

ComfyUI-WanVideoWrapper&#xff1a;一站式AI视频生成插件解决方案 【免费下载链接】ComfyUI-WanVideoWrapper 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-WanVideoWrapper ComfyUI-WanVideoWrapper是一个专为ComfyUI设计的视频生成插件包装器&#x…...

编程新知 2026/5/13 0:36:28

新媒体编辑提效：OpenClaw批量剪辑短视频、生成文案字幕，适配多平台发布规则

新媒体编辑效率革命&#xff1a;OpenClaw赋能短视频批量剪辑、智能文案生成与多平台适配在信息爆炸、注意力稀缺的移动互联网时代&#xff0c;短视频已成为内容传播的绝对主力军。对于新媒体运营团队而言&#xff0c;高效地产出高质量、符合各平台调性且能快速发布的短视频内容…...

编程新知 2026/5/12 21:33:21

AXI协议深度解析：从握手到低功耗，一次搞懂芯片内部数据流的那些“潜规则”

AXI协议深度解析&#xff1a;从握手到低功耗&#xff0c;一次搞懂芯片内部数据流的那些“潜规则” 在当今高性能计算和复杂SoC设计中&#xff0c;AXI协议已成为连接处理器、存储器和外设的黄金标准。但真正理解AXI的精髓&#xff0c;远不止于掌握基础操作——那些隐藏在规范字里…...

编程新知 2026/5/12 21:18:05

【紧急更新】Google官方刚推送的Veo 2 v2.3.1补丁深度解析：新增胶片扫描模拟、物理光晕建模与导演模式（Director Mode）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Google Veo 2 v2.3.1补丁核心特性概览 Google Veo 2 v2.3.1 补丁是面向视频生成模型推理优化与安全增强的关键更新&#xff0c;聚焦于低延迟部署、多模态对齐稳定性及合规性强化。该版本并非架构重构&a…...

编程新知 2026/5/12 21:09:47

雨夜便利店的光，刚好够照亮你这一秒的疲惫

雨声比闹钟更懂你凌晨一点十七分&#xff0c;耳机里循环着一首没名字的 lo-fi beat&#xff0c;窗外的雨没停&#xff0c;也没下大&#xff0c;就那么轻轻敲着空调外机和生锈的铁皮棚。你站在楼道口犹豫要不要出门买泡面&#xff0c;其实不是饿&#xff0c;是心里空了一小块&am…...

编程新知 2026/5/12 20:48:39

微信自动化终极指南：5个强大功能助你高效管理微信数据

微信自动化终极指南&#xff1a;5个强大功能助你高效管理微信数据 【免费下载链接】wechat-toolbox WeChat toolbox&#xff08;微信工具箱&#xff09; 项目地址: https://gitcode.com/gh_mirrors/we/wechat-toolbox 还在为繁琐的微信数据管理而烦恼吗&#xff1f;微信…...

编程新知 2026/5/12 20:46:38

Capital许可排队严重？不想买新许可，闲置回收立即可用

我去年在做项目时&#xff0c;客户说他们Capital许可证池天天爆队&#xff0c;新增用户连基本的算力都抢不到。当时我就琢磨&#xff0c;许可证回收这事儿到底有多重要&#xff1f;去年底我带着团队做了一个实验&#xff0c;直接把闲置许可证利用率干到45%&#xff0c;127个许可…...

编程新知 2026/5/12 20:39:13

AI伦理实战：从偏见、可解释性到隐私保护的工程化解决方案

1. 项目概述&#xff1a;当AI从实验室走向现实&#xff0c;我们面临什么&#xff1f;几年前&#xff0c;我还在实验室里为一个模型的准确率提升0.5个百分点而兴奋不已。那时&#xff0c;“伦理”这个词&#xff0c;对我们这些埋头调参的工程师来说&#xff0c;似乎还停留在哲学…...

编程新知 2026/5/12 20:09:30

NovelForge：AI长篇小说创作引擎，结构化写作与知识图谱实战

1. 项目概述&#xff1a;一个为长篇创作而生的AI写作伙伴如果你和我一样&#xff0c;是一个对长篇故事创作充满热情&#xff0c;但又时常被海量设定、角色关系、情节推进和前后一致性搞得焦头烂额的作者&#xff0c;那么NovelForge的出现&#xff0c;可能正是我们一直在等待的“…...

编程新知 2026/5/12 19:17:55

如何快速掌握京东自动评价工具：面向新手的完整指南

如何快速掌握京东自动评价工具&#xff1a;面向新手的完整指南 【免费下载链接】jd_AutoComment 自动评价,仅供交流学习之用 项目地址: https://gitcode.com/gh_mirrors/jd/jd_AutoComment 在快节奏的电商购物时代&#xff0c;你是否也曾为堆积如山的待评价订单而烦恼&a…...

编程新知 2026/5/12 17:01:43