Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript

JavaScript

作者头像
用户9615083
发布于 2023-01-11 06:07:09
发布于 2023-01-11 06:07:09
72300
代码可运行
举报
运行总次数:0
代码可运行

# JavaScript

# 编程语言

# 编程

编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。

计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以 人们要控制计算机一定要通过计算机语言向计算机发出命令。

从事编程的人员,就是程序员。 但是一般程序员都比较幽默,为了形容自己的辛苦工作,也成为“码农”,或者 “程序猿”/ “程序媛”

注意:上面所定义的计算机指的是任何能够执行代码的设备,可能是智能手机、ATM机、黑莓PI、服务器等等。

# 计算机语言

计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介

计算机语言的种类非常的多,总的来说可以分成机器语言汇编语言高级语言三大类。

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
0=00000000 	1=00000001 	2=00000010 	3=00000011 	4=00000100 
5=00000101 	6=00000110 	7=00000111 	8=00001000 	9=00001001 
10=00001010

# 编程语言

可以通过类似于人类语言的 ”语言”来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming Language)。

编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守。

如今通用的编程语言有两种形式:汇编语言高级语言

  • 汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。
  • 高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-CSwift等。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
C语言:puts("你好");
PHP:echo "你好";
Java:System.out.println("你好");
JavaScript: alert("你好"

# 翻译器

高级语言所编制的程序不能直接被计算机识别,必须经过转换才能被执行,为此,我们需要一个翻译器。

翻译器可以将我们所编写的源代码转换为机器语言,这也被称为二进制化。 记住1和 0

# 编程语言和标记语言区别

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

# 总结

  1. 计算机可以帮助人类解决某些问题
  2. 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
  3. 编程语言有机器语言、汇编语言、高级语言
  4. 高级语言需要一个翻译器转换为计算机识别的机器语言
  5. 编程语言是主动的有很强的逻辑性

# 计算机基础

# 计算机组成

# 数据存储

  1. 计算机内部使用二进制0和1来表示数据。
  2. 所有数据,包括文件、图片等最终都是以二进制数据(0和1)的形式存放在硬盘中的。
  3. 所有程序,包括操作系统,本质都是各种数据,也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件,其实就是把程序文件复制到硬盘中。
  4. 硬盘、内存都是保存的二进制数据。

# 数据存储单位

bit < byte < kb <GB<TB<...

  • 位(bit): 1bit可以保存一个О或者1(最小的存储单位)
  • 字节(Byte): 1B = 8b
  • 千字节(KB):1KB = 1024B
  • 兆字节(MB): 1MB = 1024KB
  • 吉字节(GB): 1GB = 1024MB
  • 太字节(TB):1TB = 1024GB
  • ...

# 程序运行

  1. 打开某个程序时,先从硬盘中把程序的代码加载到内存中
  2. CPU执行内存中的代码

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

# 初识 JavaScript

# JavaScript 是什么

  • 布兰登:艾奇(Brendan Eich,1961年~)。
  • 神奇的大哥用10天完成JavaScript设计。
  • 最初命名为LiveScript,后来在与Sun合作之后将其改名为JavaScript。
  • JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思)
  • 脚本语言:不需要编译,运行过程中由js解释器(js 引擎)逐行来进行解释并执行
  • 现在也可以基于Node.js技术进行服务器端编程

# JavaScript 的作用

  • 表单动态校验(密码强度检测)(JS产生最初的目的)
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)

# HTML/CSS/JS 的关系

# 浏览器执行JS简介

浏览器分成两部分:渲染引擎和JS引擎

  • 渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的 blink,老版本的webkit
  • JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8

浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript 语言归为脚本语言,会逐行解释执行.

# JS 的组成

# ECMAScript

ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。

ECMAScript: ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

更多参看MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview (opens new window)

# DOM - 文档对象模型

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

# BOM - 浏览器对象模型

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

# JS 初体验

JS有3种书写位置,分别为行内、内嵌和外部。

# 行内式
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="button" value="点我试试" onclick="alert('Hello World')" />
  • 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
  • 注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
  • 可读性差, 在html中编写JS大量代码时,不方便阅读;
  • 引号易错,引号多层嵌套匹配时,非常容易弄混;
  • 特殊情况下使
# 内嵌 JS
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
 	alert('Hello World~!');
