javascipt学习笔记一_开发测试

javascipt学习笔记一

创始人

2025-01-08 22:04:49

0次

JavaScript基础day1

一、编程语言

1.编程

编程：就是让计算机为解决某个问题而使用某种编程设计语言编写程序代码，最终得到结果的过程
计算机程序：
就是计算机所执行的一系列的指令集合。

2.计算机语言

计算机语言指的是用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。
计算机语言的种类非常多，总的来说可以分为机器语言、汇编语言和高级语言三大类。
实际上计算机最终执行的都是机器语言，它是由0和1组成的二进制数，二进制是计算语言的基础

3.编程语言

可以通过类似人类的语言来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言。编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇，必须遵守，如今通用的编程语言有两种形式，汇编语言和高级语言。

语言类型	说明
汇编语言	汇编语言和机器语言实质是相同的，都是直接对硬件操作。只不过指令采用了英文缩写的标识符，容易识别和记忆
高级语言	高级语言主要是相对于低级语言而言。它并不是特指某一种具体的语言，二十包括了很多编程语言，常用的有C语言、C++、java、C#、Python、PHP、JavaScript、Go语言、Swift等等

4.翻译器

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

5.编程语言和标记语言的区别

标记就是标签，如html

语言
编程语言	编程语言有很强的逻辑和行为能力，在编程语言李，会看到很多 if for while等等具有逻辑性和行为能力的指令，这是主动的
标记语言	标记语言不用于向计算机发乎指令，常用于格式化和链接。标记语言是用来被读取的，它是被动的

二、计算机基础

1.计算机组成

冯诺依曼提出了计算机组成

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.数据存储

计算机内部使用的是二进制0和1来表示数据的

所有的数据，包括文件、图片最终都是以二进制（0和1）的形式存储在硬盘中

所有程序、包括操作系统本质上都是各种数据，也是二进制数据的形式存储在硬盘中。平时我们所有的安装软件，其实就是把程序文件复制到了硬盘中

硬盘、内存都是保存的是二进制数据

3.数据存储单位

位(bit) 比特 1bit可以保存一个0或者是一个1（它是最小的存储单位）
字节（Byte） 1B = 8bit
千字节（KB） 1KB = 1024 B
兆字节（MB） 1MB = 1024K
吉字节（GB） 1GB = 1024MB
太字节（TB） 1TB = 1024GB

10月24号程序员节

4.程序运行

计算机运行软件的过程：

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

CPU执行内存中的代码

三、初入JavaScript

1.JavaScript是什么

布兰登·艾奇（1961年 ~ ）。用了10天完成JavaScript的设计，最初命名为LiveScript，后来与Sun公司合作，改名为JavaScript

JavaScript是世界上最流行的编程语言之一，是一种运行在客户端的脚本语言（Script就是脚本的意思）
脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释执行的编译：高级语言到汇编语言省去这一步骤
浏览器和传统的编译器的区别
浏览器打开的时候，我一行一行的写，就会立即的一行行解释
重新打开浏览器的时候就是全部代码执行
现在也可以基于Node.js技术进行服务器端编程（谷歌的v8引擎）解释js语言的速度最快
Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， [1]让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言

2.JavaScript的作用

表单动态校验（JS产生的最初目的就是这个）
网页特效
服务端开发（Node.js）
桌面程序（Electron）
App（Cordova）
控制硬件 - 物联网（Ruff）
游戏开发（cocos2d - js）

3.HTML/CSS和js的关系

html是骨架：决定了网页的结构和内容
CSS：决定呈现给用户的模样（好不好看）
js：决定业务和功能，相当于人的各种动作

4.浏览器执行js简介

浏览器分为两个部分：渲染引擎和js引擎

渲染引擎
- 用来解析HTML与CSS，俗称内核。比如chrome浏览器blink，老版本webkit（偷的苹果浏览器的内核）
js引擎
- 也叫js解释器，用来读取网页中的javascript的代码，对其处理后运行，比如chrome浏览器的v8引擎
浏览器本身并不会执行js代码，而是通过内置的JavaScript引擎

5.js要学什么

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

ECMAScript: 规定了js的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套js语法工业标准
DOM（Document Object Model）：文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作（大小，位置，颜色等等）
BOM（Broswer Object Model）：浏览器对象模型。它提供了独立于内容的，可以与浏览器窗口进行互动的对象接口，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器的跳转、获取分辨率等等

6.1js初体验

6.1 js编写的位置

js由三种写书位置：
行内
内嵌
外部

6.1.1 行内式

