JS基础使用
基础语法
- JS忽略出现的空格、制表符、空格
- JS中分号是可选的，如果一行只有一句代码，是可以忽略这个分号的
- JS是区分大小写的
JS中单行注释用
//多行注释用/*...*/JS可以识别html注释的开始部分<!--但不能识别html注释的结尾部分-->//对于js代码我们可以这样写，在不支持js的浏览器中节省我们的代码 <!--
var1 = 10
//-->
不支持js的警告信息
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript>
//对于不支持或者没开启js功能的浏览器会在屏幕上显示这航信息
Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>
JS代码位置
HTML网页的...HTML网页的...HTML网页的...和...- 外部文件.js文件,并引用在...中
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
JS变量
1.数据类型有
1). 数值类型(未区分整数和浮点数，均用64位浮点格式表示)
2). 字符串类型
3). 布尔类型 true 或者 false
- 使用
var声明变量 必须先声明在使用 - JS变量是对大小写敏感的
运算符
- 算术运算符 +、-、*、/、%、++、--
- 比较运算符 ==、!=、>、<、>=、<=
- 逻辑运算符 &&、||、！
- 位运算符 &、|、、~、<<、>>(按最高位进行补位)、>>>(左边补零移位)
- 赋值运算符：=、+=、-=、*=、/=、%=
- 条件运算符： ？:
- typeof运算符：返回类型的字符串
If...Else
<script type="text/javascript">
<!--
var book = "maths";
if( book == "history" ){
document.write("<b>History Book</b>");
}else if( book == "maths" ){
document.write("<b>Maths Book</b>");
}else if( book == "economics" ){
document.write("<b>Economics Book</b>");
}else{
document.write("<b>Unknown Book</b>");
}
//-->
</script>
Switch Case
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}
while循环
while(expression){
statement
}
do{
statement
}while(expression);
for循环
for(initialize;test condition;iteration statement)
{
statement;
}
for in循环
for (variablename in object){
statement
}
将对象的属性作为参数变量来实现循环
循环控制
break
提前结束整个循环
continue
立即开始下次循环
使用标签来控制流
一个标签可以被用于 break , continue 语句去更精确地控制流
在js1.2之后,标签是一个标识符后跟一个冒号,应用于声明或代码块。
continue或break语句以及其标签的名字之间不允许有换行符。标签名称和其后循环体之间也不应有任何其他语句
<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (vari = 0; i< 5; i++)
{
document.write("Outerloop: " + i + "<br />");
innerloop:
for (var j = 0; j < 5; j++)
{
if (j > 3 ) break ; // Quit the innermost loop
if (i == 2) break innerloop; // Do the same thing
if (i == 4) break outerloop; // Quit the outer loop
document.write("Innerloop: " + j + " <br />");
}
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
函数
定义函数
使用函数关键字function
//定义函数
<script type="text/javascript">
<!--
function functionname(parameter-list)
{
statements
}
//-->
</script>
调用函数
<script type="text/javascript">
<!--
sayHello();
//-->
</script>
函数参数
<script type="text/javascript">
<!--
function sayHello(name, age)
{
alert( name + " is " + age + " years old.");
}
//-->
</script>
<script type="text/javascript">
<!--
sayHello('Zara', 7 );
//-->
</script>
return 语句
<script type="text/javascript">
<!--
function concatenate(first, last)
{
var full;
full = first + last;
return full;
}
//-->
</script>
<script type="text/javascript">
<!--
var result;
result = concatenate('Zara', 'Ali');
alert(result );
//-->
</script>
事件
onclick事件类型
当用户点击鼠标左按钮
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
onsubmit事件类型
尝试提交一个表单，可以用此事件类型进行表单验证，
<html>
<head>
<script type="text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>
<body>
//当表单中加上 onsubmit="return false" 可以阻止表单提交
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>
onmouseover 和 onmouseout
onmouseover 事件发生时,当你把你的鼠标在任何元素上时， onmouseover 事件发生。当你把鼠标从该元素移开时，onmouseout 事件发生
Cookies
写入cookies
document.cookie = "key1=value;key2=value2;expires=date";
//写入cookie
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
if( document.myform.customer.value == "" ){
alert("Enter some value!");
return;
}
cookievalue= escape(document.myform.customer.value) + ";";
document.cookie="name=" + cookievalue;
alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
</body>
</html>
读取cookies
document.cookie 对象的值就是 Cookie 的属性值,document.cookie 字符串会保存一系列用分号分开的 name = value 键值对
<html>
<head>
<script type="text/javascript">
<!--
function ReadCookie()
{
var allcookies = document.cookie;
alert("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++){
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
alert("Key is : " + name + " and Value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<input type="button" value="Get Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>
设置cookies有效日期
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>
删除cookies
删除一个 Cookie，从而下次尝试读取 Cookie 信息时会返回一个空值，可以设置 Cookie 的有效生存时间为过去的某个时间的即可。
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>