JavaScrip-初识JavaScript-知识点

初识JavaScript

  • 编程基础
    • 编程
    • 计算机语言
    • 标记语言
    • 编译器&解释器
  • 计算机基础
    • 计算机组成
    • 数据存储
    • 数据存储单位
    • 程序运行
  • 认识JavaScript
    • 什么是JavaScript
    • JavaScript作用
    • HTML&CSS&JavaScript的关系
    • 浏览器执行JavaScript过程
    • JavaScript的组成
    • JavaScript初体验
  • JavaScript注释
    • 单行注释
    • 多行注释
  • JavaScript输入输出语句
    • alert
    • console
    • prompt

编程基础

编程

  • 编程：

    1. 编程是让计算机执行特定任务的过程。
    2. 这个过程，就是通过使用某种编程语言编写代码，让计算机解决某个问题，并最终得到一个结果。

  • 计算机程序：

    1. 计算机程序是一组计算机能识别和执行的指令
    2. 这些指令的作用，就是告诉计算机该做什么
    3. 计算机程序一般是通过英文（编程语言例如C语言、Java、JavaScript，也有中文的易语言编写的）编写，通过编译器翻译成机器指令，以便计算机能够理解和执行。

计算机语言

  • 计算机语言，是指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。
  • 计算机语言的种类非常的多，总的来说可以分成三大类，分别是：
    1. 机器语言
    2. 汇编语言
    3. 高级语言

  1. 机器语言
    实际上计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。

  2. 汇编语言
    汇编语言是由一系列二进制指令组成的，计算机可以理解并执行，特点有：
    1.用一些容易理解和记忆的缩写单词来代替一些特定的指令。
    2.比起机器语言，汇编语言具有更高的机器相关性，更加便于记忆和书写，但又同时保留了机器语言高速度和高效率的特点。
    3.在高级语言高度发展的今天，它通常被用在底层，通常是程序优化或硬件操作的场合。

3.高级语言

  • 高级语言主要是相对于低级语言而言，是一种面向过程或面向对象的语言。
  • 它包括很多编程语言，常用的有C语言、C++、Java、Python、PHP、JavaScript、Go等。
  • 相对于机器语言和汇编语言，高级语言有较高的可读性，更易理解。
  • 由于早期计算机行业的发展主要在美国，因此一般的高级语言都是以英语为蓝本。

4.编程语言

  • 编程语言可以简单理解为一种计算机和人都能识别的语言，能够实现人与机器之间的交流和沟通。
  • 广义上理解，机器语言、汇编语言、高级语言都可以称为是编程语言。
  • 狭义上理解，目前我们常说的编程语言主要是指高级语言，用来定义计算机程序的形式语言。
  • 从最初的机器语言发展到如今，编程语言已经有2500种以上，且依然处在不断的发展和变化中，每种语言都有其特定的用途和不同的发展轨迹。

标记语言

①概念

标记语言是一种将文本及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。

②示例

最常见的标记语言就是HTML和XML，他们格式类似，作用不同。

  • HTML：超文本标记语言（Hyper Text Markup Language），有规定的标签，用于创建网页
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1>我是HTML</h1>
    </body>
</html>

  • XML：可扩展标记语言 (eXtensible Markup Language, XML)。

  • XML是一种类似于HTML的标记语言，但是没有预定义标记，可以根据自己的设计需求定义专属的标记

<?xml version="1.0" encoding="utf-16" ?>
<book>
    <name>三国演义</name>
    <author>罗贯中</author>
</book>

  • 这里使用自定义xml标签book，设置了两个子标签，分别是name和author，这些标签具有自我描述性。

  • XML的设计宗旨是传输数据，而不是显示数据（区别于html）。

③标记语言和编程语言的区别

语言类型说明
标记语言标记语言(html、xml、xhtml) 不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的,他是被动的。
编程语言编程语言有很强的逻辑和行为能力。在编程语言里,你会看到很多 if else 、for、while等具有逻辑性和行为能力的指令，他是主动的。

编译器&解释器

①【编译型语言】

编译型语言需要先将源代码编译成机器码，然后直接执行机器码，不需要再次编译。

