跟着pink老师前端入门教程-day26

一、计算机编程基础

（一）编程语言

1、编程

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

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

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

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

2、计算机语言

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

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

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

0=00000000 1=00000001 2=00000010 3=00000011 4=00000100 5=00000101
6=00000110 7=00000111 8=00001000 9=00001001 10=00001010

3、编程语言

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

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

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

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

4、翻译器

高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，需要一个翻译器。 翻译器可以将所编写的源代码转换为机器语言，这也被称为二进制化。 记住1和 0。

 5、编译语言和标记语言区别

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

6、总结

计算机可以帮助人类解决某些问题

程序员利用编程语言编写程序发出指令控制计算机来实现这些任务

编程语言有机器语言、汇编语言、高级语言

高级语言需要一个翻译器转换为计算机识别的机器语言

编程语言是主动的有很强的逻辑性

（二）计算机基础

1、计算机组成

计算机分为：硬件（看得见摸得着）、软件（看不见摸不着）

2、数据存储

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

3、数据存储单位

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

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

4、程序运行

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

2. CPU执行内存中的代码

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

二、初始JavaScript

（一）初始JavaScript

1、JavaScript是什么

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

2、JavaScript的作用

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

 3、HTML/CSS/JS的关系

html/CSS标记语言-描述类语言

  • HTML 决定网页结构和内容( 决定看到什么 )，相当于人的身体
  • CSS 决定网页呈现给用户的模样( 决定好不好看 )，相当于给人穿衣服、化妆

JS 脚本语言--编程类语言

  • 实现业务逻辑和页面控制( 决定功能 )，相当于人的各种动作

4、浏览器执行JS简介

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

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

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

5、JS的组成

5.1 ECMAScript

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

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

更多参看MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview

5.2 DOM—文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。

通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

5.3 BOM—浏览器对象模型

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

6、JS初体验

JS有三个书写位置，分别为行内、内嵌和外部

6.1、行内式JS

<input type="button" value="点我试试" οnclick="alert('Hello World')" />

  • 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick 
  • 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
  • 可读性差， 在html中编写JS大量代码时，不方便阅读；
  • 引号易错，引号多层嵌套匹配时，非常容易弄混；
  • 特殊情况下使用
 6.2、内嵌JS
<script>
        alert('Hello World~!');
</script>
  • 可以将多行JS代码写到 <script> 标签中
  • 内嵌 JS 是学习时常用的方式
6.3、外部JS文件
<script src="my.js"></script>
  • 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况
    <title>JS 初体验</title><!-- 2、内嵌式js --><script>alert('沙漠骆驼')</script><!-- 3、外部js script双标签 --><script src="./01JS 初体验.js"></script>
</head><body><!-- 1、行内式的JS 直接写到元素的内部 --><input type="button" value="你好" onclick="alert('你吃了吗')">
</body>

（二）JavaScript注释

1、单行注释

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

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

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

2、多行注释

/*
获取用户年龄和姓名
并通过提示框显示出来
*/

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

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

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

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript注释</title><script>// JavaScript注释 Ctrl + //*2.多行注释 默认快捷键 shift+ alt+ a2.多行注释 vscode 中修改多行注释的快捷键 shift+Ctrl+/*/</script>
</head>

（三）JavaScript输入输出语句

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

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

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript输入输出语句</title><script>// 输入框prompt('请输入年龄')// alert弹出警示框 输出的 展示给用户的alert('计算的结果是：')// console 控制台输出 给程序员测试用的console.log('我是程序员能看到的')</script>
</head>

 

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

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

相关文章

二叉搜索树题目：递增顺序搜索树

二叉搜索树题目：递增顺序搜索树

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 解法三思路和算法代码复杂度分析 后记 题目 标题和出处 标题&#xff1a;递增顺序搜索树 出处&#xff1a;897. 递增顺序搜索树 难度 3 级 题目描述…
阅读更多...
P1498 南蛮图腾题解