可以将单行或者少量js代码写在html的标签的事件属性中（以on 开头的属性）。如：onclick
注意单引号的使用：在HTML中我们推荐使用双引号，在js中我们推荐使用的单引号
如果使用行内式，代码的可读性较差，在html中编写js大量代码的时候，不方便阅读
引号容易出错，引号多层嵌套匹配的时候，容易弄混
非特殊情况不推荐使用

6.1.2 内嵌式

可以将多行js带啊吗写入到script标签里面
内嵌js可以放在html页面的任意地方，一般都放在最下面

因为js是顺序执行代码的，所以如果存在类似id这种和其他代码有关的代码，就会被忽略掉，但是如果放在最后的话就不会存在这种问题因为id已经全部定义

6.1.3 外部js文件

利于html页面的代码结构化，把大段的js代码独立于html页面之外，既美观也方便文件在别的地方复用
引用外部js文件的script标签中不可以写代码
适合js代码量比较大的情况

一般写在上面

6.2 javaScript中的注释

6.2.1 单行注释

快捷键：Ctrl + ？

单行注释  //  如： //这是我写的一个函数

6.2.2 多行注释

快捷键：选中要注释的代码 alt + shift + a

/**  * 这是多行注释  * 第一行  * 第二行  */

6.2.3 修改快捷键

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

查找原来的快捷键，修改为: ctrl + shift + /

6.3 javaScript中输入输出语句

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

方法	说明
alert(msg)	浏览器弹出警示框
console.log(msg)	浏览器控制台打印输出信息
prompt(info)	浏览器弹出输入框，用户可以输入

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

7.变量的概念
7.1.什么是变量
大白话：变量就是一个装东西的盒子
通俗：变量就是用于存放数据的容器，我们通过变量名可以获取数据，甚至数据可以修改
7.2.变量在内存中的存储
本质：变量是程序在内存中盛情的一块用于存放数据的空间。类似于我们在酒店的房间，一个房间就可以看作是一个变量。
7.3.变量的使用
- 变量的声明
- 变量的赋值
7.3.1 变量的声明
```
//声明变量语法：   var  变量名 //如： var age; 
```
var: 是js的关键字，用于声明变量（variable ：翻译成中文叫变量）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管理
age：是程序员定义的变量名，我们需要通过变量名来访问内存中分配的空间
7.3.2 赋值
```
age = 20;   //给age这个变量赋值为20 
```
= : 用来把右边的值赋变量空间中，此处代表赋值的意思。
变量值是程序员保存到变量中的值
7.3.3 变量的初始化
```
var age = 18;  //声明变量的同时赋值为18 
```
声明一个变量并赋值，我们称之为变量的初始化
7.4 变量语法扩展
- 更新变量
  - 一个变量被重新赋值后，它原有的值会被覆盖，变量值将最后一次的赋值为准
  - ```
  var age = 18;  age = 19;  age = 20;    //最后的结果是20 
```
- 同时声明多个变量
  - 同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号分隔
  - ```
  // var name = '张三'; // var age = 18; // var sex = '女'; //上面可以替换成： var name = '张三',age = 18,sex = '女' 
```
- 声明变量特殊情况
  - 情况说明
    var age; console.log(age) 只声明，不赋值
    console.log(def) 不声明，不赋值，直接报错
    x = 10;console.log(x) 不声明，只赋值
7.5 变量名的命名规则
规则：
- 由字母( a-z A-Z)、数字(0-9)、下划线(_)或美元符号($) 组成
- 严格区分大小写
- 不能以数字开头
- 不能是关键字。例如：var、for、whil
- 变量名必须有意义
- 遵守驼峰命名法，首字母小写，后面的每个单词首字母大写。例如：myFirstName
```
例如：  var age;  var name;  var 18name;   错误  var age_;  var age&;    错误 
```

情况	说明
var age; console.log(age)	只声明，不赋值
console.log(def)	不声明，不赋值，直接报错
x = 10;console.log(x)	不声明，只赋值

8.数据类型

8.1 数据类型简介

为什么需要数据类型

在计算机中，不同的数据类型所占用的内存空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。 简单的说：数据类型就是根据数据的类别型号，比如姓名“张三”，年龄18，这些数据的类型是不一样的，那么分配内存空间大小也不一样

变量的数据类型

变量是用来存储值得所在处。他们有名字和数据类型，变量得数据类型就决定了如何将代表这些值得位存储到计算机得内存中。javaScript是一种弱类型得或者动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var a; a = 10; a = '10' console.log(typeof(a))

数据类型分类
- 简单数据类型
  - number
  - string
  - boolean
  - undefined
  - null
- 复杂数据类型
  - object

8.2 简答数据类型

