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

零基础学前端（六）重点讲解 JavaScript

news 文章来源：https://blog.csdn.net/tengyuxin/article/details/132985096 2025/1/11 11:05:38

1. 该篇适用于从零基础学习前端的小白，完全从零基础角度出发

2. 我们学习时，应该主动向自己提问？只有你能提出问题，你才算是在编程中学习进步了。

3. 初学者不懂得问题很多，在自己在不懂时，一定要求助有经验的编程高手，这会让你学到很多。

4. 做一个负责人的学习者，在寻求帮助时，一定要将问题逻辑梳理清楚，知道自己哪里不懂，不然会浪费高手的时间，自己连要问的问题都描述不清楚，更让人没有兴趣帮助你。

一、导言

JavaScript起初是一个脚本语言，随着web端丰富的交互、移动端的兴起、以及各种小程序、轻应用，它也变得复杂起来，不过入门还是很简单。初学者稍加努力就完全可以入门Javascript这门编程语言。

二、JavaScript

我不想跟初学者说很多历史，以后学完整个流程，无聊时可以看看。JavaScript一共分成三部分

1. ECMAScript：基础语法

=》为什么学这个？因为每种编程语言都有基础语法部分，就是编程规则。我们要按照当初设计者制定的规则，编写代码逻辑。

2. DOM：文档对象模型
=》为什么学这个？我们在电脑上看到的网页内容，如果购物网站的衣服照片、价格描述，都是按照HTML标签渲染的，这里HTML标签。

=》我们站在HTML的角度叫它 “标签元素” ，

=》我们站在javascript的角度，就叫它 “文档对象节点”

=》对于所有标签这个整体，在JavaScript里我们叫它 “文档对象模型”

3. BOM：浏览器对象模型

=》为什么学这个？大家都明白，网页运行在浏览器里面，必然要学习有关浏览器的知识

三、 ECMAScript：基础语法

我主要讲述核心：基础语法（定义变量）、函数、数组、对象、字符串、事件驱动

1. 基础语法

实践是检验真理的唯一标，准记得跟着一步一步手动敲代码。

我定义了一个 “张三”的变量，在如下代码

注意：（1）JavaScript代码写在script标签中 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>初次感悟Javascript</title></head><body></body><!-- 注意JavaScript代码写在script标签中 --><script>let name = "张三";console.log(name);</script>
</html>

在浏览器中运行，按f12 ， 打开chrome浏览器的开发者工具

很简单，我们已经定义了人生中的第一个变量 

四、DOM文档对象模型

这里的核心就是获取html标签节点。接下来跟着代码获取html标签节点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>获取DOM节点</title></head><body><h1>这是个标题</h1></body><script>let title = document.querySelector("h1");console.log(title);</script>
</html>

上面我们已经学会了定义变量，接下来我们就将定义的变量张三，赋值给标题。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>获取DOM节点</title></head><body><h1>这是个标题</h1></body><script>let title = document.querySelector("h1");console.log(title);let name = "张三";title.innerText = name;</script>
</html>

五、ECMAScript：函数 

函数是核心概念，因为它是一个包含多个动作的集合体，它的关键词是function，我们用关键词定义函数，接下来跟着代码模仿感受一下吧。

 1. 感受函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>//用function 定了一个叫 people的函数function people(){let name = "张三";let age = 18;let bodyHeight = 180;console.log("姓名=",name);console.log("年龄=",age);console.log("身高=",bodyHeight);}//调用函数people();
</script>
</html>

相关文章：

零基础学前端（六）重点讲解 JavaScript

1. 该篇适用于从零基础学习前端的小白&#xff0c;完全从零基础角度出发 2. 我们学习时&#xff0c;应该主动向自己提问&#xff1f;只有你能提出问题&#xff0c;你才算是在编程中学习进步了。 3. 初学者不懂得问题很多&#xff0c;在自己在不懂时&#xff0c;一定要求助有经验…...

编程日记 2023/9/23 9:57:04

数据库问题记录（粗略版）oracle、mysql等主流数据库通用

1. ORA-00918&#xff1a;未明确定义列 该问题情况大致为&#xff1a;select 所取列名错误、重复等问题。 2. “select * from temp where 10; ”的含义 布尔值为FALSE&#xff0c;只返回表结构&#xff0c;不返回数据。 举一反三&#xff1a; select * from temp where 1&…...

编程日记 2023/9/23 9:56:03

ORACLE多列中取出数据最大的一条

1.需求说明&#xff1a; 当查询出来的数据存在多条数据时&#xff0c;想按照一定条件排序取出其中一条数据。 2.使用函数&#xff1a; row_number() over( partition by 分组字段 order by 排序字段 desc&#xff09; 3.示例&#xff1a; --根据table_a中的pk_house&#x…...

编程日记 2023/9/23 9:55:01

