JavaScript

概念：一门客户端脚本语言
脚本语言：不需要编译，直接就可以被浏览器解析执行
功能：用来增强用户和HTML页面的交互过程，可以控制HTML元素，让页面有一些动态效果
输出到页面body语句document.write()

ECMAScript:客户端脚本语言的标准

1.基本语法：

1.与HTML的结合方式

1.内部js
定义在

2.注释

3.数据类型

1.原始数据类型（基本数据类型）
number:数字，整数小数 NAN(不是数据类型的数据类型)
string:字符串 JavaScript没有字符的概念
boolean：true false
null：一个对象为空的占位符
underfine:未定义。如果一个变量没有给初始化值 则默认赋值为underfine
2.引用数据类型：对象

4.变量

变量：一小块存储数据的内存空间
Java是强类型语言 JavaScript是弱类型语言
强类型：在开辟变量存储空间时 ，定义了空间将来存储数据的数据类型。只能存储固定类型的数据
弱类型：在开辟变量存储空间时 ，不定义空间将来存储数据的数,可以存放任意类型的数据 var 变量名 = 初始化值

5.运算符

1.一元运算符:只有一个运算符的运算符 + 是正 - 是负
2.算数运算符：
3.赋值运算符
4.比较运算符 全等=== 在比较之前先判断类型
比较方式
1.类型相同 直接比较 字符串逐位比较
2.类型不同 先类型转换再比较
5.逻辑运算符
其他类型转布尔类型
1.number:0为假 非0为真
2.string:除了空字符串 都是true
3.null&underfine 都是false
4.对象 所有对象都为true
6.三元运算符
7.流程控制语句
switch在Java中可以接收的数据类型switch(变量)：byte int shor char String 枚举 js中switch什么类型都可以接收

用var 定义的是局部变量
不用var的是全局变量
注：在JS中如果运算数不是运算符所要求的的类型，那么JS引擎自动将数据类型转换 按字面值转换 例如如果不是数字 也要转成number类型 NAN

2.基本对象

Function:函数对象 js中方法就是一个对象

1.创建
1.var fun new = Function(形式参数列表,方法体); 不重要
2.function 方法名称(形式参数列表){
方法体}
3.var 方法名 = function(形式参数列表){
方法体
}
2.方法
3.属性
length:形参的个数
4.特点
方法定义时 方法形参类型不用写
方法是一个对象 如果方法相同则会覆盖
在JS中方法调用只与方法名有关和参数列表无关
在方法声明中有一个隐藏的内置对象（数组）arguments，封装所有的内置参数
5.调用

Array数组对象
1.创建
1.var arr = new Array(元素列表);
2.var arr = new Array(默认长度);
3.var arr = [元素列表];
2.方法
oin():将数组中的元素按照指定的分隔符拼接为字符串
push():在尾部添加元素
3.属性
length:数组的长度
4.特点
1.JS中数组元素的类型时可变的
2.JS数组长度是可变的

日期对象
1.创建
var date = new Date();
2.方法
toLocaleString:返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒数，返回当前日期对象描述的时间和1970年一月一日零点的毫秒值差

Math:数学
1.创建
特点：Math类不用创建，直接使用，Math.方法名（）；
2.方法
random()返回0-1之间的随机数
ceil（）：对数进行上舍入
floor()对数进行下舍入
round():把数四舍五入为最近的整数
3.属性
PI 圆周率

1.正则表达式：定义字符串的组成规则
·1.单个字符[] \d：单个数字【0-9】\w:单个单词字符[a-z A-Z]
2.量词符号
?:出现0次或1次
：出现0次或多次
+：出现1次或多次
{m,n}:表示数量大于等于M小于等于N \w{6,12}长度六到12
缺省{,n}最多N次 {m,}最少M次
3.开始结束符号 ^ $
2.正则表达式对象：
1.创建
1.var reg = new RegExp(“正则表达式”);
2.var reg = /正则表达式/;
2.方法
test():验证指定的字符串是否符合各正则定义的规范
Global
1.特点：全局对象，不需要对象就可以直接调用
2.方法：
encodeURI() :url编码
decodeURI()：URL解码
encodeURIComponent():url编码
decodeURIComponent()：URL解码

parseInt():将字符串转为数字 逐一判断每一个字符是否是数字，直到不是数字为止，将前边的数字部分转为number

3.URL编码

BOM

概念：
浏览器对象模型（Browser Object Model）
组成：

1.有window对象:窗口对象

* 1.创建
* 2.方法
*与弹出框有关的方法

• alert 显示带有一段消息和一个确认按钮的警告 confirm()显示带有一段消息及确认按钮和取消按钮的对话框 确定返回true 取消false
  与打开关闭有关的方法
• open()打开一个新的窗口
• close()关闭窗口
• promot()显示可提示用户输入的对话框
  3.属性
  1.获取其他的Bom对象
  2.获取DOM对象
• 4.特点
• 不需要创建可以直接使用 window.方法名（）；
• window引用可以省略 方法名();
  定时器方法
• setTimeout():在指定毫秒数后调用函数或计算表达式
• clearTimeout():取消由setTimeout()方法设置的timeout
• 参数：JS代码 毫秒数值
• setInterval():按照指定的周期来调用函数或计算表达式1
• clearInterval():取消由取消由setTimeout()方法设置的timeout

