JavaScript（一）

最新推荐文章于 2024-02-01 09:25:01 发布
最新推荐文章于 2024-02-01 09:25:01 发布
阅读量327 收藏
点赞数
分类专栏： 前端 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/msn131420/article/details/123132414
版权

一、编程语言

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.程序员利用编程语言编写程序发出指令控制计算机来实现这些任务

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

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

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

二、计算机基础

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 ......

字节通常简写为“B（字节）”，而位通常简写为小写“b（比特）”，计算机存储器的大小通常用字节来表示。

4.程序运行

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

2.CPU执行内存中的代码

 

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

我们程序运行的时候是吧程序放到内存里面，因为内存里面运行的更快，CPU是从内存读取数据的，而不是从硬盘中直接读取数据。

三、初识 JavaScript

1.JavaScript是什么？

创始人Brendan Eich和Java完全没有关系 (和Java同属于sun公司)

  • JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）
  • 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
  • 现在也可以基于 Node.js 技术进行服务器端编程

 

2.JavaScript 的作用

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

3.HTML/CSS/JS 的关系

 

4.浏览器执行 JS 简介

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

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

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

 

5.js组成--3部分组成

 

1.ECMAScript

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

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

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

 

2. DOM ——文档对象模型

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

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

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

6.JS 书写位置--3种

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

1. 行内式 JS--添加事件

<input type="button" value="点我试试" onclink="javascript:alert('Hello World')" />
  1. 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性)，如： onclink
  2. 注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
  3. 可读性差，在 HTML 中编入 JS 大量代码时，不方便阅读
  4. 特殊情况下使用

2.内嵌式JS

<script>
     alert('Hello World!');
</script>
  • 可以将多行JS代码写到<script>标签中
  • 内嵌 JS 是学习时常用的方式

3.外部JS

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

  1. 利于HTML页面代码结构化，把单独JS代码独立到HTML页面之外，既美观，又方便

  2. 引用外部JS文件的script标签中间不可以写代码

  3. 适合于JS代码量比较大的情况

 

四、JavaScript 注释--2种

1、单行注释

//  单行注释
  • 快捷键ctrl + /

2、多行注释

/*
    多行注释
*/    
  • 快捷键 shift + alt + a
  • vscode中修改快捷键方式：vscode➡ 首选项按钮➡ 键盘快捷方式 ➡ 查找原来的快捷键➡ 修改为新的快捷键➡ 回车确认

 

五、JavaScript 输入输出语句--1+2

js是编程语言，是为了实现和用户的交互效果，我们编程就是为了用户输入内容，处理结果（程序内部处理），然后把结果显示给用户。

Promopt:用户输入，输入信息的

 alert：弹框输出 ，给用户来看的

console：控制台输出，给程序员看的

 

 