简单数据类型（基本数据类型）

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值如：12、0.12	0
Boolean	布尔型值，如：true、false。等价于1 或0	false
String	字符串类型，如：“张三” ，注意js里面，字符串都是带引号的	“”
Undefined	var a; 声明了变量a，但是没有给它赋值，此时a = undefined	undefined
Null	var a = null; 声明了变量a 为空值	null

数字型number
- javaScript中数字类型既可以保存整数，也可以保存浮点数（小数）
  - ```
  var age = 21;       //整数 var Age = 21.374;  //小数，浮点数  console.log(typeof(age),typeof(Age)) 
```
- 数字型进制
  - 常见的进制：二进制、八进制、十进制、十六进制
  - ```
  var num = 0xA; console.log(num) //10   现阶段大家记住：十六进制是前面加 `0x` 
```
- 数字型数据范围
  - javaScript中数值的最大和最小值
    - 最大值：Number.MAX_VALUE ，这个值是：1.7976931348623157e+308
    - 最小值：Number.MIN_VALUE ，这个值是：5e-324
- 数字型有三个特殊值
  - Infinity : 代表无穷大，大于任何数值
  - -Infinity ：代表无穷小，小于任何数值
  - NaN ：Not a Number，代表一个非数值
    - ```
    var userAge = "哈哈"; var isNum = isNaN(userAge) console.log(isNum)  //不是一个数字，就会返回true 
```
string : 字符串类型，字符串型可以是引号中的任意文本，其语法是单引号或双引号
- ```
var msg1 = '我爱北京天安门'   //使用单引号表示字符串 var msg2 = "我爱北京天安门"   //使用双引号表示字符串  //错误：因为HTML标签里面的属性使用的是双引号，js这里我们更推荐使用单引号 var msg3 = 我爱北京天安门 
```
- 字符串引号嵌套
  - 类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。转义符都是以\开头的，常用的转义符及说明如下：
  - 转义符解释说明
    \n 换行符，n 是 newline 的意思
    \\ 表示一个 \
    \' 表示单引号
    \" 表示双引号
    \t tab 缩进
    \b 空格， b 是 blank 的意思
- 字符串长度
  - 字符串是由若干字符组成的，这些字符的数量就是字符串的长度，通过字符串的length属性可以获取整个字符串的长度
  - ```
  var msg = 'hello' console.log(msg.length) 
```
- 字符串的拼接
  - 多个字符串之间可以用+进行拼接，其拼接方式为：字符串 + 任何数据类型 = 拼接后的新字符串
  - 拼接前会把与字符串相加的任何类型转换成字符串，再拼接成一个新的字符串
  - ```
  console.log('hello' + '\t' + 'world')  //hello	world  console.log('100' + '100')    //100100  console.log(1 + 2 + '3')   //33  console.log('1' + 2 + 3)  //123 
```
- +: 数值相加，字符相连
- 都是加号所以按照从左到右的原则
- 字符串拼接加强
  - ```
  var age = 18 console.log('蔡徐坤的年龄是age岁') console.log(`蔡徐坤的年龄是${age}岁`)  //es6中的写法 console.log('蔡徐坤的年龄是' + age + '岁') 
```
boolean：布尔型
- 布尔型只能取值：true/false，其中true表示真（对），false表示假（错）
- 布尔型和数字型相加的时候，true的值为1，false的值为0
- ```
console.log(true + 1)  //2 console.log(false + 1)  //1 
```

转义符	解释说明
`\n`	换行符，n 是 newline 的意思
`\\`	表示一个 \
`\'`	表示单引号
`\"`	表示双引号
`\t`	tab 缩进
`\b`	空格， b 是 blank 的意思

undefined 和 null

一个声明后没有被赋值的变量会由一个默认值:undefined （如果进行相连或者是相加的时候，注意结果）

var var1 = null console.log('你好' + var1)  //你好null console.log(1 + var1)       //1 console.log(true + var1)     //1

8.3 获取变量数据类型

获取检测变量的数据类型
- typeof 可以获取检测变量的数据类型
- ```
var num = 18; console.log(typeof(num)) console.log(typeof num) 
```
- 不同类型的返回值
  - 类型例子结果
    String typeof ‘小白’ “string”
    Number typeof 18 “number”
    Boolean typeof true “boolean”
    Undefined typeof undefined “undefined”
    Null typeof null “object”
字面量
- 字面量：实在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值
- 数字字面量：8， 9 ，10
- 字符串字面量： “我爱编程”
- 布尔型的字面量： true/false

类型	例子	结果
String	typeof ‘小白’	“string”
Number	typeof 18	“number”
Boolean	typeof true	“boolean”
Undefined	typeof undefined	“undefined”
Null	typeof null	“object”

8.4 数据类型转换

什么是数据类型转换？

转换为字符串

