3rd Chapter Web03-js

Today's mission
? Use JS to complete picture carousel effect
? Use JS to complete the page timed pop-up ads
? Use JS to complete the validation of the form
? Use JS to complete the table interlaced color change
? Use JS to complete the check box of the full selection effect
? Use JS to complete the provincial and municipal linkage effect
Teaching navigation
Teaching objectives
Master the BOM object in JS
Mastering the common events in JS
Mastering common DOM Operations in JS
Understanding the built-in objects in JS
Teaching methods
Case-driven approach
1.1 Previous lesson Content review:
Css:

• Overview of CSS: Cascading style sheets.
  • The page that modifies the HTML. Detach the page from the style.
• Syntax for CSS:
  • Selector {Property Name: property value; Property Name: Property value; ...}
• How CSS is introduced:
  • Inline styles: Use the Style property setting on HTML elements
  • Internal style: Use <style></style> in HTML to set
  • External style: Defines a CSS file that is introduced in HTML. <link href= "" type= "" rel= ""/>
• CSS selector: (* * *)
  • Element selector:
  • ID selector:
  • Class selector:
  • Descendant selector:
  • Child element Selector:
• CSS styles:
  • Text
  • Background
  • Font
  • List
• CSS's Box model:
  • Inner margin: padding
  • Border: Border
  • Margins: Margin
• CSS Suspension and positioning:
  • Hover: Float property to set suspension.
  • Clear hover: Clear property cleared.
  • Positioning: The Position property sets the positioning.
    • Use the left and top properties to control the position.
  • Display Properties: Controls how elements are displayed:
    • block--displayed, none--hidden, inline--displayed to one line.
      Js:
• JS Overview: JavaScript runs in the browser-side scripting language.
• JS history: Developed by Netscape. Unified Standard by the ECMA organization: ECMAScript.
• JS composition: Ecmascript,bom,dom.
• The syntax of JS:
  • The variable declaration of JS:
  • JS Data type:
    • Original type: Undefined,boolean,string,number,null
    • Reference type:
  • JS Operator:
    • is basically consistent with java. A = = = is true if the type is the same as the value.
  • JS's statement:
    • Consistent with the statements in Java.
• Simple Form Validation:
  • Regular checksum: Use the match method of string and the test method in the regular.

1.2 Case one: Using JS to complete the image of the carousel Effect: 1.2.1 Requirements:

1.2.2 Analysis: 1.2.2.1 Technical Analysis:
"Timed operation of the Window object in JS"

• To set the timing method
  
• How to clear the timing
  
  1.2.2.2 Step Analysis:
  "Step One" creates an HTML file
  "Step Two" when the page loads, start timing. Use the OnLoad event.
  Step three writes the function that is triggered by the OnLoad event.
  Step four obtains control over the operation picture.
  "Step Five" modifies the properties of the image src.
  1.2.3 Code implementation:

