WEEK ONE

What is DOM(Document Object Modle) alt text

JS能做的事情就是利用第三方库提供的API或者自己写的function实现对element的操作

OUTPUT

alert(“”) 跳出警告框，但不要求输入
prompt(“”) 跳出警告框，要求输入内容
document.write(“”) 对文本，即网页直接书写内容，但无法确保是写在哪个位置
document.getElementById(“”).innerHTML=”” 对选定的element进行书写，当然此处也可以用getElementsByTagName() or getElementsByClassName()
console.log(“”) 直接在console中输出，不对网页文本进行修改，常常可以用来debug!! chrome-F12

VARIABLES

大小写不敏感，其实一般编程语言都是这样的

//DataType
var num = 888;
var string = "888" or '888';
var boolean = true or false;
var object = {name: "xiaoming", id: 123456, birth_year: 1996};

SYNTEX

==和===的差别在于前者可以直接比较num和string且正确，后者不可

WEEK TWO

CALL EXTERNAL FILE

<head><link rel="stylesheet" href="css/display.css">
<script type="text/javascript" src="js/d3.js"></script>
<img src="img/abc.png"></head>

INTERACTION

dynamic funciton call === event listener

包括鼠标事件和键盘事件具体文档->

THIS

is a keyword for every element to refer itself
- Every object in the DOM has an autoatically generated “this”
allow you to access an element information
is used outside function too

ARRAY

var grades=[123,'balabala',99];//array can store different datatype
for (var i=0;i < grades.length;i++) console.log(grades[i]);

array也有很多常用的attr以及method,如array.length,array.sort(),array.push(),array.pop();

WEEK THREE

FORMS

说白了就是html中的一个把戏，通过输入框，按钮等的交互实现向server传递信息，或者用于让js来进行一定操作。

<form>
	<fieldset>
		<legend>Input Types</legend>
    <label>Name: <input type='text' id = 'name' name = 'name'></label>
    		
    <label>Email: <input type='email' name = 'email'> </label>

    <label>Password: <input type='password' name = 'pass'></label>
        
    	Radio Buttons<br/>

    <label><input type="radio" name="sex" value="male" checked>Male</label>

    <label><input type="radio" name="sex" value="female">Female</label>

        Checkboxes<br/>

    <label> <input type="checkbox" name="contact1" value="Bike">Contact me via email</label>

    <label> <input type="checkbox" name="contact2" value="Bike">Contact me via phone</label>
    		
    <label>Number: <input type="number" name="numberInput" min="1" max="5"></label>

    <label>Range: <input type="range" name="rangeInput" min="1" max="10"></label>

    <label>Color: <input type="color" name="colorInput" min="1" max="10"></label>

    <label>Date: <input type="date" name="dateInput"></label>

    <label>URL: <input type="url" name="urlInput"></label>

    <input type = 'submit' value = "Click Here">
  </fieldset>
</form>

Difference between name&id&value?

name是用来和server交互的，暂时还不会，和后端的php有关;id是用来和js交互的，getElementById(“id”);value就是它本身的值啊~！

SIMPLE VALIDATING

Pattern 链接->
Limitting Number

<form>
 zip code with pattern: <input type="text" name="zip_codeP" pattern="[0-9]{5}" required><br/> //pattern
 
 zip code with numbers: <input type="number" name="zip_codeN" min ="00000" max = "99999" required><br/> //limitting number
<input type="submit">
</form>

Checkbox VS Radiobutton

Checkbox allow users to choose mutiple choices,can share the same name;

Radiobutton allow users to choose only one choice and can share the same name too;

<form>  
  Favorite Foods<br/>
  <label><input type="checkbox" name="food"  value = "pizza"> Pizza</label><br/>
  
  <label><input type="checkbox" name="food" value="Chips" >Chips</label><br/>
  
  Sex<br/>
  <input type="radio" name="gender" value = "male">Male<br/>
  
  <input type="radio" name="gender" value="female">Female<br/>
  
  <input type = "submit">
</form>

WEEK FOUR

Given the HTML and CSS code for a form with both shipping and billing information, write the JavaScript that can set and clear the fields in Billing Information.

The code is provided here

Goals:

Add the JavaScript code needed to enable auto-complete on this form. Whenever the checkbox is checked, the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip. If the checkbox is unchecked, the Billing Name and Billing Zip should go blank.

My homework is shown here

My javascript codes are as follows:

//My goal is to achieve the auto-complete and auto-hide on ths form;
function billingFunction(){
	var checkbox=document.getElementById("same");
	if(checkbox.checked){
		document.getElementById("billingName").value=document.getElementById("shippingName").value;
		document.getElementById("billingZip").value=document.getElementById("shippingZip").value;
	}
	else {
		document.getElementById("billingName").value="";
		document.getElementById("billingZip").value="";
	}
}

This work is licensed under a CC A-S 4.0 International License.

学习笔记(一)：JavaScript(1)

Learn JS via cosera