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>