一.什么是语言
（1）语言的发展
计算机语言指用于人与计算机之间的语言，它是人与计算机之间传递信息的媒介。实际上计算机最终执行的语言都是二进制语言，二进制是计算机语言的基础。
（2）计算机语言的三大类
机械语言
汇编语言：实质与机器语言相同。只不过采用英文缩写，容易识别与记忆。
高级语言：C语言；Java；C#等
翻译器：高级语言编程并不能被计算机识别，通过翻译器将源代码转化为机器语言，二进制化后才可执行。汇编语言也一样。
编程语言与标记语言的区别：标记语言不能向计算机发出指令，常用于格式化和链接。通常用来读取和展示的功能；编程语言有很强的逻辑与行动能力。
二.JavaScript
（1）JavaScript
它是一种脚本语言。是一种轻量级的编程语言。可插入HTML的编码。可由所有浏览器执行。
（2）作用
1.表单动态校验（密码强度的检测）【JS产生最初的目的】
2.网页特效
3.服务端开发，桌面程序，App，控制硬件+物联网，游戏开发。
（3）JS的使用
1.添加形式
行内式：<input type="button" value="点击" οnclick="alert('hello')">较少时可以适用，若要加入大量时不方便阅读。
内嵌式：<script>alert('Hello World')</script>可以将多行代码写入，比较常用。
外部式：<script src=""></script>引用外部的JS文件，适用于JS代码量较大时候。
2.注释
单行注释：//
多行注释：/*。。。*/、
3.JS变量
变量是存放数据的容器。我们通过变量名获取数据，或是修改数据。
本质上：变量是程序在内存中申请的一块用来存放数据的空间。
声明变量时一般用：声明变量；赋值
命名方式：必须用字母开头，不能用数字；可以用$或者_下划线来声明；对大小写敏感。
变量的使用一：var name = "";var age = "";console.log(name);声明变量之后，用控制台的日志文件展现出变量的值。
使用方法二：<script type="text/javascript">var name = prompt("") alert(name);</script>弹出一个输入框，输入内容，弹出一个对话框，展示刚才输入的内容。
变量的语法拓展：更新变量，一个变量在被多次赋值后，变量值取最后一次为准；同时声明多个变量，只需写一个var，其余用逗号隔开 var name="",age="",....；变量命名规范
4.JS数据类型
简单的数据类型
| 简单的数据类型 | 说明 | 默认值 |
| Number | 数字型，包含整型和浮点型 | 0 |
| Boolean | 布尔型，如true,false,1,0 | false |
| String | 字符串类型 | "" |
| Undefined | 声明了变量但没赋值此时a=undefined | undefined |
| Null | var a=null ,声明变量a空值 | null |
isNaN()：判断一个数据是否是数字型；是返回false，不是返回ture。
字符串类型必须含有双引号或者单引号。
typeof()：判断一个数据是什么数据类型
5.转换数据类型
转换字符串
| 方式 | 说明 | 案例 |
| toString() | 转换为字符串 | var num=1;alert(num.toString()); |
| String()强制转换 | 转换字符串 | var num=1;alert(String(num)); |
| 加号拼接字符串 | 和字符串拼接的都是字符串 | var num=1;alert(num+"我是字符串") |
转换数字型
| 方式 | 说明 | 案例 |
| parseInt(string)函数 | 将string型转为整数数值型 | parseInt("78") |
| parseFloat(string)函数 | 将string型转为浮点型 | parseFloat("78.21") |
| Number()强制转换函数 | 将string类强制转换为整型 | Number("12") |
| js隐式转换(- * /) | 利用算术运算隐式转换为数值型 | '12'-0 |
转为布尔型
| 方式 | 说明 | 案例 |
| Boolearn()函数 | 其他类型转为布尔类型 | Boolearn('true'); |
6.JS运算符
算术运算符
| 运算符 | 描述 | 案例 |
| + | 加 | 10+20 |
| - | 减 | 10-20 |
| * | 乘 | 10*20 |
| / | 除 | 10/20 |
| % | 取余 | 10%20 |
比较运算符 返回结果为布尔类型
| 运算符名称 | 说明 | 案例 | 返回结果 |
| < | 小于 | 1<2 | ture |
| <= | 小于等于 | 1<=2 | ture |
| > | 大于 | 1>2 | false |
| >= | 大于等于 | 1>=2 | false |
| == | 判断号 | 1==2 | false |
| != | 不等号 | 1!=2 | true |
| === !== | 全等 数据类型一样 | 1==="1" | false |
赋值运算符
| 赋值运算符 | 说明 | 案例 |
| = | 直接赋值 | var a=1 |
| +=，-= | 加减 | var a=1;a+=1 |
| *=，/=，%= | 乘除取余 | var a=4;a*=4 |
逻辑运算符
| 逻辑运算符 | 说明 | 案例 |
| && | 逻辑与 | 都为真为真，否则为假 |
| || | 逻辑或 | 都为假为假，否则为真 |
| ！ | 取反 | 取反 |
递增和递减运算符
++num:先加后用；num++:先用后加
--num:先减后用；num--先用后减
7.JS的流程控制
（1）顺序结构
if语句
if(条件表达式){执行内容};
if else语句
if(条件表达式){执行内容}else{执行内容}
两条分支，当为真时执行结果一；为假时执行结果二；
if else if语句
多条分支，设立多种条件取进行选择执行的命令；
Switch语句
按照结果取执行
（2）循环结构
For循环
for(var i=0;i<...'i++){循环体}
一般情况下是循环条件加循环体不断执行，直到循环条件不符合之后退出循环；其中也可以执行for循环中再嵌套for循环。
while循环
先判断条件在执行循环
do-while循环
先执行一次循环，再去判断条件
continue/break
continue结束本次循环进入下次循环；break直接退出循环体。
8.JS的数组与函数
（1）数组
数组的创建形式可以是var arr=[]或者用new取创建
数组中的数据类型可以是数值型，布尔型，字符串
（2）函数
内置函数
JS中本就存在并且可以直接使用的函数，例如toFixed()等等
调用函数
使用function去自定义一个函数与函数的功能，随后只需要输入函数名与实参就可以调用
三.DOM
1.DOM的介绍
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
2.如何查找HTML
（1）通过标签内定义的id来查找
用document.getElementById("id号")；想要验证其是否有效：
想要获取HTML页面中元素的内容时，用innerHTML可以获取，但不能重复使用。
（2）通过标签内定义的类来查找
用document.getElementsByClassName("类名")；
（3）通过标签来查找
用document.getElementsByTagName("标签名");
在用标签名或者类名查找时需要使用索引。
*innerHTML的属性*
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。
3.改变HTML元素
| 方法 | 描述 |
| element.innerHTML = new html content | 改变元素的inner HTML |
| element.attribute = new value | 改变HTML元素的属性值 |
| element.setAttribute(attribute,value) | 改变HTML元素的属性值 |
| element.style.property = new style | 改变HTML元素的样式 |
4.DOM事件
HTML DOM允许JS对HTML事件做出反应：比如当用户点击某个HTML页面的元素时，会发生指定的操作。
（1）事件处理程序调用函数
this代表着标签本身。
（2）HTML事件属性
*向HTML元素中分配事件*
<p>点击下面按钮</p>
<button οnclick="display()">时间是？</button>
<span id="cs"><span>
<script>
function display(){
document.getElementById("cs").innerHTML=Date();
}
</script>
（3）onchange事件
*向输入标签中添加事件*
<input type="text" id="upper" name="fname" οnchange="cs()">
<script>
function cs(){
var x=document.getElementById("upper");
x.value=x.value.toUpperCase();
}
</script>
（4）onmouseover,onmouseout事件
*在元素中加入鼠标移动或移除时的操作*
<div id="cs" οnmοuseοver="over()" οnmοuseοut="out()">请将鼠标移动至此</div>
<script>
function over(){
document.getElementById("cs").innerHTML="成功移动";
}
function out(){
document.getElementById("cs").innerHTML="移出";
}
</script>
（5）onmousedown,onmouseup事件
*向元素中添加onmouseup/down事件*
<div id="cs" οnmοusedοwn="down()" οnmοuseup="up()">请点击这里</div>
<script>
function down(){
document.getElementById("cs").innerHTML="成功点击";
}
function up(){
document.getElementById("cs").innerHTML="松开";
}
</script>
5.DOM事件监听器
事件监听器的语法结构：变量名/元素.addEventListener("事件名""调用的函数""布尔值"。
addEventListener() ⽅法为指定元素指定事件处理程序。
您能够向⼀个元素添加多个事件处理程序。您能够向⼀个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。
（1）addEventListener()
*向元素添加事件处理程序*
添加监听器时TypeError: Cannot read properties of null (reading 'addEventListener')是什么错误：这个错误通常是由于JavaScript代码尝试在DOM元素加载之前执行操作造成的。具体来说，当你尝试在文档还没有完全加载或者某个元素尚未被正确获取时，就会导致类似的错误。
（2）removeEventListener()
会删除附加的事件处理程序
（3）事件拓展
contextmenu主要控制应该何时显⽰上下⽂菜单，主要⽤于程序员取消默认的上下⽂菜单
selectstart 主要控制选中内容
四.JS
1.HTML事件
HTML事件可以是浏览器或用户做的一些事件。下面是一些HTML事件的例子：HTML网页完成加载；HTML输入字段被修改；HTML按钮被点击。
常见的HTML事件
| 事件 | 描述 |
| onchange | HTML元素已被改变 |
| onclick | 用户点击了HTML元素 |
| onmouseover | 用户鼠标移动到了HTML元素上 |
| onmouseout | 用户把鼠标移开了HTML元素上 |
| onkeydown | 用户按下了键盘按键 |
| onload | 浏览器已完成页面加载 |
2.event事件
| 事件 | 描述 |
| onblur | 元素失去焦点 |
| onclick | 当用户点击某个 |
| ondbclick | 当用户双击某个对象时调用的事件句柄 |
| onerror | 在加载文档或图像时发生错误 |
| onfocus | 元素获得焦点 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标移动 |
| onmouseout | 鼠标从某元素被移开 |
| onmouseover | 鼠标移动到某元素上 |
| onmouseup | 鼠标按键被松开 |
| onreset | 重置按钮被点击 |
3.JS BOM
BOM 浏览器对象模型
它可以控制我们浏览器的前进后退，以及新建tab，以及网页之间的跳转
window.location.href //返回当前页面的 href (URL)
window.location.hostname //返回 web 主机的域名
window.location.pathname //返回当前页面的路径或文件
window.location.protocol //返回使用的 web 协议（http: 或 https:）
window.location.assign //加载新文档
扫一扫
1298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
