Home > Developer > JavaScript
0.1 <script> and </script> will tell JavaScript where to start and end.
The lines of code between <script> and </script> contain JavaScript:
Older instances may use the type= "Text/javascript" in the <script> tag. It is not necessary to do so now. JavaScript is the default scripting language in all modern browsers and HTML5.
0.2 scripts can be in the <body> or
It is common practice to put functions in the
<! DOCTYPE html>
<body><p id= "Demo" >a paragraph</p><button type= "button" onclick= "MyFunction ()" >try it</button><script>function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}</script></body><! DOCTYPE html><script>function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}</script><body><p id= "Demo" >a paragraph</p><button type= "button" onclick= "MyFunction ()" >try it</button></body>We put JavaScript at the bottom of the page code so that we can make sure that the script is executed after the <p> element is created.
Replace the A paragraph with the My first JavaScript Function when you click the button
0.3 annotation is the same as C language
0.4 in JavaScript, concluding sentences with semicolons are optional.
0.5 JavaScript is case-sensitive. The function getElementById is different from the getElementById.
0.6 When you assign a text value to a variable, enclose the value in double or single quotation marks.
1 text document.write ("
2 Reminder Box <script type= "Text/javascript" >
Function message ()
{
Alert ("The cue box is called through the OnLoad event. ")
}
</script>
<body onload= "message ()" >
Confirmation box
function Show_confirm ()
{
var r=confirm ("Press a button!");
if (r==true)
{
Alert ("You pressed ok!");
}
Else
{
Alert ("You pressed cancel!");
}
}
Prompt box
function Disp_prompt ()
{
var name=prompt ("Please enter your name", "Bill Gates")
if (name!=null && name!= "")
{
document.write ("Hello! "+ name +" How was your day? ")
}
}
Warning boxes are often used to ensure that users can get some information. When the warning box appears, the user needs to click the OK button to continue the operation. Alert ("Text")
The confirmation box is used to enable users to verify or accept certain information. When the confirmation box appears, the user needs to click the OK or Cancel button to continue the operation. If the user clicks Confirm, then the return value is true. If the user clicks Cancel, the return value is false. Confirm ("text")
The prompt box is often used to prompt the user to enter a value before entering the page.
When the prompt box appears, the user needs to enter a value and then click the Confirm or Cancel button to continue the manipulation.
If the user clicks Confirm, then the return value is the value entered. If the user clicks Cancel, the return value is null.
Prompt ("text", "Default value")
3 Call External JS, external scripts cannot contain <script> tags.
<script src= "/js/example_externaljs.js" ></script>
4 Get the key value through the ID value of the demo, output to the value of Carname in HTML
document.getElementById ("Demo"). Innerhtml=carname;
5 functions
5. 1 with the parameter
<script type= "Text/javascript" >
function MyFunction (TXT)
{
Alert (TXT)
}
</script>
<body>
<form>
<input type= "button" onclick= "MyFunction (' Hello! ') "value=" Call function ">
</form>
6 Error Alarm
The Try statement allows us to define a block of code that performs error testing at execution time.
The catch statement allows us to define a block of code that executes when a try block of code has an error.
The JavaScript statement try and catch are paired occurrences.
<! DOCTYPE html>
<script>
var txt= "";
Function message ()
{
Try
{
Adddlert ("Welcome guest!"); /alert Write wrong
}
catch (Err)
{
Txt= "There was a error on this page.\n\n";
txt+= "Error Description:" + err.message + "\ n";
txt+= "Click OK to continue.\n\n";
alert (TXT);
}
}
</script>
<body>
<input type= "button" value= "View message" onclick= "message ()" >
</body>
7 image Map
<script type= "Text/javascript" >
function WriteText (TXT)
{
document.getElementById ("desc"). Innerhtml=txt
}
</script>
<body>
<map name= "Planetmap" id= "Planetmap" >
<area shape= "Circle" coords= "180,139,14"
Onmouseover= "WriteText (' until the 1960s, Venus has been considered the twin sister of the Earth, because Venus is the closest planet to us, but also because of the many common characteristics of both. ‘)"
href = "/example/html/venus.html" target = "_blank" alt= "Venus"/>
<area shape= "Circle" coords= "129,161,10"
Onmouseover= "WRITETEXT" is very difficult to study mercury from Earth, because it is always close to the sun. ‘)"
href = "/example/html/mercur.html" target = "_blank" alt= "Mercury"/>
<area shape= "rect" coords= "0,0,110,260"
Onmouseover= "WriteText (' the sun and gaseous planets like Jupiter are the largest objects in the solar system so far. ‘)"
href = "/example/html/sun.html" target = "_blank" alt= "Sun"/>
</map>
<p id= "desc" ></p>
</body>
8 Infinite Timings
function Timedcount ()
{
document.getElementById (' txt '). value=c
C=c+1
T=settimeout ("Timedcount ()", 1000)//1000 display once for 1s
}
If you want to stop, just add a function and empty the value.
function Stopcount ()
{
c=0;
SetTimeout ("document.getElementById (' txt '). Value=0", 0);
Cleartimeout (t);
}
Show time
<script type= "Text/javascript" >
function StartTime ()
{
var today=new Date ()
var h=today.gethours ()
var m=today.getminutes ()
var s=today.getseconds ()
Add a zero in front of numbers<10
M=checktime (M)
S=checktime (s)
document.getElementById (' txt '). innerhtml=h+ ":" +m+ ":" +s
T=settimeout (' StartTime () ', 500)
}
function Checktime (i)
{
if (i<10)
{i= "0" + i}
return I
}
</script>
<body onload= "StartTime ()" >
<div id= "TXT" ></div>
</body>
9 Creating an Object template
<script type= "Text/javascript" >
function person (firstname,lastname,age,eyecolor)
{
This.firstname=firstname
This.lastname=lastname
This.age=age
This.eyecolor=eyecolor
}
Myfather=new person ("John", "Adams", "Black")
document.write (Myfather.firstname + "age is" + Myfather.age + "years old.) ")
</script>
JavaScript Preliminary understanding
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
