JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script> 标签
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript
JavaScript 操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">我的第一个段落</p> <script> document.getElementById("demo").innerHTML="我的第一个JavaScript"; // .innerHTML 可以插入信息到HTML文档中 </script> </body> </html>
下面介绍一种document.write()， 可以向文档输出内容。
但是需要注意的是：如果在HTML文档已完成加载后再执行document.write(), 整个HTML页面都将被覆盖。就是说document.write()用于在整个HTML文档，输出内容将覆盖之前加载好的HTML页面。
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <button onclick="myFunction()">尝试一下</button> <script> function myFunction() { document.write("噢！文档消失了。"); } </script> </body> </html>
下面这种情况除外，因为document.write()是与其他标签一起被加载到HTML页面的。而上面的document.write()是在HTML文档加载之后被调用，document.write()覆盖掉了原来HTML页面
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <script> document.write("<p>我的第一个 JavaScript</p>"); </script> </body> </html>
JavaScript 变量
与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
声明（创建） JavaScript 变量
var carname; // 声明变量 var carname="Volvo"; // 声明变量 且 赋值
一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
JavaScript 数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
<script> // JavaScript 字符串 var answer="It's alright"; var answer="He is called 'Johnny'"; var answer='He is called "Johnny"'; // JavaScript 数字 var x1=34.00; var x2=34; var y=123e5; var z=123e-5; // JavaScript 布尔 var x=true; var y=false; // JavaScript 数组 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; // 或者声明和赋值一起 var cars=new Array("Saab","Volvo","BMW"); // 或者 var cars=["Saab","Volvo","BMW"]; // JavaScript 对象 var person={ firstname : "John", lastname : "Doe", id : 5566 }; // 访问对象 document.write(person.lastname + "<br>"); // 输出 Doe document.write(person["lastname"] + "<br>"); // 输出 Doe // Undefined 和 Null var person; var car="Volvo"; document.write(person + "<br>"); // 输出 undefined document.write(car + "<br>"); // 输出 Volvo var car=null document.write(car + "<br>"); // 输出 null </script>
JavaScript 对象
创建 JavaScript 对象
<script> var person=new Object(); person.firstname="John"; person.lastname="Doe"; person.age=50; person.eyecolor="blue"; </script>
访问对象的属性
objectName.propertyName var message="Hello World!"; // 创建一个字符串对象 var x=message.length; // 访问字符串对象属性
访问对象的方法
objectName.methodName() var message="Hello world!"; var x=message.toUpperCase();
JavaScript 函数
JavaScript 函数语法
function functionname() { 执行代码 }
调用带参数的函数
// 格式 myFunction(argument1,argument2) function myFunction(var1,var2) { 代码 }
带有返回值的函数
function myFunction() { var x=5; return x; }
JavaScript 表单验证
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用Javascript来验证其正确性：
- 验证表单数据是否为空?
- 验证输入是否是一个正确的email地址?
- 验证日期是否输入正确?
- 验证表单输入内容是否为数字型?
必填（或必选）项目
<html> <head> <script> function validateForm() { var x=document.forms["myForm"]["fname"].value; // 根据form name 找到表单，得到表单的值 if (x==null || x=="") { alert("姓必须填写"); return false; } } </script> </head> <body> <form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post"> 姓: <input type="text" name="fname"> <input type="submit" value="提交"> </form> </body> </html>