Getting Started with JavaScript

At first, often stuck thinking, or the realization of the idea is not concise. The process of learning is a process of accumulation, knocking more see more experience naturally have, the experience of large projects said, the minimum knowledge mastery proficiency, and then expand up quickly. Now chew to object-oriented, take a few days off, go back to think about what you learned before, re-remember the forgotten, will learn new things, or have never wanted to understand the problem suddenly understood.

Write my JavaScript introductory experience today:

What do I do before I write a JavaScript program?

1) write structure + style, HTML + CSS

2) Find out how to implement it

3) Start writing JavaScript again

And just started to write the program, it is important to write side test, so that the timely detection of errors.

For example, we want to leave an element out of our sight.

The steps to write this JavaScript effect:

1, first realize the layout;

2, find the principle of implementation:

1, Display:none; Show as none, element does not exist in page

2, Visibility:hidden; Keep elements hidden, elements still present, document flow

3, Width\height is zero

4. Change the transparency

5, through the positioning to change left/top

6. Take a white div cover

7, margin negative

Wait a lot.

3. Learn about JavaScript syntax:

how to get elements in JavaScript :

1) based on ID name: #div1 {}

var odiv = document.getElementById ("Div1");

2) According to the label name:

(Can be combined with the ID in CSS, class to understand)

Li {}

var aLi = document.getelementsbytagname ("Li");

#ul1 Li {}

var Oul = document.getElementById (' ul1 ');

var aLi = oul.getelementsbytagname (' li ');

UL Li {}

var Oul = document.getelementsbytagname (' ul ') [0];

Even if there is only one element on the page, AUl is also getting a set of

var aLi = oul.getelementsbytagname (' li ');

Events: Mouse events, keyboard events, system events, form events, custom events

OnClick onmouseover onmouseout onmousedown onmouseup onmousemove ...

OnLoad executes after loading ...

Window.onload = Event

Img.onload

Body.onload

Iframe.onload

How to add an event:

Elements. Event

Function: Can be understood as a command, to do something

Function name ABC () {/// functions within any code must not be actively executed

......

}

How to make a function execute

1, direct call: ABC ();

2, Event invocation: element. event = ABC;  (Odiv.onclick = ABC; Note here that you do not add parentheses because you see the function name is not equal to the parentheses of the call execution)

3.

function () {} anonymous functions

element. event = function () {}

Test:

Alert (1); A warning box with a OK button

Alert (' OK '); Write your own words are quoted, single quote double quotation marks can be

Alert ("OK");

alert (Otext.value); No quotes

----------------------------------------------------

A function call with a name:

Direct call: Fn1 ();

Event invocation: Obj.onclick = fn1;

anonymous function call:

Direct invocation: (function self-executing)

(function () {alert (345);}) ()

~function () {alert (567);} ();

!function () {alert (789);} ();

+function () {alert (980);} ();

Event Invocation:

Obj.onclick = function () {alert (123);};

Window.onload = function () {}; All the code in the window is loaded and then executed

Property Operation :

Property = Property Name + Property value

Read operation (GET): element. Property name

Write operation (change-first clear original, add new content): element. Property name = new value

1 var odiv = document.getElementById (' div1 '); 2 // Read 3 4 function () {5     // write (empty first, add after) 6 }; 7 // If the event is bound to the element, those events will be emptied.

In the property operation []:

var odiv = document[' getElementById '] (' div1 ');

obtn[' onclick '] = function () {

Some things to note in JavaScript operations:

1) not allowed in JavaScript--------to capitalize the first letter of the following word

2) Some things not to be judged

A condition that cannot be judged:

1. Relative path

IMG SRC

A href= "1.html"

2. Color value

color:red; #f00 RGB (255,0,0)

3, InnerHTML in the lower version of the browser will appear compatibility issues

/*

ODiv.style.width = ' 200px ';

ODiv.style.height = ' 200px ';

ODiv.style.background = ' red ';

*/

Odiv.style. csstext = ' width:240px; height:220px; Background:yellow; ';

1 varOdiv = document.getElementById (' Div1 '));2 3ODiv.style.height = ' 200px ';4ODiv.style.background = ' Red ';5 //the above is based on the original style, add or modify6 7ODiv.style.cssText = ' height:220px; Background:yellow; ';8 //take out the original style width, then add the inline style9 Tenalert (ODiv.style.cssText);//' width:200px ' OneODiv.style.cssText + = ' height:220px; Background:yellow; '; A //continue adding new styles to the original style with Csstext

There are 3 differences in the two methods of getting elements :

document.getElementById (' id '); static method; Find an element; The front can only be document

document.getElementsByTagName (' Li '); dynamic method; Find a set of elements; The front can be a document or an element, like an array but not an array, is a collection of elements, although not arrays but with the properties of the array: oul.length length; OUL[0] array access mode;

Just use the Bytagname method to add []

The dynamic method is that the element can be acquired when it is not present, although it cannot be found but does not error, but can only be obtained and cannot be manipulated. Elements are added dynamically in the program, and elements can be manipulated when the element is found.

 1  var  abtn= document.getElementsByTagName ("input"); //  2  alert (abtn.length); // 0  3  Document.body.innerHTML = ' <input type= ' button ' value= ' button/><input Type= "button" value= "buttons"/><input type= "pushbutton" value= "button"/> ' 4  alert ( Abtn.length); // 3  5  Abtn[0].onclick = function  () {//  event can be added on  6  alert (0); 7 } 

getElementsByTagName This method can manipulate a bunch of elements without IDs, but can only write abtn[0]abtn[1]abtn[2] so it leads to a for loop :

1) Execute some code repeatedly; 2) each time the execution, there is a number in the change;

Execute Sequential Walk method

1) var i = 0;

2) i<3; The essential

3) Execute all the code inside the brackets

4) i++

First 1, then always 234, until the condition jumps out of the loop

var i = 0;

for (; i < 3;) {

alert (i);

i++;

}//Another notation

for (var i = 0; i < 3; i++) {alert (i);//0,1,2}

alert (i); 3

/* The code will continue to execute only after the for loop is fully executed. */

/* When nesting for loops with a for loop, each layer of loops must be represented by a different variable. */

For loop application: Repeat something, and each time you execute it, a number will change.

This keyword :

This: Refers to the object that invokes the current method (function).

Window.alert ();

Window.fn1 (); Just call FN1 () like this; This means window.

Summary:

function fn1 () {

This

}

1) fn1 (); This=>window

2) Odiv.onclick = FN1; This=>odiv

3) Odiv.onclick = function () {this fn1 ();} this=>odiv; FN1 () in This=>window

4) <div onclick= "This fn1 ();" ></div> this refers to Div;fn1 () in This=>window//seldom wrote like this

Custom properties, index values

ABTN[0].ABC = 123;

JavaScript can add any custom attribute to any HTML element and can read and write operations.

Standard properties: ClassName width Height style

Custom properties: When you write your own code, it is not a standard attribute, as defined by the desired attribute.

I'm going to write this down and have supper.

Getting Started with JavaScript