</script>
  • 可以将多行JS代码写到 <script> 标签中
  • 内嵌 JS 是学习时常用的方式

# 外部 JS 文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="my.js"></script>
  • 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况

# JS 注释

# 单行注释

为了提高代码的可读性,JS与CSS一样,也提供了注释功能。JS中的注释主要有两种,分别是单行注释多行注释

单行注释的注释方式如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 我是一行文字,不想被 JS引擎 执行,所以 注释起来

// 用来注释单行文字( 快捷键 ctrl + /

# 多行注释

多行注释的注释方式如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/*
 获取用户年龄和姓名
并通过提示框显示出来
*/

/* */ 用来注释多行文字( 默认快捷键 alt + shift + a )

快捷键修改为: ctrl + shift + /

vscode -> 首选项按钮 -> 键盘快捷方式 -> 查找 原来的快捷键 -> 修改为新的快捷键 -> 回车确认

# JavaScript 输入输出语句

为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:

方法

说明

归属

alert(msg)

浏览器弹出警示框

浏览器

console.log(msg)

浏览器控制台打印输出信息

浏览器

prompt(info)

浏览器弹出输入框,用户可以输入

浏览器

注意: alert()主要用来显示消息给用户,console.log()用来给程序员自己看运行时的消息。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-01-090,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
设计模式——命令模式
设计模式——命令模式
Java架构师必看
2021/05/14
4940
设计模式——命令模式
详解设计模式:命令模式
命令模式(Command Pattern)也被称为行动模式(Action Pattern)、事物模式(Transaction Pattern),是在 GoF 23 种设计模式中定义了的行为型模式。
栗筝i
2022/12/05
4630
详解设计模式:命令模式
【Java设计模式】020-命令模式
命令(Command)模式:将一个请求封装为一个对象,使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通,这样方便将命令对象进行储存、传递、调用、增加与管理。
訾博ZiBo
2025/01/06
960
设计模式-命令模式
当我们的代码中"方法的请求者" 和 "方法的实现者" 之间存在较为紧密的耦合的时候,这段代码的后续维护会变得很困难。如果我们想对方法进行回滚 撤销等操作的话就会很困难;使用命名模式可解决这一问题。
六个核弹
2022/12/23
3940
设计模式 ☞ 行为型之命令模式
  命令(Command)模式的定义如下:将一个请求封装为一个对象,使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通,这样方便将命令对象进行储存、传递、调用、增加与管理。比如看电视时,我们只需要轻轻一按遥控器就能完成频道的切换,这就是命令模式,将换台请求和换台处理完全解耦了。电视机遥控器(命令发送者)通过按钮(具体命令)来遥控电视机(命令接收者)。
