js学习笔记--基本概念

http://www.w3school.com.cn/js/js_howto.asp


1 、基本概念
脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript" 。现在已经不必这样做了。 JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
<body> 中的 JavaScript
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
JavaScript 函数和事件
通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。 脚本可位于 HTML <body> <head> 部分中,或者同时存在于两个部分中。 通常的做法是把函数放入 <head> 部分中,或者放在页面底部。
 
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()" >Try it</button>
</body>
</html>
 
外部的 JavaScript
外部 JavaScript 文件的文件扩展名是 .js 。如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
 
 
2 js 语句
语句使用分号隔开的,代码块位于 {} 内。
j s 注释与 java 注释一致。
JavaScript 对大小写是敏感的。
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:
document.write("Hello \
World!");
JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
3 js 变量
变量名称
变量必须以字母开头
变量也能以 $ _ 符号开头(不过我们不推荐这么做)
变量名称对大小写敏感( y Y 是不同的变量)
JavaScript 语句和 JavaScript 变量都对大小写敏感。
数据类型 :包括多个数据类型。 当您向变量分配文本值时,应该用双引号或单引号包围这个值。
变量声明
格式: var 变量名称;
声明时可以不赋值,也可以赋值。不赋值时默认为  undefined
重新声明 JavaScript 变量,该变量的值不会丢失
例如:
在以下两条语句执行后,变量 carname 的值依然是 "Volvo"
var carname="Volvo";
var carname;
一条语句可以对应多个变量。
您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:
var name="Gates", age=56, job="CEO";
声明也可横跨多行:
var name="Gates",
age=56,
job="CEO";
 
4 、对象
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数 .Jav aScript 提供多个内建对象,比如 String、Date、Array 等等。
此外, JavaScript 允许自定义对象。
创建新对象有两种不同的方法:
定义并创建对象的实例
实例
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
实例
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
  使用函数来定义对象,然后创建新的对象实例
实例
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
function changeName(name)
{
this.lastname=name;
}
}
JavaScript for...in 循环
JavaScript for...in 语句循环遍历对象的属性。
语法
for ( 对象中的变量 )
  {
   要执行的代码
  }
实例
循环遍历对象的属性:
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person)
  {
  txt=txt + person[x];
  }
 
 
5 js 消息框
可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
警告框 语法: alert(" 文本 ")
确认框 语法: confirm(" 文本 ")
提示框 语法: prompt(" 文本 "," 默认值 ")
6 js 函数
函数就是包裹在花括号中的代码块,前面使用了关键词 function
function functionname ( argument1 , argument 2 ... )
{
这里是要执行的代码
}
 
7 、循环
JavaScript 支持不同类型的循环:
for  - 循环代码块一定的次数
for/in  - 循环遍历对象的属性
遍历数组
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
遍历对象属性(输出 BillGates56
<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
 
for (x in person)
{
txt=txt + person[x];
}
 
document.getElementById("demo").innerHTML=txt;
}
</script>
 
while  - 当指定的条件为 true 时循环指定的代码块
do/while  - 同样当指定的条件为 true 时循环指定的代码块
continue 语句(带有或不带标签引用)只能用在循环中。
break 语句(不带标签引用),只能用在循环或 switch 中。
通过标签引用, break 语句可用于跳出任何 JavaScript 代码块:
 
8 、错误处理
try   语句测试代码块的错误。
catch   语句处理错误。
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 "太小";
}
catch(err)
{
document.getElementById("mess".innerHTML="错误:" + err + "。";
}
}
</script>
 
<h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入值</button>
<p id="mess"></p>
 
</body>
</html>
 
9 、表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
JavaScript 验证的这些典型的表单数据有:
用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域 (numeric field) 中输入了文本?
必填(或必选)项目
下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false ,否则函数的返回值则为 true (意味着数据没有问题):
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}
下面是连同 HTML 表单的代码:
<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_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 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说,输入的数据必须包含 @ 符号和点号 (.) 。同时, @ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:
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}
}
}
下面是连同 HTML 表单的完整代码:
<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>
 

10、常用内置对象

(1) 、字符串
String 对象用于处理已有的字符块。
创建  String  对象的语法:
new String( s );
String(
String( s );
参数
参数   s   是要存储在  String  对象中或转换成原始字符串的值。
返回值
String()  和运算符  new  一起作为构造函数使用时,它返回一个新创建的  String  对象,存放的是字符串   s     s   的字符串表示。
当不用 new  运算符调用  String()  时,它只把   s   转换成原始的字符串,并返回转换后的值。
 
(2) Date 对象
创建  Date  对象的语法:
var myDate=new Date()
 
(3) 、数组
创建  Array  对象的语法:
new Array();
new Array( size );
new Array(
new Array( element0 element1 ,...,  elementn );
 
: 当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。
 
(4) Boolean 对象
Boolean  对象表示两个值: "true"  "false"
创建  Boolean  对象的语法:
new Boolean( value );         // 构造函数
Boolean( value );                 // 转换函数
参数
参数   value   由布尔对象存放的值或者要转换成布尔值的值。
返回值
当作为一个构造函数(带有运算符  new )调用时, Boolean() 将把它的参数转换成一个布尔值,并且返回一个包含该值的  Boolean  对象。
如果作为一个函数(不带有运算符  new )调用时, Boolean() 只将把它的参数转换成一个原始的布尔值,并且返回这个值。
注释: 如果省略  value  参数,或者设置为  0 -0 null "" false undefined  NaN ,则该对象设置为  false 。否则设置为  true (即使  value  参数是字符串 "false" )。
 
(5) Ma th 对象

Math对象没有构造函数,直接使用其属性和方法就可以。

 11、计时

setTimeout()

语法

var t=setTimeout("javascript语句",毫秒)  (例如,vart=setTimeout("alert('5 seconds!')",5000) )

clearTimeout()

语法

clearTimeout(setTimeout_variable)  (例如,clearTimeout(t) 


猜你喜欢

转载自blog.csdn.net/chj97/article/details/72287186