P1498 南蛮图腾题解

题目 给定一个正整数n&#xff0c;参考输出样例&#xff0c;输出图形。 输入输出格式 输入格式 每个数据输入一个正整数n&#xff0c;表示图腾的大小&#xff08;此大小非彼大小&#xff09; 输出格式 这个大小的图腾 输入输出样例 输入样例 2 输出样例 /\/__\/\ /\…
阅读更多...
HTTP缓存技术

HTTP缓存技术

大家好我是苏麟 , 今天说说HTTP缓存技术 . 资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) HTTP缓存技术 HTTP 缓存有哪些实现方式? 对于一些具有重复性的 HTTP 请求&#xff0c;比如每次请求得到的数据都一样的&#xff0c;我们可以把这对「请求-响…
阅读更多...
【mysql】数据约束

【mysql】数据约束

一、数据约束&#xff1a; 什么是约束&#xff1f; 为了确保表中的数据的完整性(准确性、正确性)&#xff0c;为表添加一些限制。是数据库中表设计的一个最基本规则。使用约束可以使数据更加准确&#xff0c;从而减少冗余数据&#xff08;脏数据&#xff09;。 数据库完整性约…
阅读更多...
84 CTF夺旗-PHP弱类型异或取反序列化RCE

84 CTF夺旗-PHP弱类型异或取反序列化RCE

目录 案例1&#xff1a;PHP-相关总结知识点-后期复现案例2&#xff1a;PHP-弱类型对比绕过测试-常考点案例3&#xff1a;PHP-正则preg_match绕过-常考点案例4&#xff1a;PHP-命令执行RCE变异绕过-常考点案例5&#xff1a;PHP-反序列化考题分析构造复现-常考点涉及资源&#xf…
阅读更多...
【HTML】过年不能放烟花，那就放电子烟花

【HTML】过年不能放烟花，那就放电子烟花

闲谈 大家回家过年可能都多多少少放过些&#x1f9e8;&#xff0c;但是有些在城市上过年的小伙伴可能就没有机会放鞭炮了。不过没关系&#xff0c;我们懂技术&#xff0c;我们用技术自娱自乐&#xff0c;放电子烟花&#xff0c;总不可能被警长叔叔敲门问候吧。 开干 首先&…
阅读更多...
Redis篇----第一篇

Redis篇----第一篇

系列文章目录 文章目录 系列文章目录前言一、什么是 Redis?二、Redis 与其他 key-value 存储有什么不同？三、Redis 的数据类型？四、使用 Redis 有哪些好处？五、Redis 相比 Memcached 有哪些优势？前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住…
阅读更多...
Spring 用法学习总结（四）之 JdbcTemplate 连接数据库

Spring 用法学习总结（四）之 JdbcTemplate 连接数据库

&#x1f409;目录 9 JdbcTemplate 9 JdbcTemplate Spring 框架对 JDBC 进行了封装&#xff0c;使用 JdbcTemplate 方便实现对数据库操作 相关包&#xff1a; 百度网盘链接https://pan.baidu.com/s/1Gw1l6VKc-p4gdqDyD626cg?pwd6666 创建properties配置文件 &#x1f4a5;注意…
阅读更多...
分布式文件系统 SpringBoot+FastDFS+Vue.js【二】

分布式文件系统 SpringBoot+FastDFS+Vue.js【二】

分布式文件系统 SpringBootFastDFSVue.js【二】 六、实现上传功能并展示数据6.1.创建数据库6.2.创建spring boot项目fastDFS-java6.3.引入依赖6.3.fastdfs-client配置文件6.4.跨域配置GlobalCrosConfig.java6.5.创建模型--实体类6.5.1.FastDfsFile.java6.5.2.FastDfsFileType.j…
阅读更多...
vscode 和 keil协同使用开发stm32程序，超详细教程

vscode 和 keil协同使用开发stm32程序，超详细教程

