Section III
Review and consolidate
1, EMCAScript: Programming Language Basics - including data types, flow control, function
2, DOM: Document Object Model - includes a selector
Properties - characteristics, style event
Structure - parent container, DOM node (parent container, sibling)
3, Data: Json (JavaScript Object Notation)
/*json对象*/
var emp1={empName:'Mat',gender:'Male'};
/*json对象数组*/
var arr=[
{empName:'Mat',gender:'Male'},
{empName:'Green',gender:'Male'},
{empName:'Mary',gender:'Male'}
]
4, cycle:
1) single cycle
2) The multilayer cycle (cycle occurs if two or more layers, is generally considered to be a problem programming - modify the program structure)
New lesson notes
DOM manipulation
1, mainly to solve the problem
- How json array presented on the table, select components, etc.
- How individual objects on the panel
Digression : vue.js of two parts:
-
Management need to preserve the property values of the page: 1, data-driven
-
2, component: Component (structure) + Event (mechanism)
How Event Description: Event Name + + event binding approach
https://www.w3school.com.cn/jsref/dom_obj_event.asp
ex: click (click event): Click a button to make some response
Events For example: click event when the user logs on simulation
/**页面初始化**/ window.onload=function () { /**事件绑定**/ /**事件并不会马上发生,要等到触发节点才会调用处理方法**/ document.getElementById('btnLogin').onclick = function () { btnLoginClick(); } } function btnLoginClick() { var username = document.getElementById('username').value; if(username!='admin'){ alert('用户名错误'); } }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件</title> </head> <body> <div class="login-box"> <div class="row"> 用户名: <input id="username" value=""/> </div> <div> <button id="btnLogin">按钮</button>//防止侵入式开发，不能将onclick写入html文件 </div> </div> </body> <script src="js/event.js"></script> </html>
2. Application example: two linked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select上的onchange</title>
</head>
<body>
大学
<select id="sltArea">
</select>
<select id="sltSchool">
</select>
</body>
<script src="js/onchange.js"></script>
<script src="js/json.js"></script>
</html>
/**
*id是业务无关项
*/
var citites = [
{cityid:1,cityname:'天津'},
{cityid:2,cityname:'北京'}
]
var schools = [
{schoolid:1,schoolname:'天津大学',cityid:1},
{schoolid:2,schoolname:'南开大学',cityid:1},
{schoolid:3,schoolname:'北京大学',cityid:2}
]
window.onload = function () {
/**初始化城市列表**/
initCities();
/**
* 通过选择城市设置学校列表
*/
setSchoolsByCity();
}
function initCities(){
/**
* 1、找到父容器
* 2、创建子元素
* 3、把子元素放到父容器中
*/
var area = document.getElementById('sltArea');
for(var i = 0;i<citites.length;i++){
var opt = document.createElement('option');
opt.value = citites[i].cityid;
opt.innerText = citites[i].cityname;
area.appendChild(opt);
}
}
function setSchoolsByCity(){
var area = document.getElementById('sltArea');
area.onchange = function () {
sltSchoolOnChange();
}
}
function sltSchoolOnChange() {
/**
* 1、获取选中的value
* 2、过滤学校数组产生新数组
* 3、把数组绑定到学校列表——Q：编程一个通用的方法
*/
var area = document.getElementById('sltArea');
var selected = area.selectedOptions[0].value;
var newSchools = schools.filter(function (item) {
return item.cityid == selected;
})
var school = document.getElementById('sltSchool');
school.innerHTML='';
for(var i = 0;i<newSchools.length;i++){
var opt = document.createElement('option');
opt.value = newSchools[i].schoolid;
opt.innerText = newSchools[i].schoolname;
school.appendChild(opt);
}
}
Homework
Job 1: independently encoding the two linkage. Q: Try a unified function, processing drop-down list assignment
Question: How to create (design) function?
1, having a first repetition coding segments
2, find the code represents the single responsibility of
3, found that (because) variable, abstracted into a template
4, variable lift
1) isolating and processing variables: variables corresponding structures; process corresponding to the algorithm
2) The process of encapsulated into a function of position, using the formal parameters (placeholders) to represent variables
5, using the function:
1) the actual parameter assignment
2) the actual parameter passed to the function, thereby performing the function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动</title>
</head>
<body>
大学
<select id="sltArea">
</select>
<select id="sltSchool">
</select>
</body>
<script src="js/school.js"></script>
<script src="js/json.js"></script>
</html>
window.onload = function () {
init();
}
function init(){
/**
* 1、找到父容器
* 2、创建子元素
* 3、把子元素放到父容器中
*/
/**
*1、对可变内容进行抽象-->变量——>随时被替换成具体的内容
* 2、变量 变成 函数的参数，写成函数
*/
var selector = document.getElementById('sltArea');//选择器：找到将要赋值的select
var arr = citites;//数据源：循环生成select中option对应的value和innerText
var option = {var:'cityid',text:'cityname'};//value和innerText与列名之间的对应关系
//option.val = option['val'];
setOptionForSelect(selector,arr,option);
selector.onchange = function(){
sltSchoolOnChange();
}
}
function sltSchoolOnChange() {
var selector = document.getElementById('sltArea');
var selected = selector.selectedOptions[0].value;
var newSchools = schools.filter(function (item) {
return item.cityid == selected;
})
var area = document.getElementById('sltSchool');
area.innerHTML='';
var data = newSchools;
var opt = {var:'schoolid',text:'schoolname'};
setOptionForSelect(area,data,opt);
}
function setOptionForSelect(selector,arr,option){
for(var i = 0;i<arr.length;i++){
var opt = document.createElement('option');
opt.value = arr[i][option.var];//arr[i]['cityid']=>arr[i].cityid;
opt.innerText = arr[i][option.text];
selector.appendChild(opt);
}
}
/**
*id是业务无关项
*/
var citites = [
{cityid:0,cityname:''},
{cityid:1,cityname:'天津'},
{cityid:2,cityname:'北京'}
]
var schools = [
{schoolid:0,schoolname:'',cityid:0},
{schoolid:1,schoolname:'天津大学',cityid:1},
{schoolid:2,schoolname:'南开大学',cityid:1},
{schoolid:3,schoolname:'北京大学',cityid:2}
]
Job 2: unprepared jQuery
