JS初入门
1、直接嵌入HTML页面。
2、由浏览器解释执行代码，不进行预编译。
解释型语言和编译型语言
JS：解释型语言、弱类型语言
Java:编译型语言、强类型语言
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table><tr><td><img src=""/></td><td colSpan="3">购物简易计算器</td></tr><tr><td>第一个数</td><td colSpan="3"><input type="text" id="num1Id"/></td></tr><tr><td>第二个数</td><td colSpan="3"><input type="text" id="num2Id"/></td></tr><tr><td><input type="button" value=" + " onclick="cal('+')"/></td><td><input type="button" value=" - " onclick="cal('-')"/></td><td><input type="button" value=" * " onclick="cal('*')"/></td><td><input type="button" value=" / " onclick="cal('/')"/></td></tr><tr><td>计算结果</td><td colSpan="3"><input type="text" id="resultId"/></td></tr></table><script>//当运算种类很多时，cal1依旧过于繁琐，eval函数专门处理字符串类型的表达式function cal(type){var num1 = document.getElementById("num1Id").value;var num2 = document.getElementById("num2Id").value;var result = eval(parseInt(num1) + type + parseInt(num2));document.getElementById("resultId").value = result;}//解决运算结果为字符串拼接问题function cal2(type){var num1 = document.getElementById("num1Id").value;var num2 = document.getElementById("num2Id").value;switch (type){case "+":var result = parseInt(num1) + parseInt(num2);break;case "-":var result = parseInt(num1) - parseInt(num2);break;case "*":var result = parseInt(num1) * parseInt(num2);break;case "/":var result = parseInt(num1) / parseInt(num2);break;}document.getElementById("resultId").value = result;}//分为add、sub、mul、div四个函数分别进行处理，代码会出现很多冗余，所以合并为一个函数，将运算类型作为参数传进来即可function cal1(type){var num1 = document.getElementById("num1Id").value;var num2 = document.getElementById("num2Id").value;//如num1=3，num2=4，运算为加法，结果为3+4，因为“+”为字符串，字符串与数字运算结果为字符串拼接var result = parseInt(num1) + type + parseInt(num2);document.getElementById("resultId").value = result;}function add() {var num1 = document.getElementById("num1Id").value;var num2 = document.getElementById("num2Id").value;var result = parseInt(num1) + parseInt(num2);document.getElementById("resultId").value = result;}function sub() {var num1 = document.getElementById("num1Id").value;var num2 = document.getElementById("num2Id").value;var result = parseInt(num1) - parseInt(num2);document.getElementById("resultId").value = result;}function mul() {var num1 = document.getElementById("num1Id").value;var num2 = document.getElementById("num2Id").value;var result = parseInt(num1) * parseInt(num2);document.getElementById("resultId").value = result;}function div() {var num1 = document.getElementById("num1Id").value;var num2 = document.getElementById("num2Id").value;var result = parseInt(num1) / parseInt(num2);document.getElementById("resultId").value = result;}</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--<ul><li mean='热情'>red</li><li mean='冷静'>green</li><li mean='生机'>blue</li></ul>--><script>window.onload = function () {var color = ['red', 'green', 'blue'];var colorMeans = ['热情', '冷静', '升级'];//先创建ul标签元素var ul = document.createElement('ul');//有三层li，通过循环遍历创建li标签元素for (var i = 0; i < color.length; i++) {//创建li标签var li = document.createElement('li');//设置li标签中的mean属性li.setAttribute('mean', colorMeans[i]);//创建文本节点（red、green、blue），传入文本内容var textNode = document.createTextNode(color[i]);//将文本节点追加到li标签中li.appendChild(textNode);ul.appendChild(li);}//最后还需要将ul追加到body标签上document.body.appendChild(ul);};</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input id="btnId" type="button" value="Press Me"><script>window.onload = function () {var btn = document.getElementById('btnId');btn.onclick = function () {alert('hello');}}</script>
</body>
</html>
