JavaScrip-初识JavaScript-知识点

news2024/12/23 3:20:49

初识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.coloradmin.cn/o/1361472.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

八大在线项目实习 2024年第一期即将开班

八大在线项目实习 2024年第一期即将开班

八大项目&#xff1a; 某实习网站招聘信息采集与分析&#xff08;Python数据采集与分析&#xff09; 股票价格形态聚类与收益分析&#xff08;Python金融分析&#xff09; 某平台网络入侵用户自动识别&#xff08;Python机器学习&#xff09; 某平台广东省区采购数据分析&#…
阅读更多...
企业微信开发：自建应用：接收消息（企业内部服务器）/回调配置

企业微信开发：自建应用：接收消息（企业内部服务器）/回调配置

概述 在企业微信的自建应用中&#xff0c;用户触发了某些行为&#xff08;发送消息、进行菜单操作或者外部联系人变更等&#xff09;&#xff0c;要发送相关信息给企业内部服务器。 备注&#xff1a;接收消息 和 回调&#xff0c;在本文中指代相同的行为&#xff0c;即企业微信…
阅读更多...
Jmeter接口自动化测试 ：Jmeter变量的使用

Jmeter接口自动化测试 ：Jmeter变量的使用

在使用jmeter进行接口测试时&#xff0c;我们难免会遇到需要从上下文中获取测试数据的情况&#xff0c;这个时候就需要引入变量了。 定义变量 添加->配置元件->用户自定义的变量 添加->配置元件->CSV 数据文件设置 变量的调用方式&#xff1a;${变量名} 变量的作…
阅读更多...
设计模式——最全梳理，最好理解

设计模式——最全梳理，最好理解

新年献礼&#xff01; 设计模式呕心梳理 创建型模式 单例模式&#xff08;Singleton Pattern&#xff09;https://blog.csdn.net/qq_34869143/article/details/134874044 整理中... 结构型模式 代理模式&#xff08;Proxy Pattern&#xff09;https://blog.csdn.net/qq_34…
阅读更多...
期货日数据维护与使用_日数据维护_界面代码

期货日数据维护与使用_日数据维护_界面代码

目录 写在前面 界面图示 ​编辑 代码 执行代码 写在前面 本文默认已经创建了项目&#xff0c;如果不知道如何创建一个空项目的&#xff0c;请参看以下两篇博文 PyQt5将项目搬到一个新的虚拟环境中 https://blog.csdn.net/m0_37967652/article/details/122625280 python_P…
阅读更多...
软件测试面试总结分享

软件测试面试总结分享

第一轮 自我介绍。根据自己的情况扩展。你是怎么理解软件测试的&#xff1f;我觉得软件测试是很重要的岗位&#xff0c;如果一个系统开发完后不通过测试去产品质量把关&#xff0c;产品不能正常运行可能造成的后果&#xff0c;损失钱财、损失时间、损失客户等等&#xff0c;所…
阅读更多...
2024苹果Mac电脑免费文件数据恢复软件EasyRecovery

2024苹果Mac电脑免费文件数据恢复软件EasyRecovery

EasyRecovery是一个操作安全、价格便宜、用户自主操作的非破坏性的只读应用程序&#xff0c;它不会往源驱上写任何东西&#xff0c;也不会对源驱做任何改变&#xff01;EasyRecovery是一个操作安全、价格便宜、用户自主操作的非破坏性的只读应用程序&#xff0c;它不会往源驱上…
阅读更多...
【SpringBoot实战专题】「开发实战系列」全方位攻克你的技术盲区之Spring定义Jackson转换Null的方法和实现案例

【SpringBoot实战专题】「开发实战系列」全方位攻克你的技术盲区之Spring定义Jackson转换Null的方法和实现案例

Spring自动定义Jackson转换Null得方法 背景MessageConverter 使用Jackson原生方式处理空字段&#xff08;次重点方案&#xff09;ObjectMapper的配置选项通过使用注解的方式 MappingJackson2HttpMessageConverter&#xff08;重点方案&#xff09;创建MappingJackson2HttpMessa…
阅读更多...
深度学习在工地安全帽识别技术的应用与展望

深度学习在工地安全帽识别技术的应用与展望

当我们谈论“工地安全帽识别”时&#xff0c;实际上我们在探讨的是如何利用深度学习图像识别技术来提高建筑工地的安全性。这一技术的应用可以显著提高工地安全管理的效率和有效性&#xff0c;是现代建筑工程管理中不可或缺的一部分。以测评的北京富维图像的工地安全帽识别为例…
阅读更多...
【管理篇 / 登录】❀ 06. macOS下使用USB配置线登录 ❀ FortiGate 防火墙

【管理篇 / 登录】❀ 06. macOS下使用USB配置线登录 ❀ FortiGate 防火墙

