Home > Developer > Web Develop
First, the output statement
1,alert: Pop-up warning box (with very few, the user experience is not good)
Full wording: Window.alert ("execution statement");
Window objects, Windows, general conditions can be omitted
alert (123);
2, consoleconsole output (user cannot see)
Generally used for testing
Console.log (); Console output, normal output statement
Console.warn (); Console alert
Console.error (); Error hints
3,document.write (); document printout, displayed directly in the document
Document object, not omitted
Get Object method:
document.getElementById ("demo");
Second, the variable
1. Variable name must begin with letter, underscore, dollar sign $
2. cannot have spaces in variable names
3, multiple variable declaration: var num=1,num=2,num=3;
4. Variables are divided into global variables and local variables
Global variables:
1 . Variables declared at the outermost layer
2, inside the function body, but not declared Var is also a global variable
Local variables:
Variables declared inside the body of a function
local variables take precedence over global variables . If the function is not called, execution can be skipped.
III. Events
Event three elements: event source , event , event handler
Event Source: The object to trigger
Events: Mouse Events
Event handlers: What happened
Event source. Event =function () {event handler}
To hide an event:
Display:none; Hide the non-occupying position
Visibility:hidden; Hide Occupy position
Overflow:hidden; Hide the excess part
Entry function:window.onload=function () {
Internal JS Code
}//After the page is loaded, execute the JS section
Example of Baidu skin change:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Baidu Skin Change effect</title>6 <style>7 *{8 margin:0;9 padding:0;Ten } One Body{ A background:URL ("images/1.jpg") Top center; - } - . Box{ the Height:200px; - background:Rgba (255,255,255,.3); - text-align:Center; - Padding-top:50px; + } - . Box img{ + cursor:Pointer; A } at </style> - <Script> - window.onload=function(){ - varPic1=document.getElementById ("Pic1"); - varPic2=document.getElementById ("Pic2"); - varpic3=document.getElementById ("pic3"); in Pic1.onclick=function(){ - Document.body.style.backgroundImage="URL (images/1.jpg)"; to } + Pic2.onclick=function(){ - Document.body.style.backgroundImage="URL (images/2.jpg)"; the } * Pic3.onclick=function(){ $ Document.body.style.backgroundImage="URL (images/3.jpg)";Panax Notoginseng } - } the </Script> + </Head> A <Body> the <Divclass= "box"> + <imgsrc= "Images/1.jpg"alt=""width= "Max"ID= "Pic1"> - <imgsrc= "Images/2.jpg"alt=""width= "Max"ID= "Pic2"> $ <imgsrc= "Images/3.jpg"alt=""width= "Max"ID= "PIC3"> $ </Div> - </Body> - </HTML>
Operating effect:
Day 22nd: JS change style effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