这种语言执行效率高，但是依赖编译器，跨平台性差。

代表语言有C语言、C++等。

②【解释型语言】

解释型语言是不需要像编译型语言一样将源代码编译成机器码，而是在运行时由解释器逐行解释并执行的编程语言。

这种语言每次运行都要重新解释，执行效率低，但可以动态解释执行，灵活性高，跨平台性好。

代表语言有Python、JavaScript等。

Java语言（跨平台的编译型语言）有特殊性：

  • 它是编译型的，因为所有的Java代码都需要编译为.class文件才能运行。

  • 它也是解释型的，编译后的**.class不能直接运行，需要解释运行在JVM**中。

  • 它还是编译型的，因为JVM为了提高效率会有一些JIT优化，又会把 .class 的二进制代码编译为本地可执行的代码运行。

计算机基础

计算机组成

计算机组成可参考此博客: 计算机的基本组成

数据存储

计算机中有两大存储硬件：

  • 硬盘：永久存储。例如我们的文档、音乐、视频，每次打开电脑它们都还在那里。
  • 内存：临时存储。例如我们玩游戏，启动后需要加载地图、人物等等，这些都加载到内存，游戏关掉后就消失了。

在计算机中，所有数据都是以二进制形式存储的。

①什么是二进制？

1. 只有【0和1】表示
2. 逢二进一

②为什么用二进制？

	1. 技术实现简单：计算机是由逻辑电路组成，逻辑电路通常只有两个状态，开关的接通与断开，这两种状态正好可以用“1”和“0”表示。
	2. 运算规则简单：与十进制数相比，二进制数的运算规则要简单得多，这不仅可以使运算器的结构得到简化，而且有利于提高运算速度。
	3. 适合逻辑运算：二进制数0和1正好与逻辑量“真”和“假”相对应，因此用二进制数表示二值逻辑显得十分自然。

③二进制能存储什么？

计算机中的的一切，都是二进制：

	1. 所有数据，包括文件、图片等最终都是以二进制数据（0 和 1）的形式存放在硬盘中的。
	2. 所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中。

数据存储单位

  • 数据存储的最小单位是位（bit），1bit可以保存一个0或1，所以1bit最大表示的是1。

  • 更大一级单位是字节（Byte），1个字节可以存储8b，所以最大表示的数字是：28 =256

  • 其它更大单位：

  • 千字节（KB）：1KB = 1024B

  • 兆字节（MB）：1MB = 1024KB

  • 吉字节（GB）: 1GB = 1024MB

  • 太字节（TB）: 1TB = 1024GB

  • 拍字节（PB）：1PB=1024TB

  • 艾字节（EB）：1EB=1024PB

注意：相邻单位级别相差1k，这里的k并不是1000，而是2^10=1024。

程序运行

计算机运行软件的过程：

  • 打开某个程序时，先从硬盘中把程序的代码加载到内存中

  • CPU执行内存中的代码

  • 之所以要内存的一个重要原因，是因为 cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械）

认识JavaScript

什么是JavaScript

  • JavaScript（简称JS） 是高级编程语言的一种，是解释型语言，主要用于web编程。
  • 它是一种运行在客户端的脚本语言 （Script 是脚本的意思），所有现代Web浏览器（无论是桌面、平板还是手机浏览器）都包含Javascript解释器，这让Javascript成为了有史以来部署最广泛的编程语言。
  • Node.js出现以后，现在也可以基于 Node.js 技术进行服务器端编程。

JavaScript作用

1. 嵌入动态文本于HTML页面。

2. 对浏览器事件做出响应。

3. 读写HTML元素。

4. 在数据被提交到服务器之前验证数据。

5. 检测访客的浏览器信息。

6. 控制cookies，包括创建和修改等。

7. 基于node.js技术进行服务器端编程。

HTML&CSS&JavaScript的关系

  • 结构层HTML：决定网页的结构及内容，即“显示哪些内容”。
  • 表示层CSS：设计网页的表现样式，即“如何显示有关内容”
  • 行为层JS：控制网页的行为（效果），即“内容应该如何对事件做出反应”

浏览器执行JavaScript过程

