05_JavaScript

2022-01-14 本文已影响0人小虾米的时光机

一、认识JavaScript

1.JavaScript是由Netscape公司 (网景

)的Livescript发展而来，js是一种基于对象（object)和事件驱动的安全性脚本语言利用js可以完成：

响应事件：页面加载完成或者点击某天元素时，调用指定的js程序
读写HTML元素：JS可以读取及改变当前页面内的某个元素的内容
验证用户输入的数据
检测访问者的浏览器：根据所检测到的浏览器，为这个浏览器载入相应的页面
创建cookies:存储和取回位于访问者的计算机中的信息

JS的作用是给浏览器指令（命令），负责和浏览器进行沟通的
计算机语言的发展史：

阶段一：计算机语言 0101
阶段二：汇编语言，用符合来来代替0101（mov/add)
阶段三：高级语言，接近自然语言 c 、c++、 c# 、 java、 OC 、python、 go\ swift、 Dart、 JS 、TypeScript

二、 JavaScript的历史

诞生背景：1995网景公司 EIC和，Scheme发明了JavaScript
微软： Jsscript
1996年网景公司向ECMA（欧洲计算机制造商协会）提交了提案，ECMA指定这门语言为标准
1997年ECMA指定标准 ECMAScript
JavaScript 只是ECMA一种实现
JavaScript：Javascript + DOM + Bom

三、 JavaScript的特点

解释性语言
- 读取一行解释一行，执行一行
动态类型语言
- 在运行阶段可以动态修改变量类型的类型
js是一种脚本编写语言，采用小程序段的方式实现，开发过程简单
js是一种基于对象的语言，能运用已经创建的对象
js是一种基于Java基本语句的控制流之上的简单而紧凑的设计语言
js是动态的，可以直接对用户的输入作出响应，无需经过web服务程序
js是安全性语言
js具有跨平台性

四、JavaScript编写位置

内联行内 HTML元素中
script 标签里
外部引用 js

五、JavaScript注释使用

单行多行文档注释

*/带解释的注释

六、和浏览器交互

alert
Console.log
Document.write()
prompt

七、如何定义变量

常量变量

常量：不可改变
变量：由字母、数字、下划线组成，以字母开头，除此之外不能有空格和其他符号，不能使用关键字
变量的使用

<pre mdtype="fences" cid="n304" lang="html" spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<script>
// (1)交换方式一使用临时变量
// var a = 1;
// var b = 2;
// var temp = 0;

// temp = a;
// a = b;
// b = temp;
// console.log(a,b,temp)

// （2）交换方式2 只针对数字

var a = 1;
var b = 2;

// a = 3
a = a + b;
// b = 3-2 = 1
b = a - b;
// a = a - b = 3 - 1 = 2
a = a - b;
console.log("a="+a,"b="+b)

 </script>
</body>
</html></pre>

循环
- for
- Switch
- while
  
  Break 终止包含for、Switch、while,当遇到break语句的时候，会退出循环并执行下一条语句
  
  continue ：在循环体结构中提前结束本次循环周期并开始下一个循环周期，停止当前循环的迭代，从循环的开始处继续程序流程
JS中的事件
- onClick 点击事件
- onChange 表单相关利用 text 或者textarea输入的字符值改变发生的事件
- onSelect事件：当文本框内容被选中时发生的事件
- onFocus事件：当单击表单对象时
- onLoad事件：当加载网页文档时，会产生该事件。onLoad 事件的作用是在首次载入一个页面文件时检测cookie，并用一个变量为其赋值，使其可以被源代码使用
- onUnload 事件：退出网页
- onBlur事件：失去焦点正好和获取焦点对立，当text,textarea或者select对象不再拥有焦点而退到后台时；
- onMouseOver事件鼠标指针移动到某对象范围的上方时触发的事件
- onMouseOut 鼠标指针离开某对象范围时
- onDblClick 鼠标双击
- onmousedown 鼠标按下
- onmouseup 鼠标按下后松开
- Onmousemove 鼠标移动
- onKeypress 当键盘上某个键被按下并且释放时触发
- Onkeydown 键盘上某个按键按下
- Onkeyup 键盘某个按键被松开
- Onabort 图片在下载时被用户中断
- onmove 浏览器的窗口被移动时触发
- Onscroll 浏览器的滚动条位置发生变化
- Onstop 浏览器的停止按钮按下或者正在下载的文件被中断
- Onreset 当表单中的reset属性被激发
- Onsubmit 表单提交信息时
内部对象