1.创建
window.history
history
2.方法
1.back()加载history列表中的前一个URL
2.forward（）加载history列表中的下一个URL
3.go（）加载history列表中的某个具体页面
3.属性
length返回当前窗口历史李彪中的URL数量

1.创建（获取）
1.window.location
2.location
2.方法
reload() 重新加载当前文档 刷新
3.属性
href:设置或返回完整的URl

DOM

功能：控制HTML文档的内容
代码：获取页面标签（元素）对象 Element
document.getElementById(id);通过元素ID获取对象
操作对象：1.设置element对象
修改内容
2.修改标签体内容
属性INNerHTML
事件
事件：某些操作 单击双击
事件源：组件 即按钮 文本输入框
监听器：代码
注册监听：将事件事件源结合在一起

常见事件：

1.单击事件: onclick
2.双击事件：ondbclick
焦点事件：
1.获得焦点onfocus
2.失去焦点onblur
加载事件：
onload

鼠标被按下：onmousedown
鼠标被松开：onmouseup
鼠标被移动 :onmousemove
鼠标被移到某一元素:onmouseover
鼠标被从某一元素移开：onmouseout

onkeydown 某个按键被按下
onkeyup 被松开
onkeypress: 被按下并松开
选择和改变事件
onchange:域的内容被改变
onselect 文本被选中

onsubmit 确认按钮被点击
onreset 重置按钮被点击
功能：某些组件被执行了某些操作后执行的某些功能
如何绑定事件：
1.直接在和HTML标签上 指定事件属性 也就是JS代码
onclick:单击事件
2.通过JS获取元素对象，指定元素属性，设置一个值

DOM对象

概念：Document Object Model 文档对象模型 将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD操作

W3c DOM标准被分为三个不同的部分
核心DOM —针对任何结构化文档的标准模型

Document:文档对象 核心

1.创建（获取）：在HTML模型中可以使用window对象来获取
1.window.document
2.document
2.方法：
1.获取Element对象
getElementById()查找具有指定的唯一ID的元素 ID值一般唯一
getElementByTagName()：根据元=元素名称获取元素对象们，返回值是一个数组
getElementByClassName()：根据Class属性值获取元素对象们，返回值是一个数组
getElementByName()：根据name属性值获取元素对象们，返回值是一个数组
2.创建其他DOM对象
createAtribute(name)
3.属性

1.获取创建：通过document来获取和创建
2.方法：
RemoveAttribute():删除属性
setAttribute():设置属性
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象，其他五个的父1对象 核心
特点：所有DOM对象都可以被认为是一个节点
方法：
CRUD dom树
appendChild():向子节点列表的结尾添加新的子节点
removeChild():删除并返回当前子节点的指定子节点
属性：

1.标签体的设置和获取：innerHTML
2.使用HTML元素对象的属性
3.控制样式
1.使用元素的style属性来设置
//修改样式1
div1.style.border = “1px solid red”;
div1.style.width = “200px”;
div1.style.font = “20px”;
2.提前定义好类选择器的样式，通过元素的className属性来设置class属性值

这里写自定义目录标题

• JavaScript
• ECMAScript:客户端脚本语言的标准
• 1.基本语法：
• 1.与HTML的结合方式
• 2.注释
• 3.数据类型
• 4.变量
• 5.运算符
• 2.基本对象
• Function函数对象（方法）
• Array
• Date
• Math
• RegExp：正则表达式对象

• 1.有window对象:窗口对象
• * window窗口对象
• 2.Navigator：浏览器对象
• 3.Screen：显示器屏幕对象
• 4.History：历史记录对象
• 5.Location：地址栏对象

• DOcument对象

• 点击事件
• 鼠标事件：
• 键盘事件
• 表单事件

• Document:文档对象 核心
• Element：元素对象 核心
• XML DOM---针对XML文档的标准模型
• HTML DOM-针对HTML文档的标准模型
• HTML DOM

• 新的改变
• 功能快捷键
• 合理的创建标题，有助于目录的生成
• 如何改变文本的样式
• 插入链接与图片
• 如何插入一段漂亮的代码片
• 生成一个适合你的列表
• 创建一个表格
• 设定内容居中、居左、居右
• SmartyPants

• 导出
• 导入

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. 全新的界面设计 ，将会带来全新的写作体验；
2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
4. 全新的 KaTeX数学公式 语法；
5. 增加了支持甘特图的mermaid语法1 功能；
6. 增加了 多屏幕编辑 Markdown文章功能；
7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用

TOC

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的

代码片

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

• 项目 项目 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

设定内容居中、居左、居右

使用

:---------:

:----------

----------:

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

'Isn't this fun?'

"Isn't this fun?"

-- is en-dash, --- is em-dash

创建一个自定义列表

Markdown

Text-to-HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。2

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ(n)=(n−1)!∀n∈N\Gamma(n) = (n-1)!\quad\forall n\in\mathbb NΓ(n)=(n−1)!∀n∈N 是通过欧拉积分

Γ(z)=∫0∞tz−1e−tdt . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

1. mermaid语法说明 ↩︎

2. 注脚的解释 ↩︎

• 点赞
• 收藏
• 分享
• 文章举报