Xamarin.Android实现App内版本更新

目录 1、具体的效果2、代码实现2.1 基本原理2.2 开发环境2.3 具体代码2.3.1 基本设置2.3.2 系统的权限授予2.3.3 进度条的layout文件2.3.4 核心的升级文件 3、代码下载4、知识点5、参考文献 1、具体的效果 有事需要在程序内集成自动更新的功能&#xff0c;网上找了下&#xff…...

编程日记 2023/9/23 9:54:00

运维工程师面经

文章目录 前言RedisMongoDBPython中的GIL&#xff08;全局解释器锁&#xff09;Python算法总结 前言 本博客仅做学习笔记&#xff0c;如有侵权&#xff0c;联系后即刻更改 科普&#xff1a; Redis 参考网址 NoSQL技术 基于内存的数据库&#xff0c;并且提供一定的持久化功能…...

编程日记 2023/9/23 9:53:00

stm32之智能垃圾桶实战

之前用过51做过一个垃圾桶的小项目&#xff0c;这里用32重新搞了一下。视频的效果和之前一样&#xff0c;可参考这个垃圾桶效果 。 一、项目描述&#xff08;同51&#xff09; 项目主要是模拟不用手动打开垃圾桶盖&#xff0c;而进行自动操作。自动打开的条件如下&#xff1a…...

编程日记 2023/9/23 9:51:58

【C++面向对象侯捷下】2.转换函数 | 3.non-explicit-one-argument ctor

文章目录 operator double() const {} 歧义了 标准库的转换函数...

编程日记 2023/9/23 9:50:57

UOS Deepin Ubuntu Linux 开启 ssh 远程登录

UOS Deepin Ubuntu Linux 开启 ssh 远程登录 打开控制台 安装 openssh-server sudo apt -y install openssh-server修改 /etc/ssh/ssh_config 文件 sudo vim /etc/ssh/ssh_config找到 # Port 22 去掉 # 注释后 保存 重启 ssh 服务 sudo systemctl restart ssh设置 ssh 服务 开机…...

编程日记 2023/9/23 9:49:57

Postman应用——接口请求和响应（Get和Post请求）

文章目录 新增Request请求Get请求Post请求 Request请求响应Postman响应界面说明请求响应另存为示例&#xff08;模板&#xff09;Postman显示的响应数据清空请求响应数据保存到本地文件 这里只讲用的比较多的Get和Post请求方式&#xff0c;也可以遵循restful api接口规范&#…...

编程日记 2023/9/23 9:48:55

