2022-08-24 第二组刘禹彤 学习笔记
打卡39天
###学习内容
JavaScript
脚本语言，解释型，主要用来给HTML网页增加动态功能，通常的JS是运行在浏览器环境下的
JS的两种模型
DOM
文档对象模型（document）
BOM
浏览器对象模型（window）
- nodejs运行在计算机环境下，服务器技术，不能操作BOM和DOM，但是他可以操作文件，能操作数据库，实际上是一门后端技术
JS解释器
- 火狐：spidermonkey
- Chrom：v8
- node：v8
- safari：JavaScriptCore
script
- 向body打印输出，建议放在body结尾上方-------页面的加载顺序是从上而下的，JS是用来控制页面的显示方式，需要等页面加载完成，再执行JS
- ECMAScript ES-------一套规范
JavaScript JS-------具体的实现
ES6 ES5 ES7------------语法
JS基本上是web前端的核心------JS使用，JS底层，JS解析过程，JS优化
数据类型
自动类型推断（弱类型）
- 数字（number）：整数，小数，正数，负数
- 字符串（string）：a，中文，@
- 布尔型（boolean）：true（1），false（0）
强类型
- 空（hull）：相当于声明了值为空
- undefined：未定义，没有声明过，没有值
- NaN：非数字
- 数组
- 对象
变量的声明
var v1 = 10;
var v2 = 1.5;
var v3 = "你好";
var v4 = '我好';
var v5 = true;
var v6 = null;
// document.write(v7);
ES6声明变量语法
新的声明变量的关键字
- let-------不能够重复定义
let num = 1; num = 2; document.writeln(num); //结果为2
- const----------不能够重复定义，也不能重新赋值
const num = 1;
// num = 2;不能重新赋值
document.write(num);
//结果为1
数组
let arr = Array[1,2,3,4,5]; arr = [100] = 10;
- Array()是一个函数，返回值是一个空数组
- JS里“没有”方法的概念-----称为函数，JS里方法不是Java里方法，JS里的函数相当于Java里的方法
- Array（），在JS中函数可以当作类使用
- 可以理解为JS中的数组就是java里的集合
函数
- 相当于Java的方法
- 可以有参数列表，参数可以有多个
- return的作用-----终止函数的执行
对象
- Arraty（）返回一个空数组
Object（）返回一个空对象
构造器
let obj = new Object;
function User(name){
this.name = name;
}
//创建了一个user对象
//我们之前定义的this.name就是这个对象的属性
//现在的user对象中有一个name属性，值是张三
let user = new User("张三");
console.log(user.name);
调对象
let obj = new Object;
//JS对象的属性
obj.name = "李四";
obj.age = 30;
//JS对象的方法
obj.eat = function(){
console.log("hi")
}
//对象调方法
obj.eat();
json串
let teacher = {
name = "王五";
age = 35;
drank:function(){
console.log("我正在喝酒。。")
}
}
teacher.drank();
console.log(teacher['drank']())
判断和循环
在JS中，if(条件)--------规定：0，null，undefined为false，其余为true
let arr = [1,2,3,4,5];
for(let i = 0;i < arr.length;i++) {
console.log(arr[i]);
}
for(i in arr){
console.log(arr[i]);
}
let student = {
name: "小明",
age: 10
}
// 遍历对象
// console.log(student.length);
for(attr in student) {
console.log(attr);
console.log(student[attr]);
}
/*
中间省略了运算符 ===
*/
常用api（常用工具对象）
Array()
- concat-----连接
- push----添加
- pop---删除数组中最后一个元素
- shift----删除数组中第一个元素
let arr1 = [1,2,3];
let arr2 = [9,8,7];
// console.log(arr1.concat(arr2));
arr1.push(10);
// 移除数组中的最后一个元素
arr1.pop();
// 移除数组中的第一个元素
arr1.shift();
console.log(arr1);
eval
把一个字符串解析成JS代码执行
let name = "你好";
// 对字符串进行编码
document.write(escape(name));
let js = "alert('哈哈哈')";
js = "1+1";
// 把一个字符串解析成js代码执行
document.writeln(eval(js));
document.write(js);
isNaN
判断一个值是不是数字，是---false；不是---true
parseInt
转成整数：parseInt（）
parseFloat
转成小数：parseFloat（）
Number
转成数字：Number（"xxxx"）
String
转成字符串：String（）
DOM编程（Document Object Model）
文档本身就是一个文档对象document
节点
所有的HTML元素都是元素节点
所有的HTML属性都是属性节点
元素的文本是文本节点
注释节点（一般不用）
获取元素结点
<div class="div1" id="div1">我是div</div>
根据id属性获取对应的元素节点（通过id获取到的是唯一一个节点）
let div = document.getElementById("div1");
根据标签名获取对应的元素节点（通过标签名获取到的是一堆标签元素节点）
let div = document.getElementsByTagName("div");
根据iclass样式获取对应的元素节点（通过class样式获取到的是一堆标签元素节点）
let div = document.getElementsByClassName("div1");
console.log(div[0]);
新方式---querySelector---找到和传入的选择器匹配的第一个元素（返回值是一个元素节点）
let div = document.querySelector("div");
console.log(div);
新方式---querySelectorAll---找到和传入的选择器匹配的所有元素（返回值是一堆元素节点）
let divs = document.querySelectorAll("div");
console.log(divs[0]);
获取内容
<div>
<p>我是div</p>
</div>
<div class="div2">
</div>
<script>
let div = document.querySelector("div");
// innerHTML可以获取到HTML标签
console.log(div.innerHTML);
// innerText只能获取到文本
console.log(div.innerText);
let div2 = document.querySelector(".div2");
div2.innerHTML = "<h1>我是div2里面的h1</h1>";
div2.innerText = "<h1>我是div2里面的h1</h1
事件
新建元素节点
<style>
.mydiv {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<button onclick="fun()">点我！！！</button>
<div id="container"></div>
<script>
function fun(){
// 新建一个元素节点
let myDiv = document.createElement("div");
// 给我们自己新建的div加样式
myDiv.setAttribute("class","mydiv");
// 如果有id，尽量使用id
let container = document.querySelector("#container");
// innerHTML或innerText赋值只能附字符串
// container.innerHTML = myDiv;
container.append(myDiv);
/*
每次点击=号，在下方显示计算的历史记录！
*/
}
</script
删除某一个子元素
<button onclick="delOne()">删除某一个子元素</button>
function delOne() {
let ul = document.querySelector("ul");
let lis = document.querySelectorAll("li");
ul.removeChild(lis[2]);
}
删除自己
<button onclick="del(this)">删除自己</button>
function del(obj) {
// console.log(obj);
// 找到要删除的元素
// let btn = document.querySelector("button");
// console.log(btn)
// 元素.remove方法直接删除
// btn.remove();
obj.remove();
}
清空
<button onclick="delAll()">清空</button>
function delAll() {
// 清空ul
let ul = document.querySelector("ul");
ul.innerHTML = "";
}
以下所用代码
<ul>
<li><a href="#">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
获取当前节点所有子节点
let uls = document.querySelector("ul");
获取html节点
console.log(uls.children);
全text和li节点
console.log(uls.childNodes);
从某个角度来说，子节点是相对的状态
###学习心得
今天学习了Javascript脚本语言，知识点有点多，需要多敲代码强化理解
###掌握情况：一般
###课上练习
<!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>
<input type="text" class="num1">
<select class="oper">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" class="num2">
<button onclick="calc()">=</button>
<input type="text" readonly class="result">
<hr>
<button onclick="cls()">清空历史记录</button>
<ol id="history"></ol>
<script>
/* 定义一个不重复的变量，用它来当做
button和li共同的id
*/
let r = 1;
function calc() {
// 获取第一个数
let num1 = document.querySelector(".num1").value;
// 获取第二个数
let num2 = document.querySelector(".num2").value;
let result = document.querySelector(".result");
/*
下拉菜单我们要找的元素是select，选择的是哪一个
选项，这个select的value值就是哪一个选项的value值
*/
let oper = document.querySelector(".oper");
result.value = eval(num1 + oper.value + num2);
let li = document.createElement("li");
// 生成历史记录的时候，加上按钮
/*
并且处理id的问题，加单击事件
*/
li.innerHTML = num1 + oper.value + num2 + "=" + eval(num1 + oper.value + num2) + "<button id=b" + r +" onclick='remself(this)'>删除</button>";
// 自我删除
/*
li按照自定义的规则，li处理id的问题
*/
li.setAttribute("id","l"+r);
// 标记自增
r++;
let ol = document.querySelector("#history");
ol.append(li);
document.querySelector(".num1").value = "";
document.querySelector(".num2").value = "";
}
function cls() {
// 拿到历史记录的ol
let ol = document.querySelector("#history");
ol.innerHTML = "";
}
function remself(obj) {
// 把拿到的b1转换成li
let li = document.getElementById(String(obj.id).replace("b","l"));
// 删除自己
li.remove();
}
</script>
</body>
</html>
###运行结果
浙公网安备 33010602011771号