1.js可以在<head><body>或外部,需要包裹在<script></script>中

<script src="myScript.js"></script>

2.js输出

   操纵HTML元素

1 <body>
2 <h1>我的第一张网页</h1>
3 <p id="demo">我的第一个段落</p>
4 <script>
5     document.getElementById("demo").innerHTML="我的第一段js";   
6 </script>
7 </body>
8 </html>

   写到文档输出

   document.write("<p>我的第一段js</p>")  ;

   注意： 

  请使用 document.write() 仅仅向文档输出写内容。

  如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

 1 body>
 2 <h1>我的第一张网页</h1>
 3 <p id="demo">我的第一个段落</p>
 4 <button onclick="myfunction()">点击这里</button>
 5 <script>
 6 function myfunction(){
 7     document.write("<p>我的第一段js</p>");  
 8 }
 9 </script>
10 </body>

3.js语句

  区分大小写

  忽略多余空格

  折行：反斜杠\

document.write("Hello \
World!");

4.js注释

 单行//

 多行/*  */

5.js数据类型

 字符串，数字，布尔，数组，对象，null，undefined

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

字符串可以使用单引号或双引号，可以在字符串中使用引号，只要不匹配包围字符串的引号即可

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

js数组

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"];

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

js对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

空格和折行无关紧要。声明可横跨多行：

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

undefined和null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

声明变量类型

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

6.js对象

属性+方法

内建属性：length

内建方法：

txt.indexOf()

txt.replace()

txt.search()

创建js对象

var objectname-new Object();

7.js函数

语法：

function functionname()
{
这里是要执行的代码
}

带参数的函数

function myFunction(var1,var2)
{
这里是要执行的代码
}

调用

myFunction(argument1,argument2)

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推

<button onclick="myfunction2('Tom','CEO')">点击这里</button>
<script>

function myfunction2(name,job){
	alert("welcome"+name+",the"+job);
}
</script>

带有返回值的参数

在使用 return 语句时，函数会停止执行，并返回指定的值

var x=myfunction2('Tom','CEO');

<button onclick="myfunction()">点击这里</button>
function myfunction(){  
 document.getElementById("demo").innerHTML=myfunction2('Tom','CEO');
}
function myfunction2(name,job){
    alert("welcome"+name+",the"+job);
    var x=5;
    return x;
}

 在您仅仅希望退出函数时 ，也可使用 return 语句。

8.js运算符

用于字符串的+符号

+ 运算符用于把文本值或字符串变量加起来（连接起来）。

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

如果把数字与字符串相加，结果将成为字符串。


<script type="text/javascript">
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
</script>

9.js比较和逻辑运算符

条件运算符

10.js  if...else语句 switch语句

         for for/in while do.while..       

1 var person={fname:"John",lname:"Doe",age:25};
2 
3 for (x in person)
4 {
5 txt=txt + person[x];
6 }

11.break语句

break 语句可用于跳出循环。

break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：

continue语句

 continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

js标签

 break 和 continue 语句仅仅是能够跳出代码块的语句

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块

标签语法：

label:语句

用法:break labelname;

        continue labelname;

12.JS错误

try...catch..语句

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

try{

//测试代码

}catch(){

//处理错误

}

 1 function message(){
 2     try{
 3        alllert("welcome guest!");
 4     }catch(err){
 5        txt="there is an error on this page.\n\n";
 6        txt+="ERROR descriptio:"+err.message+"\n\n";
 7        txt+="click OK to continue.\n\n";
 8        alert(txt);
 9     }
10 <button onclick="message()">View message</button>

throw语句  允许自定义错误，常与try...catch...连用

 1 function mine(){
 2      try{
 3         // alert("hi~");
 4         var x=document.getElementById("test").value;
 5         if(x=="")
 6             throw "empty";
 7         if (isNaN(x))
 8             throw "not a number";
 9         if (x>10) {throw "too big";}
10         if (x<5) {throw "too small";}
11 
12      }catch(err){
13       var y=document.getElementById("mess");
14       y.innerHTML="Error "+err+".";
15      }
16 }
17 <h1>My First Js</h1>
18 <p>Please input number netween 5 and 10</p>
19 <input type="text" id="test"><br/>
20 <button type="button" onclick="mine()">Text input</button>
21 <p id="mess"></p>

13.表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

必填或必选项目

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type="text/javascript">
function validate_form(thisform){
    with (thisform){
        if (validate_required(email,"Email must be filled out!")==false)
        {
            email.focus();
            return false;
        }
    }
}
function validate_required(field,alerttxt){
    with(field){
        if (value==null||value==""){
            alert(alerttxt);
            return false;
        }
        else{
            return true;
        }
    }
}

</script>
<form action="http://www.baidu.com" onsubmit="return validate_form(this)" method="post">
Email:<input type="text" name="email" size="30">
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>

email

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <script type="text/javascript">
 8 function validate_form(thisform){
 9     with (thisform){
10         if (validate_required(email,"Email must be filled out!")==false||validate_email(email,"not a validate email")==false)
11         {
12             email.focus();
13             return false;
14         }
15     }
16 }
17 function validate_required(field,alerttxt){
18     with(field){
19         if (value==null||value==""){
20             alert(alerttxt);
21             return false;
22         }
23         else{
24             return true;
25         }
26     }
27 }
28 function validate_email(field,alerttxt){
29      with(field){
30          apos=value.indexOf("@");
31          dotpos=value.lastIndexOf(".");
32          if(apos<1||dotpos-apos<2){
33              alert(alerttxt);
34              return false;
35          }
36      }
37 }
38 </script>
39 <form action="http://www.baidu.com" onsubmit="return validate_form(this)" method="post">
40 Email:<input type="text" name="email" size="30">
41 <input type="submit" name="submit" value="Submit">
42 </form>
43 </body>
44 </html>