JavaScript学习笔记一
一、JS实现
需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
Script标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
二、JS输出
1、操作HTML元素
如需从JavaScript访问某个html元素，可以使用document.getElementById(id) 方法，"id" 属性来标识 HTML 元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph.</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>
JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id="demo" 的 HTML 元素，并把它的内容（innerHTML）替换为 "My First JavaScript"。
2、写到文档输出
<script> document.write("<p>My First JavaScript</p>"); </script>
document.write()仅仅向文档输出写内容，如果在文档已完成加载后执行document.write，整个 HTML 页面将被覆盖。
ps:JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
三、JS变量
1、JavaScript变量
- 用于存放值和表达式
- 变量以字母或$或_开头
- 变量名称对大小写敏感
2、声明JavaScript变量
var carname;
3、JavaScript数据类型
JavaScript的数据类型有：字符串、数字、Boolean、数组、对象、Null、Undefined
创建数组：
var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo";
创建JavaScript对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
var person=
{
firstname : "Bill",
lastname : "Gates",
id : 5566
};
document.write(person.lastname + "<br />");
document.write(person["lastname"] + "<br />");
</script>
</body>
</html>
4、局部和全局JavaScript变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
注意：如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
四、JS函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript函数语法：
function myFunction(var1,var2) { 这里是要执行的代码 }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
</html>
五、JS错误
当JavaScript错误发生时，JavaScript引擎通常会停止，并产生一个错误消息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是我的第一个JavaScript项目</title>
</head>
<body>
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
</body>
</html>
六、JS验证
JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证，包括：
- 用户是否已填写表单中的必填项目
- 用户输入的邮件地址是否合法
- 用户是否已输入合法的日期
- 用户是否在数据域中输入了文本
必填项目：
<!DOCTYPE html>
<html>
<head>
<script>
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);
return false
}
else
{
return true
}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{
email.focus();
return false
}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
E-mail验证:
输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{
alert(alerttxt);
return false
}
else
{
return true
}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{
email.focus();
return false
}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
