这是来自学习js一周的程序员小白的总结 ，跟着一起进步成大神吧
（首先我们要懂js基础概念和基础语法）
javascript-基础部分
1、javascript概述
1.javascript概念：
简称js，是一个运行在js解释器中的一个解释型弱类型面向对象脚本语言
2.js的使用-两种
a.在html中直接写
<`script`>js代码</script>
b.创建xxx.js文件，js代码书写在js文件中，再在HTML中引入<`script scr="xxx.js`"></`script`>
3.js的输出-三种
- 控制台输出--
console.log()----最常用- 警告框输出--
alert()---会卡住页面- 页面上输出-
-docunment.write()---绑定点击事件会清空页面
2、变量和常量
1.变量:
语法：
var 变量名=值；
保存一个想要重复使用的值
2.常量:
语法：
const 常量名=值；
一旦创建就不允许修改，（一般用不上）
3、算数运算符
( + - * / )跟小时候一样
%：取余（模）最多用于判断奇偶数(%2==0/1)
4、数据类型--5种
String 字符串--页面上获取的都是字符串
Number 数据
Boolean 布尔 （true/false）
Undefined --垃圾，我们不希望见到undefined
Null 空--可以释放内存
5、数据类型的转换
1.隐式转换：--需要多想想
——算数运算都具有隐式转换:
默认：都会转为数字再运算
特殊：
+ 碰上字符串，会进行拼接 - * /碰上非纯数字字符串，会变为——NaN
NaN:
不是一个数字，但是一个数字类型，--我们也不希望见到他 但可以用来判断用户恶意输入（只能判断数字输入） 用法：`!isNaN(变量)`->true:是一个有效数字 ->false:NaN
2.显示转换（强制转换）
1.转字符串
xxx.to string() --没用：页面上获取的一切东西都是字符串
2.转数字
a.parseInt(x),解析为一个整数
b.parseFloat(x),解析为一个小数
原理都是：从左到右依次解析，碰上一个非数字就停止，parseFloat可以解析一个小数点，一来就碰上非数字则为——NaN
c.number(x)--转为数字，同等于隐式转换，没用，不如用（-1，*1 ，/1）
6、函数-function——第一等公民
1.创建：
function 函数名（）{需要反复执行的代码}
2.调用：
a.程序员调用：直接写在代码里，写一次调一次
语法：函数名（）；
b.用户调用：绑定上点击事件，用户点几次调几次
语法：<elem onclick=函数名()>``</elem>
3.带参数的函数
创建：function 函数名（形参）{}
调用：函数名（实参）
4.使用
a.不希望一打开页面就执行
b.能够反复执行
c.是一个独立功能体
d.可以自动释放变量--最好每个一个功能都封装为一个函数
7、分支结构
1.一个条件一件事,满足就做，不满足就不做
if(条件){}
2.一个条件两件事，满足就做，不满足就做另一件
if(条件){}else{}
3.多个条件多件事，满足谁就做谁
if(条件1){
操作1
}else if(条件2){
操作2
}else{
默认操作
}
8、循环结构
1.while循坏 ——不明确循坏次数——死循环用这个
var 循环变量=值；
while(循坏条件){
循环体；
循环变量的变化；
}
死循环：
while(true){
循环体
}
搭配循环退出——break使用
2.for循坏——语法更简单，大多数用这个
for(循环变量；循环条件；循坏条件的变化){
循环体；
}
9、数组
希望一个变量能保存多个数据
1.创建
var arr=[];
2.访问arr[下标]；
3.添加/覆盖arr[下标]="值"；
4.数据三大不限制
a.数据类型不限制
b.长度不限制
c.下标越界不限制--不好
添加时，下标越界会造成稀疏数组，遍历时拿到很多undefined
访问时，下标越界会得到undefined
5.数组的唯一属性——length(长度)
数组.length
三个固定套路：
a.始终给末尾添加元素arr[arr.length]="新值"
b.获取倒数第n个元素arr[arr.length-n]
c.缩容arr.length-=n
6.遍历数组 for(var i=0;i<arr.length;i++){ arr[i] }
1、 js三部分
1.es3/es5/es6——核心语法
2.DOM docunment object model——文档对象模型--操作HTML文档
3.BOM 浏览器对象模型--操作浏览器
2、 DOM概述
1.docunment object model——文档对象模型--操作HTML文档
2.dom树：每个页面都是一个倒挂的树状结构
树根：document
3、查找元素
1.通过ID查找
document.getElementById("id名")找到返回单个元素，没找到返回null,一般不用，留给后端
2.通过标签名查找
document/已找到的父元素.getElementByTagName("标签名")
找到返回集合，没找到返回空集合
要么通过遍历拿到全部，要么通过下标拿到一个
3.通过class名查找
document/已找到的父元素.getElementByClassName("标签名")
找到返回集合，没找到返回空集合
要么通过遍历拿到全部，要么通过下标拿到一个
4.通过关系查找
elem.parentNode--找父元素
elem.children--找子元素们
elem.lastElementChild--最后一个儿子
elem.firstElementChild--第一个儿子
elem.previousElementSibling--找上一个兄弟
elem.nextElementSibling--找下一个兄弟
4、操作元素
一切获取都是为了判断， 一切设置都是为了修改
1.操作内容
获取：elem.innerHtml(认识标签）/elem.innerTEXT
赋值：elem.innerHtml="新值"
2.操作属性
获取：elem.getAttribute("属性名")/elem.属性名(不认识自定义属性，但更简洁)
赋值：elem.setAttribute("属性名"，"属性值")/elem.属性名="属性值"
3.操作样式
操作的是内联样式
获取：elem.style.css属性名
赋值：elem.style.css属性名="属性值"
5、绑定元素
1.单个元素：
elem.onclick=function(){
this->就是绑定事件的这个元素
}
2.多个元素：
for(var i=0;i<elems.length;i++){
elems[i].onclick=function(){
this->是当前触发事件的元素
}
}
购物车案例（基本用上上面所有语法内容）
<body>
<!-- html部分 -->
<table id="tbl">
<thead></thead>
<tbody>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iphone7</td>
<td>5488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>5488</td>
</tr>
<tr>
<td>iphone8</td>
<td>6488</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>6488</td>
</tr>
<tr>
<td>RTX 3090</td>
<td>20000</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>20000</td>
</tr>
<tr>
<td>RTX 3080</td>
<td>16000</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>16000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计:</td>
<td id="total">0</td>
</tr>
</tfoot>
</table>
<!-- js部分 -->
<script type="text/javascript">
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
if (this.innerHTML == "+") {
calc(1, this);
} else {
calc(-1, this);
}
getTotal();
}
}
getTotal();
function calc(num, btn) {
if (num == 1) {
var span = btn.previousElementSibling;
} else {
var span = btn.nextElementSibling;
}
var spanv = parseFloat(span.innerHTML) + num;
if (spanv > 0) {
span.innerHTML = spanv;
var price = btn.parentNode.previousElementSibling.innerHTML;
btn.parentNode.nextElementSibling.innerHTML = price * spanv;
}
}
function getTotal() {
var tbody = document.getElementsByTagName("tbody")[0];
var trs = tbody.children;
for (var i = 0, money = 0; i < trs.length; i++) {
money += parseInt(trs[i].lastElementChild.innerHTML);
}
total.innerHTML = money;
}
</script>
</body>