Demo_Null
2021/01/13
3440
设计模式 ( 十三 ) 命令模式Command(对象行为型)
宏命令又称为 组合命令 ,它是 命令模式和组合模式 联用的产物: 宏命令也是一个具体命令,不过它包含了对其他命令对象的引用, 在调用宏命令的 execute() 方法时,将递归调用它所包含的每个成员命令的 execute() 方法 ,一个宏命令的成员对象可以是简单命令,还可以继续是宏命令。执行一个宏命令将执行多个具体命令,从而实现对命令的批处理。 Ÿ
黄规速
2022/04/14
3600
设计模式 ( 十三 ) 命令模式Command(对象行为型)
设计模式之命令模式
命令模式(Command Pattern)属于设计模式中的行为型模式。命令模式实现了施令者与具体命令的解耦,并且可以实现撤销等命令相关功能。
Dylan Liu
2019/12/19
3510
设计模式(十五):行为型之命令模式
Java微观世界
2025/01/21
1500
设计模式(十五):行为型之命令模式
设计模式 | 行为型 | 命令模式
转换让你能根据不同的请求将方法参数化,并且能够支持排队、延迟执行、记录日志、撤销等附加控制功能。
被水淹没
2023/02/25
3250
设计模式 | 行为型 | 命令模式
常用设计模式——命令模式
将"请求"封装成对象,以便使用不同的请求、队列、或者日志来参数化其他对象(就是命令对象拥有相同的接口,不同的命令对象可以被设置到调用者中)。命令模式也可以支持撤销操作。
用户5325874
2020/01/16
3780
常用设计模式——命令模式
23种设计模式之命令模式
**命令模式(Command Pattern)**是一种数据驱动的设计模式,它属于行为型模式。命令模式又称为行动/交易模式;是指将一个请求封装为一个对象,使发出请求的责任和执行请求的责任分割开。
Java技术债务
2022/09/26
3490
23种设计模式之命令模式
C++设计模式-命令模式讲解以文本编辑器为例
命令模式的核心思想是将请求封装为一个对象,这样就可以将请求者和接收者解耦,使得请求者不需要知道接收者的接口,只需要知道如何调用命令对象的执行方法。这样做的好处是可以将请求的发出者和接收者分离,使得它们可以独立地变化。这样也使得我们可以容易地支持请求的排队、记录请求日志以及支持可撤销的操作。
晨星成焰
2023/12/18
4141
C++设计模式-命令模式讲解以文本编辑器为例
设计模式----命令模式
命令模式是对命令的封装。命令模式把发出命令的责任和执行命令的责任分割开,委派给不同的对象
大忽悠爱学习
2021/11/15
4430
java 命令模式[java泛型类继承]
大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说java 命令模式[java泛型类继承],希望能够帮助大家进步!!!
Java架构师必看
2022/03/09
4220
Java设计模式(十八)----命令模式
命令模式 一、 概念 二、 结构 三、 具体案例 四、 宏命令 五、 命令模式优点 引子 在程序设计中,经常设计到一个对象需要请求另外一个对象调用其方法达到某种目的,如果请求这不希望或不直接和被请求者打交道,既请求者不包含被请求者的引 用,那么就可以使用命令模式。例如在军队中,指挥官请求三连偷袭敌人,但是指挥官不希望或无法直接与三连取得联系,那么可以将该请求形成一个命令,该命令 的核心是让三连偷袭敌人。只要能让该命令被执行,就会实现偷袭
汤高
2018/01/11
8990
Java设计模式(十八)----命令模式
设计模式-命令模式
命令模式 命令(Command)模式的定义如下:将一个请求封装为一个对象,使发出请求的责任和执行请求的责任分割开。 这样两者之间通过命令对象进行沟通,这样方便将命令对象进行储存、传递、调用、增加与管理。 1.优点 降低系统的耦合度。命令模式能将调用操作的对象与实现该操作的对象解耦。 增加或删除命令非常方便。采用命令模式增加与删除命令不会影响其他类,它满足“开闭原则”,对扩展比较灵活。 可以实现宏命令。命令模式可以与组合模式结合,将多个命令装配成一个组合命令,即宏命令。 方便实现 Undo 和 Re
cwl_java
2019/10/26
5540
一起学设计模式 - 命令模式
命令模式:对命令的封装,把发送命令和执行命令的责任分割开,分别委派给不同的对象,每一个命令都是一个操作,允许请求方与接收方独立开来,使之请求方不必清楚接收方的接口,更不必知道请求是怎么被接收,以及操作是否被执行、何时被执行,以及是怎么被执行的。
battcn
2018/08/03
4230
一起学设计模式 - 命令模式
设计模式(8)——命令模式(Command Pattern,行为型)
使用设计模式可以提高代码的可复用性、可扩充性和可维护性。命令模式(Command Pattern)属行为型,将请求封装成对象,以便使用不同的请求、请求日志或请求队列等来参数化其他对象。命令模式也支持撤销操作。
恋喵大鲤鱼
2018/08/03
5350
设计模式(8)——命令模式(Command Pattern,行为型)
Java设计模式学习记录-命令模式
这次要介绍的是命令模式,这也是一种行为型模式。最近反正没有面试机会我就写博客呗,该投的简历都投了。然后就继续看书,其实看书也会给自己带来成就感,原来以前不明白的东西,书上已经给彻底的介绍清楚了,然后读到完了就有一种恍然大悟的感觉,怕自己理解的有问题,还要去网上搜各种答案来确保自己的理解确实没问题。最近看到一句话感觉很有道理:读书最好的目的在于,你会发现凭借自身阅读构建起来的小世界,能以体恤式的温柔,消除自身的苦难。
纪莫
2018/08/27
3080
Java设计模式学习记录-命令模式
「聊设计模式」之命令模式(Command)
🏆本文收录于《聊设计模式》专栏,专门攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎持续关注&&收藏&&订阅!
bug菌
2023/11/13
5040
「聊设计模式」之命令模式(Command)
推荐阅读
相关推荐
设计模式——命令模式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验