🚩前言
🌻今天进行JavaScript的学习，JavaScript的思想与Java类似，都是面向对象的思想，最后再进行一个简易计算器的练习。
作者简介：大家好我是烫嘴的辛拉面，大家可以叫我拉面。
个人主页: weixin_49405762的博客
系列专栏： 经典算法习题集
为大家推荐一款刷题神器哦 点击跳转进入网站
✏️JavaScript
JavaScript脚本语言，解释型，主要用来给HTML网页增加动态功能。 通常的js是运行在浏览器环境下的。JS的两种模型：
DOM：文档对象模型 document
BOM：浏览器对象模型 window
nodejs运行在计算机环境下，服务器技术。不能操作BOM和DOM。但是它可以操作文件， 能操作数据库，实际上是一门后端技术。
JS解释器：不同的浏览器，JS解释器不一样。
Chrome v8
node v8
safari JavaScriptCore
ECMAScript ES 一套规范
JavaScript JS 具体的实现
ES6 ES5 ES7…语法
JS基本上是web前端的核心！！！
页面的加载顺序是从上到下
JS是用来控制页面的显示方式
需要等待页面加载完成，再执行JS
✒️自动类型推断 弱类型
1、数字 number
2、字符串 string
3、布尔型 boolean
4、null 空，定义了，但是值为空
5、undefined 未定义，没有声明过
6、NaN 非数字
7、数组
8、对象
✒️ES6声明变量语法
var num = 1;
var num = 2;
document.write(num);
新的声明变量的关键字
let num = 1;
num = 2;
document.writeln(num);
声明常量的关键字
✒️函数
Array()是一个函数，返回值就是一个空数组
JS里"没有"方法这个概念，叫做函数
JS里的方法不是java里的方法
JS里的函数相当于java里的方法
let arr = Array();
Array()，在JS中，函数可以当做《类》使用
let arr = new Array();
// 可以理解为JS中的数组就是java中的集合
函数（Java的方法）
可以有参数列表
参数可以有多个
function plus(a,b) {
let a = 1;
let b = 2;
console.log(a + b);
返回值
return的作用
return可以终止函数的执行
<script>
function plus(){}
// 对象
// Array()返回一个空数组
// 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 = Object();
// JS对象的属性
obj.name = "李四";
obj.age = 30;
// JS对象的方法
obj.eat = function() {
console.log("我正在吃东西...");
}
// 对象调方法
obj.eat();
// json串
let teacher = {
name:"王五",
age: 35,
drank: function() {
console.log("我正在喝酒...");
}
}
// teacher.drank();
console.log(teacher['drank']());
</script>
✒️判断和循环
在JS中，if(条件)
规定：
0，null，undefined为false
剩下的都是true
<script>
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]);
}
/*
中间省略了运算符 ===
*/
</script>
✒️常用工具对象
Array()
<script>
/*
常用工具对象
Array()
*/
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);
</script>
<script>
// let name = "你好";
// 对字符串进行编码
// document.write(escape(name));
let js = "alert('哈哈哈')";
js = "1+1";
// 把一个字符串解析成js代码执行
// document.write(eval(js));
// document.write(js);
// isNaN 判断一个值是不是数字，是false，不是true
// document.write(isNaN("哈哈"));
// parseInt(); 转整数
// parseFloat(); 转小数
// document.write(10 / 4);
// Number() 把一个值转成数字
// document.write(Number("11111"));
// String() 把一个值转成字符串
document.write(String(123));
</script>
String：
charAt，indexOf，lastIndexOf，
replace，concat，match，
substring，substr，toUpperCase
toLowerCase
Math：
random，ceil，
floor，round
Date：
getDate，getDay
getMonth，getYear
getHours，getMinutes
*/
✒️Dom编程
Document Object Model
文档本身就是一个文档对象document
所有的HTML元素都是元素节点
所有的HTML属性都是属性节点
元素的文本是文本节点
注释节点（一般不用）
获取元素节点
根据id属性获取对应的元素节点
通过id获取到的是唯一的一个节点
let div = document.getElementById(“div1”);
根据标签名获取对应的元素节点
通过标签名获取到的是一堆标签元素节点
let div = document.getElementsByTagName(“div”);
根据class样式获取对应的元素节点
通过class样式获取的时一堆标签元素节点
let div = document.getElementsByClassName(“div1”);
console.log(div[0]);
新方式
querySelector找到和传入的选择器匹配的第一个元素
返回值是一个元素节点
et div = document.querySelector(“div”);
console.log(div);
querySelectorAll找到和传入的选择器匹配的所有元素
返回值一堆元素节点
<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>";
</script>
<body>
<button onclick="delOne()">删除某一个子元素</button>
<button onclick="del(this)">删除自己</button>
<button onclick="delAll()">清空</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
function delOne() {
let ul = document.querySelector("ul");
let lis = document.querySelectorAll("li");
ul.removeChild(lis[2]);
}
function delAll() {
// 清空ul
let ul = document.querySelector("ul");
ul.innerHTML = "";
}
function del(obj) {
// console.log(obj);
// 找到要删除的元素
// let btn = document.querySelector("button");
// console.log(btn)
// 元素.remove方法直接删除
// btn.remove();
obj.remove();
/*
删除当前的记录
清空所有记录
*/
}
</script>
✏️练习
制作一个简易的计算器
<!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 +" οnclick='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>
☀️总结
JS应该说是介于前后台之间的。JS应该是有志在网络编程方向发展的青年必学的东西，它是基础。例如Ajax的就要用到js。如果不是侧重于网络方面，js就不太重要了。但如果做网站方面，js就是很重要的，必然会用到他。
必看
算法对程序员来说及其重要，语言和开发平台不断变化，但是万变不离其宗的是那些算法和理论，刷算法最最最直白的原因就是找一个好的工作，那刷题一定是必不可少的
现在算法刷题平台还是蛮多的，给大家介绍一个我认为与大厂关联最深的平台——牛客网
相较于其他平台，他们的题单更和工作，大厂靠拢，不光有面试必刷的101到题目，还有大量大厂真题，内容也全程免费，相较于其它会员费结算的来说 非常的友好
牛客网还支持ACM模式，没有练习过的一定要提前适应！像某团、某为，都要求自己处理输入输出，如果不提前练习会很吃亏的！
牛客的题解更新迭代也很快，讨论区也有奇技淫巧的分享，能帮你把所有盲点扫清楚，整体来说还是非常推荐去练习的~
传送门：牛客网
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
