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

HTML---JavaScript基础

news 文章来源：https://blog.csdn.net/zhoutong2323/article/details/135304870 2025/1/13 10:35:23

文章目录

目录

文章目录

本章目标

一.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 ，正式开源！

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

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

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

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

编程日记 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神经网络的手写字符识别实验报告

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

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

Ubuntu 系统中安装和配置 clash

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

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

DragonEnglish：COCA20000+单词+释义

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

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

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

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

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

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

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

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

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

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

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

STM32——通用计时器

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

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

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

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

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

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

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

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

mysql哪些情况下不走索引？

mysql哪些情况下不走索引？ MySQL是一种常用的关系型数据库，它使用索引来提高查询性能。然而，并非所有的SQL语句都能充分利用索引。在本文中，我们将介绍几个无法使用到索引的MySQL SQL语句。 1. 使用函数：当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是什么？ 1、概念 javaWeb指的是使用java语言进行互联网领域项目开发的技术栈——进行web项目开发所需的技术的集合。 -Web前端——在浏览器中用户可以看到的网页 -Web后端——为前端提供数据的程序 2、Web项目 java语言是可以进行多种类型的项目开发&a…...

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

day5--java基础编程：异常，内部类

6 异常 6.1 异常概述出现背景： 在使用计算机语言进行项目开发的过程中，即使程序员把代码写得尽善尽美，在系统的运行过程中仍然会遇到一些问题，因为很多问题不是靠代码能够避免的，比如:客户输入数据的格式&#xff0c…...

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

2023.12.28 关于 Redis 数据类型 List 内部编码、应用场景

目录 List 编码方式早期版本现今版本 List 实际应用多表之间的关联关系消息队列频道（多列表）消息队列微博 Timeline 栈 & 队列 List 编码方式早期版本早期版本 List 类型的内部编码方式有两种 ziplist（压缩列表&#xf…...

编程日记 2023/12/31 10:52:53

uni-app page新建以及page外观配置

锋哥原创的uni-app视频教程： 2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中...共计23条视频，包括：第1讲 uni…...

编程日记 2023/12/31 10:50:51

问题：执行conda init 提示 No action taken,然后无法正确激活环境

执行完下面代码后， conda activate base 报错，提示先执行conda init,于是再执行下面代码 conda init发现还报错提示提示 No action taken。解决方法： 打开一个新的终端窗口，您应该就可以正常使用conda命令。（把其…...

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

SpringBoot 增量/瘦身部署jar 包

背景 SpringBoot 项目的部署一般采用全量jar 包方式部署相关项目，如果我们对相关的Contrller\Service\Dao\Mapper 层进行相关业务调整就需要重新编译全量jar 包（包大小约为200M左右）实在太麻烦了。本文:重点讲解使用SpringBoot 的增量/瘦身…...

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

AI客服的评分机制及自动化测试

智能客服的评分机制及自动化测试使用pytest来编写智能客服的测试框架： 准备一个CSV文件来存储测试用例和预期结果。编写测试脚本，其中包含测试用例的读取、发送请求、评分逻辑和结果验证。使用pytest断言来验证测试结果。首先安装pytest和requests库…...

编程日记 2023/12/31 10:43:44

【Matlab】ELM极限学习机时序预测算法

资源下载： https://download.csdn.net/download/vvoennvv/88681649 一，概述 ELM（Extreme Learning Machine）是一种单层前馈神经网络结构，与传统神经网络不同的是，ELM的隐层神经元权重以及偏置都是随机产生的…...

编程日记 2023/12/31 10:42:43

m3u8网络视频文件下载方法

在windows下，使用命令行cmd的命令下载m3u8视频文件并保存为mp4文件。 1.下载ffmpeg，访问FFmpeg官方网站：https://www.ffmpeg.org/进行下载 ffmpeg下载，安装，操作说明 https://blog.csdn.net/m0_53157282/article/det…...

编程日记 2023/12/31 10:40:41

相机内参标定理论篇------张正友标定法

一、为什么做相机标定？ 标定是为了得到相机坐标系下的点和图像像素点的映射关系，为摄影几何、计算机视觉等应用做准备。二、为什么需要张正友标定法？ 张正友标定法使手工标定相机成为可能，使相机标定不再需要精密的设备帮助。…...

编程日记 2023/12/31 10:39:40

鸿蒙 Window 环境的搭建

鸿蒙操作系统是国内自研的新一代的智能终端操作系统，支持多种终端设备部署，能够适配不同类别的硬件资源和功能需求。是一款面向万物互联的全场景分布式操作系统。下载、安装与配置 DevEco Studio支持Windows系统和macOS系统 Windows系统配置华为官方推…...

编程日记 2023/12/31 10:37:38

一级造价工程师成绩查询/搜索引擎优化网站

每次全局搜索(CtrlH)的时候都会报这个错，点击确定还可以进行，原因是文件系统不同步问题resource is out of sync with the file system。是因为在eclipse之外对工程中的resource进行修改引起的，手动刷新一下项目就不…...

编程日记 2025/1/13 8:28:42

西安网站优化排名/餐饮营销策划方案

UVM中的类和常用组件UVM中的类uvm_objectuvm_componentUVM中的常见组件driversequencermonitoragentenvironmentreference model & scoreboardUVM中的类 UVM中所有的类都有一个共同的基类：uvm_void 类。它没有数据成员，也没有成员函数。由uvm_void …...

编程日记 2025/1/13 7:57:18

google企业网站seo/大批量刷关键词排名软件

试验网站#3搜索引擎优化收录情况记录日期Yahoogooglebaidusogou每日收录每日收录增量每日收录每日收录增量每日收录每日收录增量每日收录每日收录增量2007-7-7迁移至不限带宽的服务器，地理位置在美国2007-7-193650 1 6 0　2007-7-253703531141132216002007-7-263705…...

编程日记 2025/1/13 6:35:59

网站设计与建设ppt/官网seo是什么

前段时间在折腾如何通过 SD-WAN 组网方式打通办公室和家里的异地局域网。需要用到路由器的静态路由表功能，但是遍历整个家用路由器市场几乎没有支持这个功能的路由器（只有华硕 RT-AX57 有这个功能，但是成本超出了我的预算）。所有就…...

编程日记 2025/1/12 21:19:39

wordpress 个人主题/百度站长工具seo查询

全球及中国浆液阀行业市场深度分析及发展战略咨询报告2022-2028年详情内容请咨询鸿晟信合研究院！ 【全新修订】：2022年2月【撰写单位】：鸿晟信合研究研究【报告目录】 1 浆液阀市场概述 1.1 浆液阀产品定义及统计范围 1.2.1 不同产品类型浆…...

编程日记 2025/1/12 19:31:53

2019独角兽企业重金招聘Python工程师标准>>> uwsgi安装 ubuntu安装uwsgi遇到的问题 Command "/root/myenv/bin/python3.4 -c "import setuptools, tokenize;__file__/tmp/pip-build-7cr2or3v/uwsgi/setup.py;exec(compile(getattr(tokenize, open, open)(…...

编程日记 2025/1/12 18:07:34