<script>window.onload = function(){// 设置定时：window.setInterval("changeImg()",5000);}var i = 1;function changeImg(){i++;// 获得图片的控制权：if(i > 3){i=1;}var img1 = document.getElementById("img1");img1.src="../img/"+i+".jpg";}</script>

1.3 Case two: Using JS to implement timed pop-up ads time hidden. 1.3.1 Requirements:
Pop up an ad on the homepage of the website regularly and hide it regularly.

1.3.2 Analysis: 1.3.2.1 Technical Analysis:
"The timing method of the JS window object"

• To set the timing method
  
• How to clear the timing
  
  "CSS Display and Hidden properties"
• Display
  • Block: Display element:
  • None: Hidden elements:

1.3.2.2 Step Analysis:
"Step One" creates an HTML page
Step two determines the event: Load event for the page
"Step three" triggers a function that writes the function.
Step four sets the timer action in the function. Executes a displayed function at timed intervals.
"Step Five" clears the timer, reset the timer, 5 seconds to hide.
1.3.3 Code implementation:

var time;window.onload = function(){time = window.setInterval("show()",5000);}// 显示广告的方法function show(){// 获得广告的div元素:var adDiv = document.getElementById("adDiv");adDiv.style.display = "block";window.clearInterval(time);time = window.setInterval("hide()",5000);}// 隐藏广告的方法:function hide(){// 获得广告的div元素:var adDiv = document.getElementById("adDiv");adDiv.style.display="none";window.clearInterval(time);}

1.3.4 Summary: 1.3.4.1 JS in the BOM object:

? Window

• alert (); --Popup dialog box
• SetInterval ();
• SetTimeout ();
• Clearinterval ();
• Cleartimeout ();
• Confirm (); --Pop up a confirmation window
• Prompt (); --Pop up a dialog box that can be entered
• Open (); --Open a new window
  ? Navigator: Contains information about the browser.
  
  ? Screen: Used to get information about the screens:
  
  ? History: Browser's Historical object:
  
  ? Location: The object that contains the URL information
  
  1.4 Use JS to complete the registration page form prompt and check 1.4.1 requirements:
  
  Registering the page before it is a popup dialog is not particularly friendly in the form of a check! You can display the error message after the text box. And when the cursor falls into the text box, the message prompts.
  1.4.2 Analysis: 1.4.2.1 Technical Analysis:
  "JS Output"
• document.getElementById (""). Innerhtml= "HTML code";
• document.write ("");

"JS Event"

• Onfocus: Get focus.
• Onblur: Lose focus.
• OnSubmit: At the time of submission.

1.4.2.2 Step Analysis:
"Step One" creates an HTML document
Step two adds an event to the text box you want to check.
"Step three" trigger function
Step four writes the contents of a hint to the area of the HTML after the text box in the function.
1.4.3 Code implementation:

function tips(id,content){document.getElementById(id+"Span").innerHTML = "<font color=‘red‘>"+content+"</font>";}function checkForm(){// 判断用户名不能为空:var username = document.getElementById("username").value;if(username == ""){document.getElementById("usernameSpan").innerHTML = "<font color=‘red‘>用户名不能为空！</font>";return false;}var password = document.getElementById("password").value;if(password == ""){document.getElementById("passwordSpan").innerHTML = "<font color=‘red‘>密码不能为空！</font>";return false;}}

1.4.4 Summary: 1.4.4.1 JS Event Summary:

• OnLoad:
• OnClick:
• OnSubmit:
• Onfocus:
• Onblur:
• OnChange: The drop-down list changes the event.
• OnDblClick: Double-click an element's event.
  Keyboard Manipulation Events:
• OnKeyDown:
• OnKeyUp:
• onkeypress
  Mouse Action Events:
• OnMouseMove
• onmouseout:
• onmouseover
• OnMouseDown
• OnMouseUp

1.5 case four: Using JS to complete the background data display interlaced color table: 1.5.1 Requirements:
On pages that display data in the background, it is common to use table labels for data presentation. Tables with no background are ugly, and you can use JS to control the alternating color of the table.

1.5.2 Analysis: 1.5.2.1 Technical Analysis:
"Use JS to get the number of rows in a table"

• Table elements that have been controlled:
  • var tab1 = document.getElementById ("Tab1");
  • var len = tab1.rows.length;

1.5.2.2 Step Analysis:
Step one creates an HTML page: You can use the background design page.
Step two determines the event: OnLoad event.
"Step three" triggers a function. Gets the table of operations in this function.
Step four gets the number of rows in the table.
Step five traverses the number of rows in the table.
Step six determines whether it is an odd or even line.
1.5.3 Code implementation:

function changeColor(){// 获得要操作的对象的控制权：var tab1 = document.getElementById("tab1");// 获得表格的所有的行数:var count = tab1.rows.length;// 遍历每行:for(var i = 0;i<count;i++){if(i % 2 == 0){// 偶数行tab1.rows[i].style.backgroundColor = "#00FF00";}else{// 奇数行tab1.rows[i].style.backgroundColor = "#00FFFF";}}}

1.5.4 Summary: 1.5. Tbody and Thead tags in table 4.1
function ChangeColor () {
Get control of the table of operations:
var tab1 = document.getElementById ("Tab1");
Get all the rows in the tbody.
var len = tab1.tbodies[0].rows.length;
for (var i = 0;i< len; i++) {
if (i% 2 = = 0) {
Tab1.tbodies[0].rows.style.backgroundcolor = "green";
}else{
Tab1.tbodies[0].rows.style.backgroundcolor = "Gold";
}
}
}

1.6 Case Five: Use JS to complete the check box of the full selection and all the effects 1.6.1 requirements:
In the actual development of a record to delete a record, the efficiency is very low, sometimes you need to delete more than one record. You need to check the box by ticking a check box before the table. Click a Delete button.

1.6.2 Analysis: 1.6.2.1 Technical Analysis:
1.6.2.2 Step Analysis:
"Step One" creates an HTML page.
Step two determines the event: the Click event for the check box.
"Step three" triggers a function
"Step four" in the function, get the check box above is selected.
"Step Five" if selected, all of the following check boxes are selected.
"Step Six" if unchecked, all of the following check boxes are unchecked.
1.6.3 Code implementation:

function checkAll(){// 获得上面的复选框var selectAll = document.getElementById("selectAll");// 判断这个复选框是否被选中.var ids = document.getElementsByName("ids");if(selectAll.checked == true){// 上面复选框被选中：获得下面所有的复选框,修改checked属性for(var i = 0 ;i<ids.length;i++){ids[i].checked = true;}}else{// 上面复选框没有被选中：获得下面所有的复选框,修改checked属性for(var i = 0 ;i<ids.length;i++){ids[i].checked = false;}}}

1.6.4 Summary: Dom object in 1.6.4.1 JS:
"Overview of the DOM"
? What is DOM
Dom:document: Document Object model.
Loading an HTML document into memory forms a tree structure that allows you to manipulate the tree structure to change the way HTML looks.
? Use of DOM:
Know the properties and methods in Document,element,attribute

"Common operations of the DOM"
? Get elements:

• document.getElementById (); --Get the element by ID.
• Document.getelementsbyname (); --Gets the element through the Name property.
• document.getElementsByTagName (); --Get elements by tag name.
  ? To create an element:
• Document.createelement (); --Creating elements
• document.createTextNode (); --Create Text
  ? To add a node:
• Element.appendchild (); --At the end of the Add a node.
• Element.insertbefore (); --Inserted before an element.
  ? To delete a node:
• Element.removechild (); --Delete element

"Use DOM to finish adding an LI element to ul"
function AddElement () {
var city = document.getElementById ("city");
Create a single element:
var Liel = document.createelement ("Li");
Create a text node:
var text = document.createTextNode ("Shenzhen");
To add a child node:
Liel.appendchild (text);
City.appendchild (Liel);
}

1.7 Case SIX: Using JS to complete the effect of provincial and municipal linkage: 1.7.1 demand:
On the registration page there are two drop-down lists, the drop-down list in the left-hand province changes, and the drop-down list of the city on the right is changed accordingly.

1.7.2 Analysis: 1.7.2.1 Technical Analysis:
"Create an array in JS"

"JS Event"
Drop-down list of changed events. onchange.

"JS Dom operation"
To create an element:
To add an element:

1.7.2.2 Step Analysis
"Step One" creates an HTML file.
Step two determines the event: the onchange event.
Step three triggers the function to write code in the function.
Step four Gets the information for the selected province.
Step five obtains the data from the corresponding array of municipalities according to the information of the selected province.
Step six iterates through the information of the city in the array.
Step Seven creates the element, creates the text, and finally adds the element to the second list.
1.7.3 Code implementation:

// 定义数组：二维数组：var arrs = new Array(5);arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");arrs[4] = new Array("长春市","吉林市","四平市","延边市");function changeCity(value){// 获得到选中的省份的信息.var city = document.getElementById("city");// 清除第二个列表中的内容:for(var i=city.options.length;i>0;i--){city.options[i] = null;}// city.options.length = 0;// alert(value);for(var i= 0 ;i< arrs.length;i++){if(value == i){// 获得所有的市的信息.for(var j=0;j<arrs[i].length;j++){// alert(arrs[i][j]);// 创建元素：var opEl = document.createElement("option");// <option></option>// 创建文本节点:var textNode = document.createTextNode(arrs[i][j]);// 将文本的内容添加到option元素中.opEl.appendChild(textNode);// 将option的元素添加到第二个列表中.city.appendChild(opEl);}}}}

1.7.4 Summary: 1.7.4.1 JS's built-in objects:

? Array:

? Boolean:

? Date:

• Http://www.baidu.com?time=new Date (). GetTime ();
  ? Math object:
  
  ? String object:
• CharAt ();
• IndexOf ();
• LastIndexOf ();
• Split ();
• Replace ();
• SUBSTRING ();
• SUBSTR ();

1.7.4.2 JS's global function:

• parseint ();
  • parseint ("11");
• Parsefloat ();
  • Parsefloat ("32.09");
• Methods of encoding and decoding:
  Decoding
• decodeURI ();
• decodeURIComponent ();
  Coding
• encodeURI ();
• encodeURIComponent ();
  eval function:
• Take a piece of content as JS code execution.
  var sss = "alert (' aaaa ')";
  eval (SSS);

3rd Chapter Web03-js