浏览器分两部分组成：渲染引擎和 JS 引擎。

  • 渲染引擎：

    • 用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit

  • JS引擎：

    • 也称为js解释器。用来读取网页中的javascript代码，对其处理后运行，比如chrome浏览器的V8引擎

    浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。
    虽然每个浏览器的JS引擎都不同，但他们执行js机制大致相同。

JavaScript的组成

1.ECMAScript——核心

  • ECMAscript指的是JavaScript的一个标准，由ECMA 国际（ 原欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言。

  • ECMAScript规定了JS的编程语法和基础核心知识，如语法、类型、声明、关键字、保留字、操作运算符、对象等等。是所有浏览器厂商共同遵守的一套JS语法工业标准。

2.DOM——文档对象模型

  • 文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。
  • 通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

3.BOM——浏览器对象模型

  • 浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
    通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JavaScript初体验

Javascript语言按书写位置可以划分为三种，分别为行内、内嵌和外部。

1. 行内式（不推荐）

<input type="button" value="点我试试" onclick="alert('Hello World')" />
  • 写在标签上的 js 代码需要依靠事件（行为）来触发，如：onclick
  • 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

这种方式不推荐：

  • 可读性差， 在html中编写JS大量代码时，不方便阅读；
  • 引号易错，引号多层嵌套匹配时，非常容易弄混；

2. 内嵌式

<script>
  alert('Hello  World~!');
</script>

在 head 标签中， 或者在body标签中， 使用script标签来书写 JS代码。

可以将多行JS代码写到 script 标签中。

内嵌 JS 是学习时常用的方式。

3. 外部JS文件

  1. 新建main.js文件，在main.js文件中写JS代码。

    	alert("Hello World~ 我在外部文件中！")

  2. 在head或body标签中引入

    	<script src="main.js"></script>

特点：

  • 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，美观，且便于复用。
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况

JavaScript注释

单行注释

方式为：以 // 开头，vscode快捷键ctrl + k：

var num = 13;      // 声明 num，为其赋值 13

多行注释

多行注释的注释方式为：以 /* 开头，以 */ 结尾，快捷键alt + shift + a:

         /*
          你好世界
         */

JavaScript输入输出语句

alert

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        alert("我是alert弹窗")
    </script>
</body>
</html>

效果展示：

alert

作用：

浏览器弹出警示框，主要用来显示消息给用户

console

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
     <script>
        console.log('我的控制台console')
    </script>
</body>
</html>

效果展示：
console

说明：

  1. 浏览器控制台打印输出信息。
  2. 需要打开浏览器开发者工具（快捷键F12），点击console。
  3. console.log() 用来给程序员自己看代码运行结果，主要用于开发调试。

prompt

说明：

	用于在浏览器弹出可提示用户进行输入的对话框。

语法：

	prompt(text,defaultText)
  • text：可选。要在对话框中显示的文本内容。
  • defaultText：可选，默认的输入文本。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
     <script>
        prompt("请输入你的名字")
        prompt("请输入你的名字","欢迎您")
    </script>
</body>
</html>

效果展示：

prompt1

prompt2

以上描述的代码全为我本人亲自敲打，可能会有些错误的地方，如有更好的建议，欢迎您在评论区友善发言。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/308252.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

对root用户的理解

对root用户的理解

1.什么是root用户&#xff1f; Windows、MacOS、Linux均采用多用户的管理模式进行权限管理。在Linux系统中&#xff0c;拥有最大权限的账户名为&#xff1a;root&#xff08;超级管理员&#xff09; root用户拥有最大的系统操作权限&#xff0c;而普通用户在许多地方的权限是受…
阅读更多...
听劝，年度规划有它真的很必要！

听劝，年度规划有它真的很必要！

2024年的时间进度条已走过一周&#xff0c;完成全年的1/52。 新年的flag悄然立下&#xff1a;愿逆风如解意&#xff0c;税后八个亿。 在不确定的世界中&#xff0c;发财暴富终归是确定的目标。 相比2023年的卷&#xff0c;年底的即兴生活正在悄悄上演&#xff0c;上一秒还在…
阅读更多...
安达发|APS智能排产软件有哪些条件约束功能

