目录
2 HTML、CSS、JavaScript是什么及其之间的比较：
2 switch和 if ... else if ... 的区别：
20210801-20210811
一 计算机相关知识
1 编程/编程语言：
编程：为解决某个问题用某种程序设计语言编写的代码，并最终得到的结果。
编程语言：用来控制计算机的一系列指令，必须遵守相应的固定格式和词汇。
分为：
1 汇编语言：直接对硬件操作，指令采用英文缩写标识符。
2 高级语言：即编程语言。
2 编程语言/标记语言特点：
编程语言：具有很强的逻辑和行为能力。
标记语言：不用于向计算机发出指令，常用于格式化和链接，是用来被读取的。
3 计算机程序/计算机：
计算机程序：计算机所执行一系列的代码集合。
计算机：指任何能执行代码的设备。3 编程语言：
二 JS基础
1 什么是JavaScript？
用于开发交互式的web页面，内嵌于HTML网页中，是一种运行在客户端的脚本语言。
2 HTML、CSS、JavaScript是什么及其之间的比较：
分别代表了结构（网页的骨架）、样式（网页的外观）、行为（网页的交互逻辑）。
三者间的比较：
HTML 结构 从语义的角度，描述页面结构
CSS 样式 从审美的角度，美化页面
JavaScript 行为 从交互的角度，提升用户体验
3 js特点：
1 是脚本语言( 脚本即是一条条文本命令，按照程序流程执行）。
1.1 脚本语言和非脚本语言的特点：
非脚本语言：需要经过编译-->链接-->运行，生成可独立的可执行文件后才能运行。
脚本语言概念：依赖于解释器（js引擎）逐行来进行解释并执行，只在被调用时自动进行解释或编译。
脚本语言特点：1 简单 2 易学 3 易用 4 语法规则灵活 5 执行效率慢。
2 可跨平台（因为此语言不依赖操作系统，仅需浏览器的支持，且几乎所有浏览器都支持此语言）。
3 支持面向对象。
4 js作用：
1 表单动态校验（密码强度检测）
2 网页特效
3 服务端 / 游戏 开发
4 桌面程序
5 App
6 控制硬件-物联网
5 开发工具
开发工具主要包括浏览器（用于执行，调试代码）和代码编辑器（用于编写代码）两种软件。
注意：浏览器本身不执行js代码，是通过内置的js引擎（解释器）来逐行解释执行代码。
1 浏览器内核（浏览器分类依据）：
1 排版引擎/渲染引擎： 解析，处理取得的网页内容（如Html，css等），再显示到屏幕中。（其中Gecko,火狐浏览器使用的引擎，源代码完全公开。）
2 JavaScript引擎/解释器 ：解析网页中的Js代码，处理后运行来实现网页的交互效果。
2 代码编辑器之间比较：
1 Notepad++：免费开源，小巧。
2 Sublime Text：轻量级的代码编辑器，跨平台，插件机制可扩展强，具有良好的用户界面，支持检查，书签，自定义按键绑定等功能。
3 NetBeans
4 HBuiler：具有较全的语法库和浏览器兼容数据
5 Dreamweaver：所见即所得的网页编辑器，但可视化编辑功能会产生大量冗余代码，不适合开发结构复杂，需要大量动态交互的网页。
6 WebStorm：JavaScript，HTML5是强项。
6 js语法规则/命名规范：
语法规则：
1 严格区分大小写。
2 对空格，换行，缩进不敏感。
3 每条语句结束后 " ；"可以省略，但为了良好的代码风格不能省略。
命名规范：
1 字母，数字，下划线，$组成，不以数字开头。
2 区分大小写。
3 不用关键字，保留字，且见名知意。（尽量不用name作为变量名）
4 驼峰命名。
7 js三种引入方式：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
<!--
内嵌式，可存放多行代码, 比较常用。
-->
</script>
<script src="<!--外部js文件名-->"></script>
<!--外链式
1 利于代码结构优化，美观，复用性高。
2 外链式script的标签中间可不写代码。
3 适用于大量代码的情况。-->
</head>
<body>
<input type="button" value="点我" onclick="alert('点到了')">
<!--行内式
1 直接写到元素内部，注意引号的使用，常html 为双引号，js为单引号。
2 可读性差。-->
</body>
8 js组成：
ECMAScript( js语法)
DOM（页面文档对象模型）：可扩展标记语言的标准编程接口。
BOM（浏览器对象模型）：提供了独立于内容，可于浏览器窗口进行互动的对象结构，可操作浏览器窗口。
三 JS基本语法
1 js常用输出语句
<script>
prompt("浏览器弹出输入框");
alert("浏览器弹出警示框");
console.log("浏览器控制台打印信息 F12可查看")
</script>2 赋值：
// 同时声明多个变量
/*声明变量时的三种情况：
* 声明不赋值 未定义
* 不声明不赋值 报错
* 赋值不声明 为所赋值的类型*/
var myage=1,
myname="tom";
alert('我今年'+myage+'岁，我的名字是'+myname);3 数据类型：
变量的值决定它的类型。
相同的变量可做不同的数据类型。
主要分为：
1 简单数据类型：
2 复杂数据类型：Object
数字型中进制：八进制 0+（0-7的数字），十六进制 0x+(0-9 /a-f 其中的数字 / 字母 ),
4 运算符
/ ：除号。
计算浮点数时可能会出现精度不准确，并且不能直接拿浮点数判断相等。
5 前置/后置 递增/递减
（两者若单独使用，效果一样。两者只能搭配变量使用。）
前置/后置的区别：
var num1 = 10;
var num2 = num1++ + ++num1;
/*num1++ =10 num1=11 后置：先返回原值，再加
* ++num1=12 前置：先加，再返回加后的值*/
console.log(num2);//22
var a = 2;
a++;// a++=3 a=3
var b = a++ + 2;//5
console.log(b);特点：
1 简洁。
2 单独使用时效果相同，其他情况结果会不同。
3 大多使用后置，并单独占一行。
6 = / == / ===
全等：判断类型，值两者是否相同。
双等：判断值是否相同。运用时会默认转换数据类型，把字符串的数据类型转为数字型，只要求值相等就可以。
单等：把右边的值赋给左边。
7 逻辑与/逻辑或
逻辑与：同true才true，一个为false就为false。
逻辑或：同false才false，一个为true就为true。
短路运算：
逻辑与的短路运算：
表达式1为真，返回表达式2，为假返回表达式1；多个表达式存在时，第一个表达式能计算结果则不用继续右边表达式的值。
逻辑或的逻辑中断：
表达式1为真，返回表达式1，否则返回表达式2。
8 运算符的优先级
9 变量
变量：内存中存放数据的一块空间。
全局变量：在全局作用域下声明的变量（在函数外部定义的变量）。特殊情况下，在函数内部var声明的变量也是全局变量。
局部变量：在局部作用域下声明的变量（在函数内部定义的变量）。函数的形参相当于局部变量。
两者区别：
全局变量：在任意一个地方都可使用，在浏览器关闭时销毁。
局部变量：当所在代码被执行时，初始化变量，运行结束时，变量销毁。
四 循环
1 switch语句
适用于针对变量要设置一系列的特定值的选项并对应执行不同的代码。
注意：变量和case 里的值是全等关系，类型和值都要相等才能执行。
当前的case里没break会穿透到下一个case中。
2 switch和 if ... else if ... 的区别：
前者：适用于值比较确定的情况，
进行条件判断后直接执行到对应语句。
分支多时，效率高，结构清晰。
后者：适用于值在某个范围内，
进行条件判断要依次判断才能执行到对应的语句。
分支少时。效率高。
3 for循环实现正反星阵
<head>
<meta charset="UTF-8">
<title>正反星阵</title>
<script>
var mynum = prompt('请输入控制星星的行数');
var str='';//在循环里面定义类型会异常
for (var i = 1; i <= parseInt(mynum); i++) {//控制行数
//for (var j = i; j <=parseInt(mynum); j++) {//倒三角
for (var j = 1; j <= i; j++) {//正三角
str=str + '*';
}
str = str + '\n';
}
console.log(str);
</script>
</head>五 数组
数组中可存放任意类型的元素，将一组数据存储在一个变量名下。
数组的长度是元素个数，和索引号不同（从0开始）。
<head>
<meta charset="UTF-8">
<title>过滤数组并添加到新数组</title>
<script>
/*
* 创建数组的两种方式
* 1 利用数组字面量
* 2 利用new Array()*/
var shuzu1 = [2, 11, 3, 15, 23];//1
var shuzu2 = new Array();//2 创建空数组
// var shuzu3 = new Array(2);// 表示数组长度为2，里面有两个元素
// var shuzu4 = new Array(2, 3);//等于[2,3]，里面有2，3两个元素
for (var i = 0; i <= shuzu1.length; i++) {
if (shuzu1[i] > 10) {
shuzu2.push(shuzu1[i]);
}
}
console.log(shuzu2 + '\n判断是否为一个数组方法：' + Array.isArray(shuzu2));//h5新增，ie以上版本支持
shuzu1.pop();//推出最后一个
console.log(shuzu1.reverse());//反转
/*
* .push()追加新元素，可直接写入元素，返回新的长度
* .unshift()在数组开头追加一个或多个新元素，可直接写入元素，返回新的长度
* .pop()删除最后一个元素，不写入参数，一次只能删除一个，返回删除的元素
* .shift()删除数组第一个元素，不写入参数，一次只能删除一个，返回删除的元素
* */
</script>
</head><head>
<meta charset="UTF-8">
<title>数组查重</title>
<script>
var shuzu1 = [1, 1, 2, 2, 3, 4, 5];
var shuzu2 = [];
for (var i = 0; i < shuzu1.length; i++) {
if (shuzu2.indexOf(shuzu1[i]) === -1) {
shuzu2.push(shuzu1[i]);
}
}
console.log(shuzu2);
console.log(shuzu1.concat(shuzu2));//连接多个数组
var shuzu3 = [1, 2, 3, 4];
//console.log(shuzu3.slice(1, 3));//数组截取 首 尾下标,不包括首尾元素
console.log(shuzu3.splice(1, 2));//数组切片 从第几个下标开（包括开始位置的元素）始截取几个
</script>
</head>
/*
var shuzu1 = [1, 2, 3,1, 4];
console.log(shuzu1.indexOf(1));//从前查找首个该元素下标，找不到返回-1
console.log(shuzu1.lastIndexOf(1));//从后查找首个该元素下标，找不到返回-1
*/输出下标越界的数组元素 返回undefind
六 函数
1 实参与形参不匹配问题：
多于：只取形参规定个数的实参。
小于：多出来的实参位数定义为undefined，结果为NaN。
2 函数都有返回值：
有return 返回return后的值。
没return返回undefined。
3 函数的两种声明方式：
1 命名函数：
function 函数名（）{
... ;
}
2 函数表达式（匿名函数）：
var 变量名=function(){
... ;
}
4 作用域
全局/局部作用域。
块级作用域：在{ }内部。
作用域链：内部可以逐级访问外部（就近原则）。
5 js引擎的解析
预解析：
把里面所有的var ,function （变量声明，函数声明）提升到作用域的最前面，不提升赋值操作，函数调用。
代码执行：
预解析的代码依次执行。
其中函数表达式的调用必须写在声明的下面，因为预解析时提升的是函数表达式的变量名，不是方法名（因为其匿名函数）。
<head>
<meta charset="UTF-8">
<title>预解析</title>
<script>
var num1 = 10;
fun1();
function fun1() {
var a = b = c = 1;
console.log(num1, a, b, c);//undefined 1 1 1
var num1 = 20;
}
console.log(num1, a, b, c); //10 a报错 1 1
/*
* var num1=10;
* function fun1() { //只提升函数声明，不提升函数调用。
* var num1; //1 只提升声明，不提升赋值。2 在一个文件中，允许全局变量与局部变量同名。
* var a=1; //var a = b = c = 1;不是多变量赋值，相当于此行与下一行代码。
* b=c=1; //函数内部没有定义的变量是全局变量
* console.log(num1,a,b,c);
* num = 20;
}
* fun1();
* console.log(num1,a,b,c);
*/
</script>
</head>七 对象
1 创建对象两种的方式
2 遍历对象
3 使用对象
<head>
<meta charset="UTF-8">
<title>创建对象的两种方式</title>
<script>
/* 1 利用对象字面量创建对象
对象内属性---键值对形式，多个属性之间，隔开。
对象内方法---匿名函数形式。*/
var object1 = {
sex: '男',
age: 10,
eat: function () {
console.log('eating...');
}
}
/*2 利用Object创建对象
var 对象名=new Object();//创建了一个空对象
对象名.属性1= ...;//此种方式创建多个属性;隔开。
对象名.方法2=function(){
...;
}*/
var object2 = new Object();
object2.sex = '女';
object2.age = 10;
object2.drink = function () {
console.log('drinking...');
}
/*遍历对象*/
for (i in object1) {//?可以遍历多个对象 不能
console.log(i + ':' + object1[i]);
}
/*使用对象
对象名.方法名()/属性名；
对象名['属性名'];*/
console.log(object1.sex, object2.sex);
</script>
</head>4 构造函数
<head>
<meta charset="UTF-8">
<title>构造函数</title>
<script>
function Computer(color, weight) {//？只有属性名没有方法名吗
/*
* 构造函数----相当于类。(构造函数名首字母大写，不需要return返回结果。)*/
this.color = color;
this.weight = weight;
this.listen = function () {
console.log('listen...');
}
}
var myComputer = new Computer('红', '1kg');// 使用构造函数创建对象的过程称为对象的实例化。
for (var i in myComputer) {
console.log(i);
console.log(myComputer[i]);
}
</script>
</head>5 内置对象：
js语言自带的对象。
6 new关键字执行流程
1 开辟一个新的空对象
2 this指向新对象
3 执行构造函数里的代码并给新对象添加属性和方法
4 返回新对象
7 Math对象
<head>
<meta charset="UTF-8">
<title>Math函数</title>
<script>
/*1 绝对值方法 遇到字符串会隐式转换。
* 2 能识别非数字数据，并返回NaN。*/
console.log(Math.abs('-1'), Math.abs('Tom'));
/*四舍五入方法 遇到？.5形式数字往大取*/
console.log(Math.round(-1, 5));//-1
/*随机数方法
1 random() 返回一个随机小数 0<=x<1
以下为取两数之间,并包含两数的随机数公式*/
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//利用此公式实现随机点名
var arr = ['tom', 'lucy', 'kim'];
console.log(arr[getRandom(0, arr.length - 1)]);
</script>
</head>20210812-20210822
七 对象
8 Date()
<head>
<meta charset="UTF-8">
<title>日期格式化</title>
<script>
var nowtime = new Date();
var year = nowtime.getFullYear();
var mon = nowtime.getMonth() + 1;//月份+1
var day1 = nowtime.getDate();
var nowday = nowtime.getDay();
var hour = nowtime.getHours();
var min = nowtime.getMinutes();
var sec = nowtime.getSeconds();
function GetFormatTime() {
var days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];//转换周几格式
day = days[nowday];//转换周几格式
hour = hour < 10 ? '0' + hour : hour;
min = min < 10 ? '0' + min : min;
sec = sec < 10 ? '0' + sec : sec;
return year + '年' + mon + '月' + day1 + '日 ' + hour + ':' + min + ':' + sec + day;
}
function Getinterval() {
/*
* 获取时间间隔，毫秒单位
* nowtime.valueOf()//距离1970年1月1号的毫秒数 或者.getTime()
* var time1=+new Date();//距离1970年1月1号的毫秒数
* Date.now();//h5新增，距离1970年1月1号的毫秒数*/
var interval = new Date('2021/08/13') - new Date('2021-08-12');//实例化时间的两种方式
var day = parseInt(interval / 1000 / 60 / 60 / 24);//天数 1000*60=一分钟*60 =一小时*24=一天
var hour = parseInt(day / 24);//小时
var min = parseInt(day % 24);//分钟
var sec = parseInt(min % 60);//秒
return '其间隔' + day + '天' + hour + '时' + min + '分' + sec + '秒';
}
alert(GetFormatTime());
alert(Getinterval());
</script>
</head>9 Random()
<head>
<meta charset="UTF-8">
<title>猜数字</title>
<script>
var truenum = parseInt(Math.random() * (10 - 1 + 1) + 1);
var i = 4;
while (i >=0) {
var num1 = prompt('输入你猜的数字');
if (num1 > truenum) {
alert('猜大了,您还有'+i--+'次机会');
} else if (num1 < truenum) {
alert('猜小了,您还有'+i--+'次机会');
} else if (num1==truenum) {
alert('还有'+i--+'次机会，但您猜对辣');
break;
}
}
</script>
</head>10 字符串对象
八 Dom
Web API: 浏览器提供的一套操作浏览器功能和页面元素的API。（BOM和DOM）
针对浏览器提供的接口，针对于浏览器做交互效果。
一般有函数的传参和返回值。
1 DOM
定义：文档对象模型，处理可扩展标记语言的标准编程接口，可以改变网页的内容，结构，样式。
1.1 Dom树
2 获取元素
1 根据id
getElementById()
2 根据标签名 getElementsByTagName() 可获得相同标签名的对象集合
3 特殊元素获取
4 通过h5新增方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="time">2021</div>
<ul>
<li>一</li>
<li>二</li>
</ul>
<ol>
<li>三</li>
<li>四</li>
</ol>
<button class="button"> 按钮</button>
</body>
</html>
/*获取标签时，js要写在标签下面*/
<script>
//1 根据id获取 .getElementById(id)
var timer = document.getElementById('time');//id要为字符串，区分大小写
console.log(timer);//对象形
console.dir(timer);//打印对象元素，可查看里面的属性和方法
//2 根据标签名获取 2.1获取所有指定标签名
var lis = document.getElementsByTagName('li');//返回结果是伪数组形式,即便没有元素
console.log(lis, lis[0]);
//2 根据标签名获取 2.2--1获取多个不同父标签同子标签情况内的某一指定子标签,父标签必须是指定的单个元素
var uls = document.getElementsByTagName('ul');
console.log(uls[0].getElementsByTagName('li'));
//2 根据标签名获取 2.2---2获取多个不同父标签同子标签情况内的某一指定子标签
/*但此种情况要指明父标签id
var uls=document.getElementById('父标签id');
console.log(ols.getElementsByTagName('li'));*/
//3 特殊元素获取
var body1 = document.body;//获取body
var html1 = document.documentElement;//获取html,注意两者不同
//4 根据类名
var button1 = document.getElementsByClassName('button');
//返回指定选择器的第一个元素 不加或加. 或 #
var firstBox = document.querySelector('li');
var alllis = document.querySelectorAll('li');
console.log(button1, firstBox, alllis);
</script>3 事件基础
事件：出发相应的一种机制。由事件源（事件被触发的对象 ），事件类型（如何出发事件），事件处理程序（通过一个函数赋值的方式完成）三要素组成。
1 执行事件的步骤
1 获取事件源
2 注册事件（绑定事件）
3 添加事件处理程序(采取函数赋值的形式)
4 操作元素
1 修改元素内容 步骤见事件基础
2 修改元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对应时间段可对应问好</title>
<style>
img {
height: 100px;
}
</style>
</head>
<body>
<div>问好</div>
<img src="morning.png" title="早上好">
</body>
</html>
<script>
//1 获取元素
var wenhao = document.querySelector('div');
var img = document.querySelector('img');
//2 获取当前时间
var nowtime = new Date();
var hour = nowtime.getHours();
//2.2规范输出时间
function GetFormatTime() {
var nowtime = new Date();
var year = nowtime.getFullYear();
var mon = nowtime.getMonth() + 1;//月份+1
var day1 = nowtime.getDate();
var nowday = nowtime.getDay();
var hour = nowtime.getHours();
var min = nowtime.getMinutes();
var sec = nowtime.getSeconds();
var days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];//转换周几格式
day = days[nowday];//转换周几格式
hour = hour < 10 ? '0' + hour : hour;
min = min < 10 ? '0' + min : min;
sec = sec < 10 ? '0' + sec : sec;
return year + '年' + mon + '月' + day1 + '日 ' + hour + ':' + min + ':' + sec + day;
}
//判断时间
if (hour < 12) {
img.src = 'morning.png';//修改元素属性
img.title = '早上好';
wenhao.innerHTML = GetFormatTime();//不绑定事件刷新网页即可进行操作
} else if (hour < 18) {
img.src = 'afternoon.png';
img.title = '下午好';
wenhao.innerHTML = GetFormatTime();
} else {
img.src = 'night.png';
img.title = '晚上好';
wenhao.innerHTML = GetFormatTime();
}
</script>
其他：
1 在编码格式中，BOM是指字节数序标记，会在文件头部占用3个字节，用来标识文件的编码格式（Html网页不需要标识编码）。
2 js常放在头标签/体标签中。
3 return num1,nun2 ;时只能返回最后一个值。
4 在一个文件中 全局作用域允许和局部作用域同名。
5 查文档 MDN / W3C 。
6 Math函数不是构造函数。
疑问：
1 node.js 2 ES6 3 轻量级 4 HTML修改文件编码 5 (java)深浅克隆
259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