vscode 和 keil协同使用开发stm32程序 文章目录 vscode 和 keil协同使用开发stm32程序1. 安装vscode拓展安装chinese插件 2 .安装Mingw3.配置环境变量4. 打开Keil项目 VSCODE 是一款广受好评的代码编辑器&#xff0c; KEIL 是常用的嵌入式开发工具但编程界面简陋。 将两个工具…
阅读更多...
npm使用国内淘宝镜像（最新地址）

npm使用国内淘宝镜像（最新地址）

目录 前言 一、命令配置 二、使用cnpm安装 三、常见包地址 四、总结 往期回顾 前言 我们前端程序员在使用国外的镜像源速度很慢并且容易下载失败&#xff0c;有时候需要尝试多次才有可能下载成功&#xff0c;很麻烦&#xff0c;但是可以切换为国内镜像源&#xff0c;下…
阅读更多...
BigDecimal的常用API

BigDecimal的常用API

BigDecimal用于解决浮点型运算时结果出现失真的问题。 这里0.20.1等于0.3就出现了失真 import java.math.BigDecimal; import java.math.RoundingMode;public class Test {public static void main(String[] args) {//BigDeciaml的使用&#xff1a;解决小数运算失真的问题doub…
阅读更多...
微信网页版能够使用（会顶掉微信app的登陆）

微信网页版能够使用（会顶掉微信app的登陆）

一、文件结构 新建目录chrome新建icons&#xff0c;其中图片你自己找吧新建文件manifest.json新建文件wx-rules.json 二、文件内容 对应的png你们自己改下 1、manifest.json {"manifest_version": 3,"name": "wechat-need-web","author…
阅读更多...
C语言第二十五弹---字符函数和字符串函数(上)

C语言第二十五弹---字符函数和字符串函数(上)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 目录 1、字符分类函数 2、字符转换函数 3、strlen的使用和模拟实现 4、strcpy 的模拟实现 5、strcat 的模拟实现 6、strcmp 的模拟实现 7、strncpy 函数的使用 总结…
阅读更多...
Excel练习：日历

Excel练习：日历

Excel练习&#xff1a;日历 ‍ 题目&#xff1a;制作日历 ‍ ​​ 用rows和columns函数计算日期单元格偏移量 一个公式填充所有日期单元格 ​​ ‍
阅读更多...
CSP-201909-1-小明种苹果

CSP-201909-1-小明种苹果

CSP-201909-1-小明种苹果 #include <iostream> using namespace std; int main() {long long sumApple 0, maxNum 0, maxAppleNum 0, n, m;cin >> n >> m;for (long long i 0; i < n; i){long long appleNum, delta 0;cin >> appleNum;for (l…
阅读更多...
【JavaEE】spring boot快速上手

【JavaEE】spring boot快速上手

SpringBoot快速上手 文章目录 SpringBoot快速上手Maven会出现的一个官方bug创建完项目之后常用的的三个功能依赖管理Maven仓库中央仓库本地仓库国内源配置私服 springboot项目创建什么是springspring boot项目的创建Hello Worldweb服务器 SpringMVC什么是SpringWebMVC什么是MVC…
阅读更多...
111. 二叉树的最小深度

111. 二叉树的最小深度

给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明&#xff1a;叶子节点是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;2示例 2&#xff1a; 输入…
阅读更多...
Three.js学习9：Three.js 响应式设计

Three.js学习9：Three.js 响应式设计

-----------------------------华丽的分割线--------------------- 相关代码均已上传到 gitee 中&#xff1a;myThree: 学习 Three.js &#xff0c;努力加油~&#xff01; Gitee 静态演示地址&#xff1a;Three JS 演示页面 -----------------------------华丽的分割线------…
阅读更多...
相机图像质量研究(17)常见问题总结：CMOS期间对成像的影响--靶面尺寸

相机图像质量研究(17)常见问题总结：CMOS期间对成像的影响--靶面尺寸

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023