安达发|APS智能排产软件有哪些条件约束功能

APS智能排产软件是一种基于先进算法和人工智能技术的生产计划与调度系统&#xff0c;它可以帮助企业实现生产资源的优化配置&#xff0c;提高生产效率和降低生产成本。在实际应用中&#xff0c;APS智能排产软件需要满足多种条件约束功能&#xff0c;以满足不同企业的需求。以下…
阅读更多...
VMware vSphere运维管理手册

VMware vSphere运维管理手册

适用版本：VMware vSphere 7.0 VMware vSphere 是 VMware 的虚拟化平台，可将数据中心转换为包括 CPU、存储和网络资源的聚合计算基础架构。vSphere 将这些基础架构作为一个统一的运行环境进行管理，并为您提供工具来管理加入该环境的数据中心。 ![[Pasted image 20231212132…
阅读更多...
【DevOps-08-2】Harbor的基本操作

【DevOps-08-2】Harbor的基本操作

一、简要描述 Harbor作为镜像仓库，主要的交互方式就是将镜像上传到Harbor上，以及从Harbor上下载指定镜像 在传输镜像前，可以先使用Harbor提供的权限管理，将项目设置为私有项目，并对不同用户设置不同角色，从而更方便管理镜像。 二、Harbor添加用户和项目 1、添加Harbor用…
阅读更多...
Python 编写不同时间格式的函数

Python 编写不同时间格式的函数

该代码是一个时间相关的功能模块&#xff0c;提供了一些获取当前时间的函数。 Report_time() 函数返回当前时间的格式化字符串&#xff0c;例如 "20240110114512"。Y_M_D_h_m_s_time() 函数返回当前时间的年、月、日、时、分、秒的元组格式。Y_M_D_h_m_s() 函数返回…
阅读更多...
Linux du和df命令

Linux du和df命令

目录 一. df二. du 一. df ⏹用于显示系统级别&#xff0c;磁盘分区上的可用和已用空间的信息 -h&#xff1a;以人类可读的格式显示文件系统大小 ⏹每秒钟监视当前磁盘的使用情况 watch 用于周期性的执行特定的命令-n 1 表示每一秒刷新一次命令执行的结果df -h ./ 表示周期性…
阅读更多...
如何利用期权解套股票？

如何利用期权解套股票？

我们都知道股票都是做多头排列的&#xff0c;但是当下行情其实并没有那么好&#xff0c;很多个股都是被套住的。这种情况下除了做T&#xff0c;利用期权也是降低自己损失的。有时候我们在投资上面可以交叉品种使用&#xff0c;这样可能我们的投资回报才会更好&#xff0c;也会更…
阅读更多...
回顾基础--HTML篇

回顾基础--HTML篇

HTML语法规范 <html></html> 开始标签与结束标签 <br /> 单标签 包含关系 <head><title></title> </head>并列关系 <head></head> <body></body> 1、 标题标签 标题标签 【双标签】【不同标题字体大小…
阅读更多...
GIT - 清除历史 Commit 瘦身仓库

GIT - 清除历史 Commit 瘦身仓库

目录 一.引言 二.仓库清理 ◆ 创建一个船新分支 ◆ 提交最新代码 ◆ 双指针替换分支 三.总结 一.引言 由于项目运行时间较长&#xff0c;分支较多&#xff0c;且分支内包含很多不同的大文件&#xff0c;随着时间的推移&#xff0c;历史 Git 库的容量日渐增发&#xff0c…
阅读更多...
RocketMQ源码 Consumer 消费者源码架构分析

RocketMQ源码 Consumer 消费者源码架构分析

前言 消息消费者 MQConsumer 即消息的消费方&#xff0c;主要负责消息消息生产者 MQ Producer 投递的消息。它的源码架构如下图&#xff0c;以常用的消费者实现类 DefaultMQPushConsumer 视角分析消费者的源码架构&#xff0c;介绍消费者核心数据结构。 DefaultMQPushConsume…
阅读更多...
蓝凌EIS智慧协同平台 ShowUserInfo.aspx SQL注入漏洞复现

蓝凌EIS智慧协同平台 ShowUserInfo.aspx SQL注入漏洞复现

0x01 产品简介 蓝凌EIS智慧协同平台是一款专为企业提供高效协同办公和团队合作的产品。该平台集成了各种协同工具和功能，旨在提升企业内部沟通、协作和信息共享的效率。 0x02 漏洞概述 由于蓝凌EIS智慧协同平台 ShowUserInfo.aspx接口处未对用户输入的SQL语句进行过滤或验证…
阅读更多...
【深入浅出JVM原理及调优】「搭建理论知识框架」全方位带你探索和分析JMM并发模型之（重排序机制）

【深入浅出JVM原理及调优】「搭建理论知识框架」全方位带你探索和分析JMM并发模型之（重排序机制）

全方位带你探索和分析JMM并发模型之重排序机制 专栏介绍前提准备面向人群知识脉络重排序数据依赖性读后写依赖&#xff08;Read-After-Write Dependency&#xff09;写后读依赖&#xff08;Write-After-Read Dependency&#xff09;写后写依赖&#xff08;Write-After-Write De…
阅读更多...
离线AI聊天清华大模型(ChatGLM3)本地搭建

离线AI聊天清华大模型(ChatGLM3)本地搭建

在特定的情况下&#xff0c;要保证信息安全的同时还能享受到AIGC大模型带来的乐趣和功能&#xff0c;那么&#xff0c;离线部署就能帮助到你&#xff0c;最起码&#xff0c;它是一个真正可用的方案。 大模型本身清华的 (ChatGLM3)&#xff0c;为的是对中文支持友好&#xff0c…
阅读更多...
重学JavaScript高级（八）：ES6-ES12新增特性学习

重学JavaScript高级（八）：ES6-ES12新增特性学习

ES6-ES12新增特性学习 ES6–对象字面量增强 属性的简写方法的简写计算属性名 let name "zhangcheng" //我想让sum作为obj的key值 let objKey "sum" let obj {//属性名的简写name//等同于name:name//方法的简写running(){}//等同于running:function()…
阅读更多...
寒武纪显卡实现softmax算子

寒武纪显卡实现softmax算子

寒武纪显卡实现softmax基本逻辑 寒武纪实现softmax包括下面5个步骤&#xff0c;我们也采取5个kernel来实现softmax&#xff1a; unionMaxKernel(float* middle, float* source1, int num)&#xff0c;这个kernel使用的任务类型是union1&#xff0c;其中middle的长度为taskDim&…
阅读更多...
如何设置电脑桌面提醒，电脑笔记软件哪个好？

如何设置电脑桌面提醒，电脑笔记软件哪个好？

对于大多数上班族来说&#xff0c;每天要完成的待办事项实在太多了&#xff0c;如果不能及时去处理&#xff0c;很容易因为各种因素导致忘记&#xff0c;从而给自己带来不少麻烦。所以&#xff0c;我们往往会借助一些提醒类的软件将各项任务逐一记录下来&#xff0c;然后设置上…
阅读更多...
时序分解 | Matlab实现CPO-VMD基于冠豪猪优化算法(CPO)优化VMD变分模态分解时间序列信号分解

时序分解 | Matlab实现CPO-VMD基于冠豪猪优化算法(CPO)优化VMD变分模态分解时间序列信号分解

时序分解 | Matlab实现CPO-VMD基于冠豪猪优化算法(CPO)优化VMD变分模态分解时间序列信号分解 目录 时序分解 | Matlab实现CPO-VMD基于冠豪猪优化算法(CPO)优化VMD变分模态分解时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 【原创】CPO-VMD【24年新算法…
阅读更多...
Mysql系列-1.Mysql基本使用

Mysql系列-1.Mysql基本使用

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理、分布式技术原理、数据库技术&#x1f525;如果感觉博主的文章还不错的…
阅读更多...
【揭秘APT攻击】——内网渗透实战攻略，带你领略网络安全的绝密世界！

【揭秘APT攻击】——内网渗透实战攻略，带你领略网络安全的绝密世界！

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 介绍 什么是内网&#xff1f; 什么是内网渗透&#xff1f; 内网渗透的目的&#xff1a; 内网…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站