Summarize the knowledge points and questions that JavaScript has learned so far

Source: Internet
Author: User
Tags time and seconds

The knowledge points and questions that JavaScript has learned so far

The first chapter:

1.1 JavaScript the application

1) Manipulate animation effects by learning mouse events: OnClick (click event), onmouseover (mouse on), onmouseout (mouse off).

2) control page element CSS style by learning JS syntax.

    1. JavaScript can be written directly to the HTML output stream.
    2. JavaScript can respond to events.
    3. JavaScript can change the content and style of HTML elements.

1.2 JavaScript the characteristics

1) Learn about the features of JavaScript. Like what

    1. Explanatory: C language is compiler.
    2. Object based: What is an object?
    3. Event-driven: Onclick,onmouseover, onmouseout, etc.
    4. Cross-platform: only browser-related.
    5. Security: Access to the local hard disk is not allowed and network documents cannot be modified or deleted.

1.3 Preliminary study JavaScript

1) Learn to write the JS process.

    1. Layout: HTML and CSS.
    2. Style: Modifies the style of the page element, div1 the display style.
    3. Event: Determine what action the user is doing.
    4. Write JS: In the event, use JS to modify the style of the page elements
    5. Rationale: Respond to user actions and style changes to page elements

Real Column 1:

Analysis: To change the contents of an HTML element by defining a function MyFunction.

Question 1: Why does the X=document.getelementbyid ("demo") of x not use the var definition still work? Solution: First define better ~

Real column 2:

Question 2: Why does script write into body still work? Solution: Write Anywhere, preferably written above

Chapter II:

2.1 The composition of JavaScript

Consists of three parts, ECMAScript, BOM, and Dom.

2.2 variable type, variable type explicit, implicit conversion

Use closures, variable scopes, variable types, explicit and implicit conversions of variable types to do an example

2.3 operator %

Real Column 1:

Color stripe flag (application of Operation Futiumo)

Analysis: Using the Window.onload=function () page to load a color banner,

Using the loop, JS control element color to the odd sequence and even sequence without the effect of color.

2.4 Switch , Break , Continue , Jason , True and False

Analysis: Switch, break, continue and Java in the use of the same, can be Lenovo.

Jason is the object's meaning; By looping, the Jason Array achieves a single continuous output

Real column 2:

2.5 variable parameters, extracting non-inline styles, array basics

Analysis:

Real Column 3:

1. Variable parameter arguments

By defining a function sum, the incoming number is in a. Using the arguments array to achieve the added result, the return result equals 1+2+3=6

Real Column 4:

A. Different number of parameters, function execution function is different

Analysis: Define a Gsstyle function, in window: Use Gsstyle () to pass in 2 parameters "BackgroundColor" "#f00", function Gsstyle () specific operation (equivalent to backgroundcolor.style= "#f00" Turn the body's div blue into red.

B. Extract the non-inline style. getComputedStyle (CHROME+FF) Many compatibility issues can be resolved.

Real Column 5:

Such as

Currentstyle in IE it is the object, Google is underfinder, so need to getcomputedstyle to deal with compatibility issues.

    1. Array modification

Defines an array of var arr= "1,2,3,4,5"

Arr.push (9); add a number at the end of the array 9

Arr.unshift (0); add a number to the top

Arr.concat (BRR); implementing 2 arrays of connections

Arr.pop (); Delete and return the first element of the array

Arr.sort (); sort the array elements

Such as:

Arr.splice (); Delete the element and add a new element to the array

Tosourse the array into a string and returns the result,

More please self Baidu Oh.

Chapter III:

Main application: Timer, dynamic timer, QQ

1) For timer operation, there are 2 timers,

    1. SetInterval (function name, time), it has intermittent, intermittent time is determined by the user input time. (Common)

such as: SetInterval (show,1000);//1s

2.setTimeout (function name, time), it has a delay,

If you can define VAR timer=settimeout () First, it is easy to use

3. Clear Timer: Clearintervar (timer name);

Real Column 1:

Analysis:

By defining 2 buttons, the Input property is a button and controls 2 button actions that pop up the prompt box every 3 seconds.

When you click Btn1: Obtn1.onclick=function ()

{Otimer=setinterval (function () {alert ("a");},3000);

};//Click the "Start" button to pop up the prompt every 3 seconds

When you click Btn2: Obtn2.onclick=function () {

Clearinterval (Otimer);

}//Click "Stop" button, timer off, no longer pop-up prompt box

2) Dynamic Timer

Real column 2:

Effect:

Analysis:

    1. Import 6 numbers in body
    2. function Todbl (num) {

if (num<10) return "0" +num;

else return "" +num;

Do this first, for the subsequent occurrence of the time array to pave, if it is single digit in the 0 in front, "010203" effect.

3.

A) define VAR aimage=document.getelementsbytagname ("img"); control all the pictures

b) Define a function tick , and construct the value of the SRC attribute of the image tag to determine which image to use for each bit of time and seconds

c) var odate=new date ();D ate China standard Time, before use new ~

D) var str=todbl (odate.gethours ()) +todbl (Odate.getminutes ()) +todbl (Odate.getseconds ()); get time Division seconds

e) for (Var i=0;i<aimage.length;i++) {aimage[i].src= "image/" +str.charat (i) + ". jpg";} is compatible and does not try Str[i]. Change the picture by time

Question 1:

Define VAR aimage=document.getelementsbytagname ("img"); When you control all the pictures, the HTML has only 6 images

The i<aimage.length in the loop is i<6;. Str.charat (i) is through time to get pictures, the maximum is only 5, how to get more than 6 of the Picture it????

Solution:

The problem is that the meaning of Str.charat (i) is not understood correctly,

CharAt (i) gets the number of digits, such as "012759", when I=0 is, gets the number of the first digit, by str

f) setinterval (tick, 1000); set the timer to call the Tick function every second to build the SRC attribute value of the picture

g) tick (), in order to handle the 6-bit time when the page loads, the full 0 is displayed, first call

3) QQ

Real Column 3:

Analysis: Defines 2 Div,

Div2 out when the mouse is on the div1.

The Div2 delay disappears when the mouse is removed from the DIV1

When the mouse is placed on the DIV2, clear the timer, DIV2 does not disappear

Div2 delay disappears when mouse div2 is removed

The fourth chapter:

Main content offsetleft, scrolling effect, easy calendar, tab

1) Offsetleft: all left margin

Parse: This represents the object of the current operation

Application: SetInterval (function () {

var Odiv=document.getelementbyid ("Div1");

odiv.style.left=odiv.offsetleft+10+ "px";},30);

Scrolling effect can be achieved by changing its left margin + timer

2) Easy Calendar

Real Column 1:

Effect:

    1. By body build up UL and 12 and Li define a total div to load all, the following text one with H2, one with P
    2. Design Styles in CSS

A) to use the float to make Li arrange

b) If the following English with P instead of directly with Li, you need to use the definition of CSS p{Cursor:pointer} means to set the mouse out when the style of P and the above H text style

c) If the English with the P-loaded, do not write p positioning, otherwise the English will not come out

3. In JS

A) define a var arr=[' Month activity Schedule 1 ' *12,. ] Put up all the text and make him color

b) otxt.innerhtml= '

innerHTML is a string that sets or gets the HTML that is located at the beginning and the accepted label of the object;

c) this.classname= ' active '; The current Li CSS style is processed as active, using loops, click on events 12 months, initialize, activities and other steps to achieve the resume calendar.


Summarize the knowledge points and questions that JavaScript has learned so far

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.