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

HTML---JavaScript基础

news 2026/3/27 20:28:29

文章目录

  • 目录

    文章目录

    本章目标

    一.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

【Python张量计算实战宝典】：20年AI架构师亲授5大高频场景优化技巧，错过再等一年

第一章&#xff1a;张量计算基础与PyTorch/TensorFlow双框架选型指南张量是深度学习的核心数据结构&#xff0c;本质为多维数组&#xff0c;支持自动微分、GPU加速与动态/静态计算图构建。理解其内存布局&#xff08;如C-contiguous vs. Fortran-contiguous&#xff09;、广播机…...

编程新知 2026/3/27 20:15:08

基于MATLAB的平移线扫激光三维重建完整方案与代码实现

现整理了一套完整的&#xff0c;平移线扫重建 matlab代码和方案&#xff0c;包含相机标定、光平面标定与方案、移动装置标定与方案、激光线条中心线自适应提取、畸变矫正、三维重建、点云滤波等部分&#xff0c;代码按模块编写&#xff0c;注释完整&#xff0c;附带一份完整苹果…...

编程新知 2026/3/27 20:01:05

单一模型可能涌现不出超级智能，但 Agent 协作体却极有可能。

当 AI 把产品能力拉齐&#xff0c;注意力才是唯一的护城河 你有没有这种感觉&#xff1f;2025 年底&#xff0c;用 AI 一键生成一个完整 App 已经不是什么新闻&#xff0c;Vibe Coding 让普通开发者一天就能上线一个产品。可产品做出来了&#xff0c;下载量却像石沉大海&#x…...

编程新知 2026/3/27 19:28:53

攻克内核加载难题：OpenArk工具驱动加载失败的系统化解决策略

攻克内核加载难题&#xff1a;OpenArk工具驱动加载失败的系统化解决策略 【免费下载链接】OpenArk The Next Generation of Anti-Rookit(ARK) tool for Windows. 项目地址: https://gitcode.com/GitHub_Trending/op/OpenArk OpenArk作为新一代Windows反Rootkit工具&…...

编程新知 2026/3/27 18:04:06

nli-distilroberta-base模型服务监控：使用普罗米修斯与Grafana打造可视化看板

nli-distilroberta-base模型服务监控&#xff1a;使用普罗米修斯与Grafana打造可视化看板 1. 为什么需要模型服务监控 在生产环境中部署的AI模型服务&#xff0c;就像一台24小时运转的机器&#xff0c;需要随时掌握它的运行状态。想象一下&#xff0c;如果你不知道这台机器每…...

编程新知 2026/3/27 17:58:05

解锁汽车ECU诊断新可能：ECUBus-Pro开源工具的全场景应用指南

解锁汽车ECU诊断新可能&#xff1a;ECUBus-Pro开源工具的全场景应用指南 【免费下载链接】ECUBus ECU bus tool, UDS over CAN, CAN-FD, Ethernet and so on. 项目地址: https://gitcode.com/gh_mirrors/ec/ECUBus ECUBus-Pro是一款功能强大的开源汽车ECU开发工具&#…...

编程新知 2026/3/27 17:21:55

ElasticSearch查询集群及设置

Elasticsearch查询集群API示例 查看集群状态及监控 参考资料 https://www.elastic.co/guide/en/elasticsearch/reference/6.6/cluster-health.html https://www.elastic.co/guide/en/elasticsearch/reference/6.6/cluster-nodes-stats.html 查看集群状态 健康状态 curl -XGE…...

编程新知 2026/3/27 16:51:33

为什么你的Tinymce总是显示秘钥提示？深入解析富文本编辑器的授权机制

解密Tinymce授权机制&#xff1a;从技术原理到合规实践 每次启动项目时&#xff0c;那个突兀的"未授权"提示框是否让你感到困扰&#xff1f;作为前端开发领域的标配工具&#xff0c;Tinymce的授权机制远比表面看到的复杂。让我们拨开迷雾&#xff0c;从技术实现到商业…...

编程新知 2026/3/27 16:21:21

基于spring和vue的企业原材料库存盘点食品厂管理系统

目录技术选型与架构设计核心功能模块划分数据库设计要点关键技术实现前端交互优化系统安全措施测试与部署方案扩展性设计项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术选型与架构设计 后端采用Spring Boot框架&#xff0…...

编程新知 2026/3/27 15:28:58

STM32串口环形队列IAP固件更新方案

基于STM32串口环形队列的IAP实现方案1. 项目概述1.1 系统架构本方案实现了一种基于STM32F103C8T6微控制器的串口IAP(In-Application Programming)系统&#xff0c;采用环形队列缓冲机制解决有限SRAM空间下的固件更新问题。系统将64KB Flash空间划分为四个功能区域&#xff1a;B…...

编程新知 2026/3/27 15:28:58