方式	说明	案例
toString()	转换成字符串	var num = 1; alert(num.toString())
String() 强制转换	转换成字符串	var num = 1; alert(String(num))
加号后面拼接字符串	转换成新的字符串	var num = 1; alert(num + ‘’);

toString() 和String() 使用方式不一样
三种转换方式，更多的是使用第三种加号拼接字符串的方式，这一种方式称之为隐式转换。

转换为数字型（重点）

方式	说明	案例
aprseInt（string）	将string类型的数据转换成整数型	parseInt(“78”)
parseFloat(string)	将string类型的数据转换成浮点型	parseInt(“78.01”)
Number()强制转换	将string类型的数据转换成数值型	Number(‘12’)
js隐士转换 ( - * / )	利用算术运算符隐式转换为数值型	‘12’ - 0

var num1 = prompt('请输入一个数字',0)   //得到结果是一个字符串类型的值 var num2 = prompt('请输入二个数字',0) var sum = parseInt(num1) + parseInt(num2); alert(sum)  var pi = "3.9415926" console.log(parseInt(pi)) console.log(parseFloat(pi)) console.log(Number(pi))  //隐式转换 var num = '12' // - : 减号可以实现隐式转换 console.log(typeof(num - 1)) // * : 乘号可以实现 console.log(typeof(num * 1)) // / ： 除号也可以实现 console.log(typeof(num / 1))

promt得到的结果是字符串类型的，如果要进行数值计算要转换

转换为整数类型，不会四舍五入

记忆图表就记住了

转换成布尔型

方式说明案例
Boolean() 函数其它类型转换成布尔型 Boolean(‘true’)

方式	说明	案例
Boolean() 函数	其它类型转换成布尔型	Boolean(‘true’)

console.log(Boolean('true')) console.log(Boolean('')) //false console.log(Boolean(0)) //false console.log(Boolean(1)) //true console.log(Boolean(NaN)) //false console.log(Boolean(undefined)) //false console.log(Boolean('小白')) //true console.log(Boolean(12)) //true

代表空、否定的值，都会被转换成false。如：0、NaN、null、undefined。其余的值都会被转换成true

9.解释型语言和编译型语言

9.1 概述

计算机不能直接理解任何除机器语言以外的语言。所以必须要把程序所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称之为翻译器。

翻译器翻译的方式有两种：一个编译，另一种是解释。两种方式之间的区别在于翻译的事件点不同
编译器是在代码执行之前进行编译，生成中间代码文件
解释器是在运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称之为解释器）

9.2 执行过程

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

类似于请客吃饭：
编译语言：首先要把所有的菜都做好，才能上桌吃饭
解释性语言：边上菜，边吃

10.关键字和保留字

标识符

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字 标识符不能是关键字或保留字

关键字
- 是指js本身已经使用了的字，不能再用他们充当变量名、方法名
- 包括：break、case、catch、continue、default、delete、do、if、else 、finally、for、while、function、in、instanceof、typeof、return、switch、throw、try、var、void、with等等
保留字
- 实际上就是预留的"关键字"，意思是现在虽然不是关键字，但是未来可能成为关键字，同样不能使用它们
- 包括：boolean、byte、char、class、const、debugger、double、export、extends、final、float、goto、implments、import、int、interface、long、native、package、private、protected、public、short、static、super、throws等等

上一篇：Linux系统详解以及基础命令

下一篇：风险评估：IIS的安全配置，IIS安全基线检查加固

javascipt学习笔记一

JavaScript基础day1

一、编程语言

1.编程

2.计算机语言

3.编程语言

4.翻译器

5.编程语言和标记语言的区别

二、计算机基础

1.计算机组成

2.数据存储

3.数据存储单位

4.程序运行

三、初入JavaScript

1.JavaScript是什么

2.JavaScript的作用

3.HTML/CSS和js的关系

4.浏览器执行js简介

5.js要学什么

6.1js初体验

6.1 js编写的位置

6.1.1 行内式

6.1.2 内嵌式

6.1.3 外部js文件

6.2 javaScript中的注释

6.2.1 单行注释

6.2.2 多行注释

6.2.3 修改快捷键

6.3 javaScript中输入输出语句

7.变量的概念

7.1.什么是变量

7.2.变量在内存中的存储

7.3.变量的使用

7.3.1 变量的声明

7.3.2 赋值

7.3.3 变量的初始化

7.4 变量语法扩展

7.5 变量名的命名规则

8.数据类型

8.1 数据类型简介

8.2 简答数据类型

8.3 获取变量数据类型

8.4 数据类型转换

9.解释型语言和编译型语言

9.1 概述

9.2 执行过程

10.关键字和保留字

标识符

相关内容

热门资讯