丑八怪223
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS-事件和事件类型
m0_63973769的博客
07-18 450
事件元素在某种状态(浏览器实现)达成时要执行的提前设定好的程序我们称之为事件句柄。事件三要素事件源事件类型事件处理程序(handler)7.鼠标滚轮滚动时鼠标指针在被选元素内部。1.行内式标签的属性值是事件触发时的执行代码。2.移除对应元素的事件监听程序。1.行内和属性绑定的事件解绑。2.属性绑定(只能绑定一个handler)3.鼠标在被选元素内按下。4.鼠标在被选元素内松开。5.鼠标进入被选元素。6.鼠标离开被选元素。3.给元素添加一个事件监听器。......
js中的事件
2301_76986466的博客
03-28 285
input input的value值改变(input事件在低版本中的IE中不兼容,使用onpropertychange代替)1.鼠标相对当前标签的位置: 事件对象.offsetX 事件对象.offsetY。2.鼠标相对浏览器的位置: 事件对象.clientX 事件对象.clientY。事件对象包含了事件的类型丶鼠标点击的位置丶在屏幕中和浏览器中的位置.还以其他很多信息。3.鼠标相对整个网页的位置: 事件对象.pageX 事件对象.pageY。
JavaScript事件绑定的三种方式
qq_45745362的博客
11-11 312
【代码】JavaScript事件绑定的三种方式。
JS-----第五章 函数及事件
BUG专业户
05-25 411
函数，事件，对象 总结：函数 学会函数的定义和调用 调用：直接，跟标签事件绑定 获取对象：document.getElementById();
JS行内绑定事件到底加不加括号
最新发布
qq_44741577的博客
02-01 302
vue中加括号的话，参数由你定义，不加括号的话，传入的参数是默认的。第一个test1按钮点击时会触发，事件对象也正确打印。第二个test2按钮则不会触发，函数也不会执行。
JavaScript一圖說明白
11-07
如何用一張圖表簡單明瞭的進入並了解JavaScript這門越來越牛逼的語言呢?
javascript线性渐变一
10-29
javascript在处理图像的能力其实是不弱的，可惜浏览器大战连累了它，这还不算，Adobe 收购Macromedia更让SVG处于怠工状态。
javascript-awesome-tips:JavaScript一系列很棒JavaScript技巧
05-27
该存储库的目标是在同一位置共享一组JavaScript技巧，并提供简单而具体的示例。加入社区！ 我创建此文件夹的目的是围绕JavaScript创建一个社区！ 我知道很多已经存在，但是为什么不创建一个新的呢？ 让我们看看将来...
javascript：一次学习javascript
02-08
一次学习javascript 一个扩展的存储库，显示各种JavaScript活动，从初学者类到涉及Dom和Events的更高级类，不一而足。 基于Colt Steele关于Udemy的Web Developer 2021课程的小型项目以及其他JS老师的其他项目。 ...
javascript
10-13
JavaScript 的学习之旅，最基础的Javascript的内容，从简介，变量，语法规则，变量来进行的
JS事件
Ulrica_Amaris的博客
09-07 530
事件 1.事件就是交互事件，用户点击实现回馈，是交互体验的核心功能。 绑定事件 1.ele.onxxxx = function(event){} 兼容性很好，但是一个元素的同一事件上只能绑定一个 基本等同于写在HTML行间上。 2.obj.addEventListener(type, listener, options) IE9以上，可以为一个事件绑定多个处理程序。 3.obj.attachEvent(‘on’ + type, fn（事件处理函数）)； IE独有，一个事件同样可以绑定多个处理程序 解除事件
html行内触发事件的this指向（原生js学习）
lcathm的专栏
06-24 9316
参考： http://www.cnblogs.com/snandy/archive/2011/03/07/1976317.html var m=function(){         alert(2);     }     var obj={         A:function(){         },         m:function(){        
js的三种使用方式（行内js、内部js、外部js）
热门推荐
xuehyunyu的博客
06-11 4万+
1、行内js：js不单独写出 js使用方式1：行内js 2、内部js：script里的程序整个页面都可以用 js使用方式2：内部js //声明一个函数(整个文档都可以使用) function surprise() { alert('恭喜你中了一百万')/*弹出框*/
js中三种事件绑定之间的关系和事件处理函数里的this值
标子 的专栏
01-14 5768
输出：div元素本身     var c=document.getElementById("b"); c.onclick=function(){console.log(1)}   输出：1 onclick的绑定方式会覆盖内联式的事件绑定。也可以在c.onclick里输出this，可知道this代表div元素本身。
js基础——操作行内样式和对触发事件的理解
我的博客
08-04 1256
本文是对上一文"js基础"的补充 一、 操作行内样式 1. 上文说到:通过对象.style.属性名js只能操作行内样式。它实际的含义是：通过该方法只能获取到行内样式，但是无论外部样式或者内嵌样式是否有某一个属性，都可以通过对象.style.属性名修改该属性的值，此时相当于给行内样式增加该属性，并赋值。当该对象的行内样式的属性有值时，由于行内样式的优先级大于内嵌样式，故最终会应用新的值 &lt...
Javascript 行内事件编写
卋舉
10-16 439
按钮 button; 点击 onclick; 文档 document; 内 inner <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>行内事件编写 onclick=""</t
JS点击增加行事件
Xu_yan的博客
11-02 3030
JS点击增加行事件 代码如下：        js-sample        var count = 1;   function add() {     var tbl = document.all.ci;     var rows = tbl.rows.length;     var tr = tbl.insertRow(rows);
js 行内事件JSON对象传参
Stavin Li的博客
03-18 680
<img onclick="getInfo(reData({id:1}))"/> function reData(data) { return typeof JSON.parse(data) == "object" ? data.replace(/"/g, '&quot;') : JSON.stringify(data).replace(/"/g, '&quo...
JavaScript 一种脚本语言详细解释
04-24
JavaScript 是一种脚本语言，最初是为了在 web 页面中添加交互功能而设计的。它可以在 web 浏览器中运行，并且也可以与服务器进行通信。JavaScript 是一种动态、基于对象的语言，语法类似于 C 语言。它可以用来添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值