1. Single line comments start with //. (note: HTML comment tag is <!-- My comment -->)
You can declare JavaScript variables with the var keyword:
var x=5;
2. Put Javascript functions in the head section, this way they are all in one place, and they do not interfere with page content. Both the body and the head section are also fine. External script is also fine.
<script type="text/javascript" src="myscript.js"></script>Example:
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
</body>
</html>
3. If Statement
if (condition)
{
code to be executed if condition is true
}
example:
<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>
4. alert box: alert("sometext");
example:
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
<input onclick="show_alert()" type="button" value="Show alert box" />
5. confirm box: confirm("sometext");
example:
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
6. Prompt Box
prompt("sometext","defaultvalue");
example:
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
<input type="button" onclick="show_prompt()" value="Show prompt box" />
7. For...In Statement
for (variable in object)
{
code to be executed
}
8. JavaScript Events
By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.
The onLoad and onUnload events are triggered when the user enters or leaves the page.
The onFocus, onBlur and onChange events are often used in combination with validation of form fields.
example:
<input type="text" size="30" id="email" onchange="checkEmail()">
The onSubmit event is used to validate ALL form fields before submitting it.
example:
8. Javascript data function:
<script type="text/javascript">
function today(){
var today = new Date();
alert("Today is "+ today);}
</script>
<input type="button" onclick="today()" value="today" />
9. Javascript Math: floor(), min(),max(),randon()
example:
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(16);
10. Example: Convert Celsius to Fahrenheit
<script type="text/javascript">
function convert(degree)
{
if (degree=="C")
{
F=document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value=Math.round(F);
}
else
{
C=(document.getElementById("f").value -32) * 5 / 9;
document.getElementById("c").value=Math.round(C);
}
}
</script>
<p></p><b>Insert a number into one of the input fields below:</b></p>
<form>
<input id="c" name="c" onkeyup="convert('C')"> degrees Celsius<br />
equals<br />
<input id="f" name="f" onkeyup="convert('F')"> degrees Fahrenheit
</form>
Insert a number into one of the input fields below:
No comments:
Post a Comment