浏览器内部对象，可以实现与HTML文档进行交互，主要包括：
- 浏览器对象（navigator) :浏览信息
- 文档对象（document):document对象包含了与文档元素一起工作的对象
  - anchorm锚对象：指 a标签中存在时产生的对象，办好文档中所有的anchor 信息
  - link链接对象：使用 a标签标记超链接一个超文本或者超媒体的元素作为一个特定的URL
  - form窗体对象：包含多种格式的对象存储信息，可以在js脚本中编写程序，并可以用来动态改变文档的行为
- 窗口对象（windows):提供处理浏览器窗口的方法和属性
- 位置对象（location):提供了当前打开的URL一起工作的方法和属性，是一个静态对象
- 历史对象（history)历史清单有关

八、基础数据类型

JS中常见的基本数据类型

数值型（Number）:
- NaN 不是数字类型
字符串型（String)
布尔型（Boolean)
空类型（Null) ： null 通常当一个对象（object类型）不再使用的时候，可以赋值为null

<pre mdtype="fences" cid="n333" lang="htm" spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;">var info = {"name"="aaa","age" = 18}
info = null </pre>
未定义类型（Undefined) : 未定义当一个变量进行了声明，但是没有赋值，这个时候她的值就是undefined

image.png

我们编写的代码在硬盘，打开代码后，加载到浏览器，放在内存中，如果是基本数据类型就是在栈空间申请空间，指针指向这段，如果是对象类型，则是在堆空间申请一块空间

num++ :先使用后自增+1

++num: 先自增+1，后使用

九、数据类型的转换

其他类型转换成数字类型

9.1 转成数字类型

Number(其他类型) 把其他类型转为数字类型
parseInt(string,radix) 字符串转化为 Number类型找到一个数字就解析一个数字并返回； radix 基数进制
parseFloat(string) 字符串转为 Number类型

JS数字类型：Number类型

9.2 转成字符串

toString（） num 和bool类型可以 . Unll 和undefined不可以
Sting（）所有类型
字符串拼接

9.3 转成布尔类型

使用Boolean()函数把其他类型转成布尔类型
- 转换成false 的5种特殊值： “” 空字符串、 0（包括0、-0）、 undefined 、 unll 、 NaN;
- 除啦上五种，其他为true

十、JavaScript操作符

算数运算符：
- /
- %
- ++
  - 前置和后置 ++a 先自增+1 后使用， a++ 先使用后自增+1
- --
  - 前置和后置
赋值运算符：
- =
- +=
- -=
- *=
- /=
- %=
比较运算符：
- <
- =
- <=
- == 会隐式转换
- !=
- === 全等不会隐式转换
- !== 全不等
== != 判断会有隐式转换

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n559" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> var a = true;
var b = "true";
// 隐式转换：都转换成number再比较
// a -> 1
// b -> NaN
console.log(a == b); //false</pre>

=== 全等类型相等，数据相等 !==不会进行隐式转换
1. 逻辑运算符
  - && 逻辑与
  - || 逻辑或
  - ！非运算（取反）
2. 运算符的优先级

十一、分支语句

if
if else
If else if else
switch case break (穿透)

十二、循环

while
do while
for

十三、 DOM 节点

D（document 文档） O(obgect 对象) M(Model 模型)

常用的DOM方法：

getElementById
getElementByTagName
getElementsByClassName
Get-Attribute 和setAttribute

05_JavaScript

一、认识JavaScript

二、 JavaScript的历史

三、 JavaScript的特点

四、JavaScript编写位置

五、JavaScript注释使用

六、和浏览器交互

七、如何定义变量

八、基础数据类型

九、数据类型的转换

9.1 转成数字类型

9.2 转成字符串

9.3 转成布尔类型

十、JavaScript操作符

十一、分支语句

十二、循环

十三、 DOM 节点

猜你喜欢

热点阅读

05_JavaScript

一、认识JavaScript

二、 JavaScript的历史

三、 JavaScript的特点

四、JavaScript编写位置

五、JavaScript注释使用

六、 和浏览器交互

七 、如何定义变量

八、基础数据类型

九、数据类型的转换

9.1 转成数字类型

9.2 转成字符串

9.3 转成布尔类型

十 、JavaScript操作符

十一、 分支语句

十二、 循环

十三、 DOM 节点

猜你喜欢

热点阅读

六、和浏览器交互

七、如何定义变量

十、JavaScript操作符

十一、分支语句

十二、循环