Linux查看哪些进程占用的系统 buffer/cache 较高 (hcache，lsof）命令

1、什么是buffer/cache &#xff1f; buffer/cache 其实是作为服务器系统的文件数据缓存使用的&#xff0c;尤其是针对进程对文件存在 read/write 操作的时候&#xff0c;所以当你的服务进程在对文件进行读写的时候&#xff0c;Linux内核为了提高服务的读写速度&#xff0c;则将…...

编程日记 2023/9/23 9:47:53

（Vue2）自定义创建项目、ESLint、Vuex

自定义创建项目&#xff1a;基于VueCli自定义创建项目架子 安装脚手架->创建项目->选择自定义->Babel/Router/CSS/Linter 路由配置项很多&#xff0c;希望创建项目时就把架子搭好 hash模式和history模式 页面跳转和加载模式 Vue为单页面&#xff0c;只有一个HTML…...

编程日记 2023/9/23 9:43:47

LLaMa

文章目录 Problems403 代码文件LLaMA: Open and Efficient Foundation Language Models方法预训练数据结构优化器一些加速的方法 结果Common Sense ReasoningClosed-book Question AnsweringReading ComprehensionMassive Multitask Language Understanding Instruction Finetu…...

编程日记 2023/9/23 9:38:42

API(九)基于协程的并发编程SDK

一 基于协程的并发编程SDK 场景&#xff1a; 收到一个请求会并发发起多个请求,使用openresty提供的协程说明&#xff1a; 这个是高级课程,如果不理解可以先跳过遗留&#xff1a; APSIX和Kong深入理解openresty 标准lua的协程 ① 早期提供的轻量级协程SDK ngx.thread ngx…...

编程日记 2023/9/23 9:36:36

JavaWeb 学习笔记 7：Filter

JavaWeb 学习笔记 7&#xff1a;Filter 1.快速开始 使用过滤器的方式与 Servlet 类似&#xff0c;要实现一个Filter接口&#xff1a; WebFilter("/*") public class FirstFilter implements Filter {public void init(FilterConfig filterConfig) throws ServletE…...

编程日记 2023/9/23 9:34:34

【AI视野·今日Robot 机器人论文速览 第三十五期】Mon, 18 Sep 2023

AI视野今日CS.Robotics 机器人学论文速览 Mon, 18 Sep 2023 Totally 44 papers &#x1f449;上期速览✈更多精彩请移步主页 Interesting: &#x1f4da;GelSplitter, 基于近红外与可见光融合实现高精度surfaceNormal重建的触觉传感器。(from 华中科技大学) 基于分光镜的紧凑型…...

编程日记 2023/9/23 9:33:32

Elasticsearch 在bool查询中使用分词器

1. 创建索引 test setting和mappings 设置了自定义分词映射规则。 PUT /test {"settings": {"analysis": {"filter": {"my_synonym": {"type": "synonym","updateable": true,"synonyms_path&qu…...

编程日记 2023/9/23 9:32:30

在Python中创建相关系数矩阵的6种方法

相关系数矩阵&#xff08;Correlation matrix&#xff09;是数据分析的基本工具。它们让我们了解不同的变量是如何相互关联的。在Python中&#xff0c;有很多个方法可以计算相关系数矩阵&#xff0c;今天我们来对这些方法进行一个总结 Pandas Pandas的DataFrame对象可以使用c…...

编程日记 2023/9/23 9:31:29

物联网、工业大数据平台 TDengine 与苍穹地理信息平台完成兼容互认证

当前&#xff0c;在政府、军事、城市规划、自然资源管理等领域&#xff0c;企业对地理信息的需求迅速增加&#xff0c;人们需要更有效地管理和分析地理数据&#xff0c;以进行决策和规划。在此背景下&#xff0c;“GIS 基础平台”应运而生&#xff0c;它通常指的是一个地理信息…...

编程日记 2023/9/23 9:30:27

this.$nextTick()的使用场景

事件循环机制&#xff1a; 同步代码执行->查找异步队列&#xff0c;推入执行栈&#xff0c;执行Vue.nextTick[事件循环1]->查找异步队列&#xff0c;推入执行栈&#xff0c;执行Vue.nextTick[事件循环2]->查找异步队列&#xff0c;推入执行栈&#xff0c;执行Vue.nex…...

编程日记 2023/9/23 9:29:26

idea（第一次）启动项目，端口变成了8080

先上配置 server:port: 9569 spring:profiles:active: dev 该排查的问题也都没问题&#xff0c;重启idea也试过了&#xff0c;还是8080 解决办法&#xff1a;点击右侧的maven ,左上角的重新导入 reimport all maven projects 我又没有改动pom文件&#xff0c;居然还要点这…...

编程日记 2023/9/23 9:28:25

brpc 学习(一)M1 MacOS构建方法

tags: brpc categories: brpc 写在前面 实习阶段初次接触到 RPC 这样一种协议, 以及 brpc 这样一个很棒的框架, 但是当时没时间认真深入学习, 就是围绕使用 demo 开发, 还是有点不知其所以然的, 最近抽空来学习一下 brpc, 首要的一点就是在开发机上构建项目, 并且能够跑起来,…...

编程日记 2023/9/23 9:26:22

Python 与 Qt c++ 程序共享内存,传递图片

python 代码 这里Python 使用 shared_memory QT 使用 QSharedMemory 简单协议&#xff1a; 前面4个字节是 图片with,height,0,0 后面是图片数据 import sys import struct def is_little_endian():x0x12345678y struct.pack(I,x)return y[0]0x78print(f"is_little_end…...

编程日记 2023/9/23 9:24:19

【2023年中国研究生数学建模竞赛华为杯】E题 出血性脑卒中临床智能诊疗建模 问题分析、数学模型及代码实现

【2023年中国研究生数学建模竞赛华为杯】E题 出血性脑卒中临床智能诊疗建模 1 题目 1.1 背景介绍 出血性脑卒中指非外伤性脑实质内血管破裂引起的脑出血&#xff0c;占全部脑卒中发病率的10-15%。其病因复杂&#xff0c;通常因脑动脉瘤破裂、脑动脉异常等因素&#xff0c;导致…...

编程日记 2023/9/23 9:23:18

2024字节跳动校招面试真题汇总及其解答（五）

17.TCP的拥塞控制 TCP 的拥塞控制是指在 TCP 连接中，发送端和接收端通过协作来控制网络中数据包的流量，避免网络拥塞。TCP 的拥塞控制是 TCP 协议的重要组成部分，它可以确保 TCP 连接的稳定性和可靠性。 TCP 的拥塞控制主要有以下几个目的： 防止网络拥塞：当网络中的数据…...

编程日记 2023/9/23 9:22:17

如何撤销某个已经git add的文件以及如何撤销所有git add提交的文件？

如果你想撤销已经添加&#xff08;git add&#xff09;到暂存区的单个文件&#xff0c;可以使用 git reset 命令。以下是具体的命令格式&#xff1a; git reset <file>在这里&#xff0c;<file> 是你想要从暂存区中移除的文件名。比如&#xff0c;如果你想要撤销已…...

编程日记 2023/9/23 9:21:16

JVM高级性能调试

标准的JVM是配置为了高吞吐量&#xff0c;吞吐量是为了科学计算和后台运行使用&#xff0c;而互联网商业应用&#xff0c;更多是为追求更短的响应时间&#xff0c;更低的延迟Latency&#xff08;说白了就是更快速度&#xff09;&#xff0c;当用户打开网页没有快速响应&#xf…...

编程日记 2023/9/23 9:19:14

APK的反编译，签名，对齐

APK的反编译&#xff0c;签名&#xff0c;对齐 – WhiteNights Site 2023年9月22日 标签&#xff1a;Android, 应用开发 记录下相关的命令行参数。 APK的打包与解包 java -jar apktool.jar 首先&#xff0c;需要一个jar包&#xff0c;以我在用的为例&#xff1a;apktool_2.8.…...

编程日记 2023/9/23 9:17:11

Django（20）：信号机制

目录 信号的工作机制信号的应用场景两个简单例子Django常用内置信号如何放置信号监听函数代码自定义信号第一步&#xff1a;自定义信号第二步&#xff1a;触发信号第三步&#xff1a;将监听函数与信号相关联 信号的工作机制 Django 框架包含了一个信号机制&#xff0c;它允许若…...

编程日记 2023/9/23 9:15:09

31.链表练习题（2）（王道2023数据结构2.3.7节16-25题）

【前面使用的所有链表的定义在第29节】 试题16&#xff1a;两个整数序列A&#xff0c;B存在两个单链表中&#xff0c;设计算法判断B是否是A的连续子序列。 bool Pattern(LinkList L1,LinkList L2){ //此函数实现比较L1的子串中是否有L2LNode *p, *q; //工作在L1,p记录L1子串…...

编程日记 2023/9/23 9:14:08

排序算法之归并排序

一、归并排序的形象理解 原题链接 示例代码 void merge_sort(int q[], int l, int r) {if (l > r) return;int mid l r >> 1;merge_sort(q, l, mid), merge_sort(q, mid 1, r);int k 0, i l, j mid 1;while (i < mid && j < r) //第一处if (q[i]…...

编程日记 2023/9/23 9:12:05

wordpress 如何修改导航链接/seo公司

“什么是数据产品经理”这个问题的本质其实是在问“数据产品经理和产品经理到底有什么区别?”&#xff0c;金老师先来看看他们之间的区别吧!用数据来指导产品设计已经不是什么新鲜事了&#xff0c;几乎所有的产品经理都需要依赖数据做产品决策——从早期产品开发时的用户研究&…...

编程日记 2025/1/11 9:51:03

中国包装设计网/网站如何优化

display和visibility的用法和区别 更多 2013/11/17 来源&#xff1a;css学习浏览量&#xff1a;892 学习标签&#xff1a; css display visibility本文导读&#xff1a;大多数人很容易将CSS属性display和visibility混淆&#xff0c;它们看似没有什么不同&#xff0c;其实它们的…...

编程日记 2025/1/11 9:05:39

做网站企业 金坛/2023第三波疫情已经到来了

自定义Activity控件可以继承System.Workflow.ComponentModel.Activity写一个功能类控件&#xff0c;也可以继承System.Workflow.Activities.SequenceActivity,将现有的Activity拖入进行组装 具体的功能扩展、整合与在NET下自定定组件没什么本质区别&#xff0c;但要注意一下自定…...

编程日记 2025/1/11 8:01:59

网站建设分析报告/搜一搜

note:本文短代码实现环境&#xff1a;win10,python3 本文代码执行情况 python打开浏览器方法一&#xff1a; 通过引用os包&#xff0c;调用system方法调用系统的ie程序来打开网址 代码如下&#xff1a; import os os.system("C:/Program Files/Internet Explorer/iexplore…...

编程日记 2025/1/11 6:33:22

设计小程序多少钱/seo推广小分享

Activity之间传数据时&#xff0c;为了避免麻烦&#xff0c;往往会将一些值封装成对象&#xff0c;然后将整个对象传递过去。传对象的时候有两种情况&#xff0c;一种是实现Parcelable接口&#xff0c;一种是实现Serializable接口。0、解释两种接口&#xff1a;1&#xff09;实…...

编程日记 2025/1/11 5:37:11

家具定制东莞网站建设/seo博客教程

1.介绍Kaldi语音识别工具将HTK比较零碎的各种各样的指令和功能进行整理集合&#xff0c;使用perl脚本调用。同时也加入了深度神经网络的分类器(DNN)&#xff0c;本身由原来做HTK开发的人员制作而成&#xff0c;可以说是HTK的升级加强版。kaldi官方网站请见&#xff1a;http://k…...

编程日记 2025/1/11 3:37:50