【简介】飞塔防火墙上都会配有CONSOLE接口&#xff0c;包装里都会配置一根USB配置线&#xff0c;通过这个接口和这根线&#xff0c;我们可以用命令的方式登录飞塔防火墙。随着苹果电脑的普及&#xff0c;我们来学习如何在macOS中使用USB配置线登录飞塔防火墙。 早期飞塔防火墙包…
阅读更多...
【数据分享】2023年我国省市县三级的商务住宅数量（4类设施/Excel/Shp格式）

【数据分享】2023年我国省市县三级的商务住宅数量（4类设施/Excel/Shp格式）

产业园区、住宅区、楼宇等商务住宅的数量是一个城市基础设施完善程度的重要体现&#xff0c;一个城市商务住宅的种类越丰富&#xff0c;数量越多&#xff0c;通常能表示这个城市的城市化水平越高&#xff01; 本次我们为大家带来的是我国各省份、各地级市、各区县三个层级的商…
阅读更多...
静态网页设计——网上书店（HTML+CSS+JavaScript）

静态网页设计——网上书店（HTML+CSS+JavaScript）

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 使用技术&#xff1a;HTMLCSSJS 主要内容&#xff1a;网上式的书店。是一种高质量&#xff0c;更快捷&#xff0c;更方便的购书方式。网上书店不仅可用于图书的在线销售…
阅读更多...
使用 Maven 的 dependencyManagement 管理项目依赖项

使用 Maven 的 dependencyManagement 管理项目依赖项

使用 Maven 的 dependencyManagement 管理项目依赖项 介绍 在开发 Java 项目时&#xff0c;管理和协调依赖项的版本号是一项重要而繁琐的任务。 而 Maven 提供了 <dependencyManagement> 元素&#xff0c;用于定义项目中所有依赖项的版本。它允许您指定项目中每个依赖…
阅读更多...
thinkadmin列表根据值判断男女显示和form选择select

thinkadmin列表根据值判断男女显示和form选择select

{field: gs, title: 公司, align: left, minWidth: 140,templet
阅读更多...
安全加固之weblogic屏蔽T3协议

安全加固之weblogic屏蔽T3协议

一、前言 开放weblogic控制台的7001端口&#xff0c;默认会开启T3协议服务&#xff0c;T3协议则会触发的Weblogic Server WLS Core Components中存在反序列化漏洞&#xff0c;攻击者可以发送构造的恶意T3协议数据&#xff0c;获取目标服务器权限。 本文介绍通过控制T3协议的访问…
阅读更多...
淘宝京东1688商品详情API接口，搜索商品列表接口

淘宝京东1688商品详情API接口，搜索商品列表接口

前言 在实际工作中&#xff0c;我们需要经常跟第三方平台打交道&#xff0c;可能会对接第三方平台API接口&#xff0c;或者提供API接口给第三方平台调用。 那么问题来了&#xff0c;如果设计一个优雅的API接口&#xff0c;能够满足&#xff1a;安全性、可重复调用、稳定性、好…
阅读更多...
Baumer工业相机堡盟工业相机如何通过NEOAPI SDK实现相机掉线自动重连（C#）

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK实现相机掉线自动重连（C#）

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK实现相机掉线自动重连&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机的掉线自动重连的技术背景通过PnP事件函数检查Baumer工业相机是否掉线在NEOAPI SDK里实现相机掉线重连方法&#xff1a;工业相机掉线重连测试演示图…
阅读更多...
x-cmd-mod | zuz - 压缩或解压文件

x-cmd-mod | zuz - 压缩或解压文件

目录 简介首次用户子命令x zuz zx zuz uzx zuz uzrx zuz ls 相关链接 简介 zuz 为 x-cmd 中的必用模块之一&#xff0c;提供压缩与解压文件的功能。 x z 就是调用 x zuz z&#xff0c;可将目标文件压缩根据后缀名成指定格式&#xff0c;x uz 则可以解压任何格式的压缩包 首次…
阅读更多...
音乐制作软件Studio One mac有哪些特点

音乐制作软件Studio One mac有哪些特点

Studio One mac是一款专业的音乐制作软件&#xff0c;该软件提供了全面的音频编辑和混音功能&#xff0c;包括录制、编曲、合成、采样等多种工具&#xff0c;可用于制作各种类型的音乐&#xff0c;如流行音乐、电子音乐、摇滚乐等。 Studio One mac软件特点 1. 直观易用的界面&…
阅读更多...
将DOM结构转换成图片保存至本地或保存至剪切板

将DOM结构转换成图片保存至本地或保存至剪切板

在新业务需求中&#xff0c;碰到这样一个场景&#xff0c;需要将后端返回的表格数据&#xff0c;保存至本地或者保存至剪切板&#xff0c;直接发送给用户使用。 1. 将内容转换成图片并保存至本地 1.1 交互效果 如图所示&#xff0c;想要点击复制按钮后&#xff0c;将下面这个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023