一、认识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>=== 全等 类型 相等 ，数据相等 !==不会进行隐式转换
-
逻辑运算符
-
&& 逻辑与
-
|| 逻辑或
-
！非运算（取反）
-
-
运算符的优先级
十一、 分支语句
-
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
网友评论