1、js是解释型语言,故在一行代码报错时,前面的内容能够输出,而后面就不能
2、六种数据类型:
数值、字符串(尽量使用单引号防止搞混)、布尔、undefined、null、对象
undefined:声明了,但是没有赋值,表示“未定义”或不存在
null:空值
对象:用键值对的方式
分为狭义的对象、数组、函数
3、js代码有两种编写方式:
(1)写在html的<script>代码中
(2)将script的src设置为js文件,然后在js文件中编写
4、函数
(1)没有返回值
(2)形参不需要类型
5、BOM(浏览器对象模型)
(1)window对象:
例如window.location.href表示url地址,window.screen.width表示屏幕的宽度,window.alert表示弹窗信息等等
6、DOM(文档对象模型)
(1)DOM树
四大节点:文档节点、元素节点、属性节点、文本节点
(2)document对象
例如:
典型错误:
铁哥给的这段代码是为了将三个类为hot的改为cool,但是最后只改了第一个和第三个,问题在于:
当第一次循环执行完后,elements的长度变为2了(因为原本第一个变成了cool),所以第二次循环的时候element[i]为原本的第三个
更改使用while循环:
7、事件绑定
(1)html绑定:
在js中写函数方法,然后在例如input设置onblur为对应函数方法
(2)传统DOM绑定:
在js中设置某节点的onblur
(3)DOM监听器:
设置addEventListener监听器
8、计算器例子
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/caculator.css">
</head>
<body>
<div class="caculator">
<div class="display" id="display">0</div>
<div class="keys">
<button class="operator1" data-action="clear">AC</button>
<button class="operator1" data-action="negative">+/-</button>
<button class="operator1" data-action="percent">%</button>
<button class="operator2" data-action="divide">÷</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="operator2" data-action="multiply">×</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operator2" data-action="substract">-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="operator2" data-action="add">+</button>
<button class="extra">0</button>
<button data-action="decimal">.</button>
<button class="operator2" data-action="calculate">=</button>
</div>
</div>
<script src="../js/caculator.js"></script>
</body>
</html>
关于data-action的使用,data-后面可以加上各自的带含义的标识符
css:
body{
text-align: center;
}
.caculator{
margin-top: 25%;
margin-left: 25%;
margin-right: 11%;
border-radius: 10px;
overflow: hidden;
}
.display{
background-color: rgb(56, 147, 147);
width: 460px;
height: 60px;
font-size: 40px;
color: aliceblue;
text-align: right;
padding-right: 20px;
padding-top: 20px;
}
.keys{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0 0;
width: 480px;
}
.keys > button{
height: 50px;
width: 120px;
border-color: rgb(215, 231, 199);
}
.keys .extra{
grid-column: 1/3;
width: auto;
}
.keys .operator1{
background-color: rgb(113, 230, 163);
}
.keys .operator2{
background-color: gold;
}
网格grid布局的使用,以及对于div中的padding的理解
js:
function caculate(v1, operator, v2){
var result = '';
if(operator === 'add'){
result = parseFloat(v1) + parseFloat(v2);
}else if(operator === 'substract'){
result = parseFloat(v1) - parseFloat(v2);
}else if(operator === 'multiply'){
result = parseFloat(v1) * parseFloat(v2);
}else if(operator === 'divide'){
result = parseFloat(v1) / parseFloat(v2);
}else{
result = v2;
}
return result;
}
var caculator = document.querySelector(".caculator"),
display = document.querySelector(".display"),
keys = document.querySelector(".keys")
hasDecimal= false;
keys.addEventListener('click', function(e){
if(e.target.matches('button')){
var key =e.target,
keyContent = key.textContent,
displayNumber = display.textContent,
action = key.dataset.action,
preValueType = caculator.dataset.preValueType;
if(!action){
if(displayNumber === '0' || preValueType === 'operator'){
display.textContent = keyContent;
caculator.dataset.preValueType = 'number';
}else{
display.textContent = displayNumber + keyContent;
caculator.dataset.preValueType = 'number';
}
}
if(action === 'decimal' && !hasDecimal){
display.textContent = displayNumber + '.';
hasDecimal = true;
}
if(action === 'clear'){
display.textContent = '0';
caculator.dataset.preValueType = 'number';
caculator.dataset.firstValue = '0';
}
if(action === 'add' || action === 'substract'
|| action === 'multiply' || action === 'divide'){
caculator.dataset.preValueType = 'operator';
caculator.dataset.firstValue = displayNumber;
caculator.dataset.operator = action;
hasDecimal = false;
}
if(action === 'calculate'){
var firstValue = caculator.dataset.firstValue;
secondValue = displayNumber;
operator = caculator.dataset.operator;
hasDecimal = false;
display.textContent = caculate(firstValue, operator, secondValue);
caculator.dataset.operator = 'same';
}
}
});
首要的就是document对象使用,然后dataset对应于html中的data-,数据交互的重点