The first glance at Javascript

 

> Where to place Javascript

Javascript can be placed in the head or body or referenced externally.

HTML embedded Javascript

<script type="text/javascript">
//Write a "Good afternoon" greeting if
//the time is larger than 12
var d=new Date()
var time=d.getHours()
if (time>12) {
    document.write("<b>Good afternoon</b>");
}
</script></body>
 
External Reference Javascript

Put. js files in the website directory, which usually stores scripts in sub-directories, making it easier to manage and maintain them.
However, from the perspective of performance, either method should be put at the end of the html body as much as possible, so that loading JavaScript will block the entire HTML page loading.
> Values/types
Booleans:True/False
Numbers:1,1.0
Strings:"ABC",'Abc'
Functions:
    function twice(x) {        return 2 * x;    }    console.log(twice(4)); // 8
Objects:
var obj = {        propName1: 123,        propName2: "abc"};obj.propName1 = 456;obj["propName1"] = 456; // same as previous statement
Arrays:
var arr = [true, "abc", 123];console.log(arr[1]); // abcconsole.log(arr.length); // 3
Undefined
Null
> Condition Control
If-else if-else: 

<script type="text/javascript">var d = new Date();var time = d.getHours();if (time<10){    document.write("<b>Good morning</b>");}else if (time>10 && time<16){   document.write("<b>Good day</b>");}else{   document.write("<b>Hello World!</b>");}</script>
 
Switch-case
<script type="text/javascript">//You will receive a different greeting based//on what day it is. Note that Sunday=0,//Monday=1, Tuesday=2, etc.var d=new Date();theDay=d.getDay();switch (theDay) {   case 5:     document.write("Finally Friday")     break   case 6:     document.write("Super Saturday")     break   case 0:     document.write("Sleepy Sunday")     break   default:     document.write("I'm looking forward to this weekend!")}</script>
 
> Cyclic control
 For Loop:
<script type="text/javascript">var i=0;for (i=0;i<=10;i++){    document.write("The number is " + i);    document.write("<br />");}</script>
While:
<script type="text/javascript">var i=0while (i<=10){    document.write("The number is " + i);    document.write("<br />");    i=i+1;}</script>
 
Do-while:
<script type="text/javascript">var i=0while (i<=10){    document.write("The number is " + i);    document.write("<br />");    i=i+1;}</script>
 
For... in:
<script type="text/javascript">var x;var mycars = new Array();mycars[0] = "Saab";mycars[1] = "Volvo";mycars[2] = "BMW";for (x in mycars){    document.write(mycars[x] + "<br />");}</script>
 
Break-continue:
<script type="text/javascript">var i=0;for (i=0;i<=10;i++){    if (i == 3){       break;    }    if(i == 4){        continue;    }    document.write("The number is " + i);    document.write("<br />");}</script>
 
> Event
Onload/onUnload:
Onload is triggered when the page is imported, while onUnload is triggered when the page is exited.
Onfocus, onblur, and onchange:
Usually they work together to verify the form.
Onsubmit
Used to verify all form fields before submitting a form.
Onmouseover and onmouseout
It is often used to create "dynamic" buttons.

 
> Error handling
Exception (try/catch, throw ):
<script type="text/javascript">
var txt=""
function message()
{
try
  {
    if(x>10) 
        throw "Err1"
    else if(x<0)
        throw "Err2"
  }
catch(err)
  {
      txt="Unexcepted error found\n\n"
      txt+="Description: " + err.description + "\n\n"
      txt+="Choose OK to continue.\n\n"
      alert(txt)
  }
}
</script>

 
Onerror:
 
> More materials:
Javascript: The good part
JavaScript programming style
JavaScript Memory leakage
Javascript W3C School
A quick overview of JavaScript
Major and minor JavaScript pitfalls and ecmascript 6