JS基础笔记
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
-------------------在页面加载时向 HTML 的 <body> 写文本-------------------------------------------------------
<script>
document.write("<h1>This is a heading</h1>"); -- 输出
document.write("<p>This is a paragraph.</p>"); --输出
</script>
浏览器会按照编写顺序来执行每条语句。
您只能在 HTML 输出流中使用 document.write。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
-------------------------点击“点击这里”按钮弹窗----------------------------------------------------------------
<body>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('Welcome!')">点击这里</button>
</body>
--------------------改变 HTML 元素的内容--------------------------------------------------------
<html>
<body>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
--------------------改变 HTML 图像-----------------------------------------------------------------
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
</body>
-----------------------改变 HTML 颜色-----------------------------------------------------------
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") --找到元素
x.style.color="#ff0000"; -- 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
-----------------------验证输入-----------------------------------------------------------
<body>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text"> --输入框
<script>
function myFunction()
{
var x=document.getElementById("demo").value; --获取到输入框里的值
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
-----------------------点击调用head中的js 来更改body处相对应的内容-------------------------------------------
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
---------------------------点击调用body中的js 来更改body处相对应的内容--------------
<body>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本
---------------------------------------------------------------------------------------------------------------
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
--提示：外部脚本不能包含 <script> 标签。
<body>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script type="text/javascript" src="/js/myScript.js"></script>
</body>
---------------------------------换行---------------------------------------------------------------
<script>
document.write("Hello \
World!");
</script>
------------------------------定义变量-------------------------------------------------------------
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
在 JavaScript 中，对象是拥有属性和方法的数据。
<body>
<script>
var x=2;
var y=3;
var z=2+3;
document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>
</body>
----------------------------声明变量--------------------------------------------------
您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
var name="Gates", age=56, job="CEO";
声明也可横跨多行：
var name="Gates",
age=56,
job="CEO";
---------------------------------------------------------------------------------------------------------------
var carname=null; --输出为空或null
var carname; --输出为undefined
您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
例:
--字符串
var answer="Nice to meet you!"; --Nice to meet you!
var answer="He is called 'Bill'"; --He is called 'Bill'
var answer='He is called "Bill"'; --He is called "Bill"
---数值
var x1=36.00; --36
var x1=36.01; --36.01
var x2=36; --36
var y=123e5; --12300000
var z=123e-5; --0.00123
----数组
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):
--对象
<body>
<script>
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
document.write(person.lastname + "<br />");
document.write(person["firstname"] + "<br />");
</script>
</body>
--对象方法
<script>
var txt = "Hello";
document.write(txt.length); --变量长度
document.write(txt.indexOf("e")); --查找字符的索引
document.write(txt.replace("e","E")); --替换对应的字符
document.write(txt.search("lo")); --查找字符串首尾的索引 或 字符的索引
var x=txt.toUpperCase(); --转大写
document.write(x);
</script>
--对象属性
<script>
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>
--声明新变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
-----传参方式：加单引号
<body>
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
--------------------------------------------------------------------------------------------
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
---------------------------JS算数运算符-----------------------------------------------
+加 -减 *乘 /除 %取余 ++累加 --递减
---------------------------JS赋值运算符-----------------------------------------------------
=等于 += 加等 -=减等 *=乘等 /除等 %=取余
---------------------------JS比较运算符-----------------------------------------------------
==等于 ===全等（值和类型） !=不等于 >大于 <小于 >=大于或等于 <=小于或等于
---------------------------JS逻辑运算符-----------------------------------------------------
&& and ||or ! not
---------------------------JS三目运算符-----------------------------------------------------
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
---------------------if else--------------------------------------------------------------
在 JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
获取当前时间：var time=new Date().getMonth() 月份+1
//.getDate() 日
//.getHours()时
//.minutes() 分
//.getSeconds()秒
//.getDay() 星期0~6 （周日到周六）
---------------------循环--------------------------------------------------------------
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
--for1
for (var i=0,len=cars.length; i<len; i++)
{
document.write(cars[i] + "<br>");
}
--for2
var i=2,len=cars.length;
for (; i<len; i++)
{
document.write(cars[i] + "<br>");
}
--for3
var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + "<br>");
i++;
}
--For in
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
--While
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
-- do while
do
{
需要执行的代码
}
while (条件);
--比较 for 和 while
--for
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
document.write(cars[i] + "<br>");
i++;
}
--while
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
document.write(cars[i] + "<br>");
i++;
}
-----break,Continue
break 跳出循环；Continue结束本次、继续下次循环
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
-----------------JavaScript 错误 - Throw、Try 和 Catch-------------------------------------------
--------try{}catch(){}
<html>
<head>
<script>
var txt = "";
function message(){
try{
adddlert("Welcome guest!");
}catch(err){
txt ="There was an error on this page. \n\n";
txt +="Error description:"+err.message+"\n\n";
txt +="Click ok to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View Message" onclick="message()">
</body>
</html>
-----------Throw
<html>
<body>
<script>
function myFunction(){
try{
var x = document.getElementById("demo").value;
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "数字太大";
if(x<5) throw "数字太小";
if(x>=5&&x<=10) throw "填写正确";
}catch(err){
var y = document.getElementById("mess");
y.innerHTML = "Throw："+err+"。";
}
}
</script>
<h1>输入验证程序：</h1>
<p>请输入5到10之间的数字：</p>
<input id = "demo" type = "text">
<button type="button" onclick = "myFunction()">测试输入值</button>
<p id = "mess"></p>
</body>
</html>
-------------------JavaScript 表单验证----------------------------------------------------------
----必填（或必选）项目(假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：)
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt){
with(field){
if(value==null||value==""){
alert(alerttxt);
return false
}else{
return true
}
}
}
function validate_from(thisform){
with(thisform){
if(validate_required(emaill,"Email must be filled out!")==false){
emaill.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="submit" value="Submit">
</form>
</body>
</html>