javascript
1. 用法
HTML中的脚本不许放置在<script></script>标签之间
脚本可放置在HTML页面中的<body></body>和<head></head>标签之间
```
//<script></script>标签之间
<script>
alert("hello , world!")
</script>
//<body></body>标签之间
<!DOCTYPE html>
<html>
<head>
<title>timu</title>
<meta charset="utf-8">
</head>
<body>
<script>
document.write("<h1>标题1</h1>");
</script>
</body>
</html>
//<head></head>标签之间
<!DOCTYPE html>
<html>
<head>
<title>timu</title>
<meta charset="utf-8">
<script>
function firstFunc(){
document.getElementById("demo").innerHTML="第一个JavaScript函数"
}
</script>
</head>
<body>
<p id="demo">段落</p>
<button type="button" onclick="firstFunc()">点击</button>
</body>
</html
```
javascript在HTML页面中可以放在上述标签中，这样不便于维护，因此引入了，使用这样的方式把所有JavaScript代码放置在JS扩展名文件中，使用scr引入，一般放置在中。
2. 输出
四种输出：
1. window.alert()弹框
2. document.write()写入HTML文档
3. innerHTML写入HTML元素中
4. console.log()写入浏览器控制台
实例
```
//window.alert()弹框
<!DOCTYPE html>
<html>
<head>
<title>timu</title>
<meta charset="utf-8">
</head>
<body>
<script>
window.alert(1+1);
</script>
</body>
</html>
//document.write()写入HTML文档
<!DOCTYPE html>
<html>
<head>
<title>timu</title>
<meta charset="utf-8">
</head>
<body>
<script>
document.write("<h1>标题1</h1>");
</script>
</body>
</html>
//innerHTML写入HTML元素中
//操作元素需要使用document.getElementById(id)方法
<!DOCTYPE html>
<html>
<head>
<title>timu</title>
<meta charset="utf-8">
</head>
<body>
<p id="demo">段落</p>
<script>
document.getElementById("demo").innerHTML="大段落";
</script>
</body>
</html>
//console.log()写入浏览器控制台
//使用浏览器打开开发者工具在console上可以查看相关内容
<!DOCTYPE html>
<html>
<head>
<title>timu</title>
<meta charset="utf-8">
</head>
<body>
<script>
a = 1;
b = 2;
c = a + b;
console.log(c);
</script>
</body>
</html>
```
3. 变量
JavaScript使用 var x = 1;这种方式声明变量
```
<!DOCTYPE html>
<html>
<head>
<title>timu</title>
<meta charset="utf-8">
</head>
<body>
<script>
var x = 1;
window.alert(x);
</script>
</body>
</html>
//也可以声明多个变量
<!DOCTYPE html>
<html>
<head>
<title>timu</title>
<meta charset="utf-8">
</head>
<body>
<script>
var x = 1 ,y = 1;
window.alert(x+y);
</script>
</body>
</html>
```
4. 数据类型
JavaScript数据类型有：
1. 字符串String
2. 数字Number
3. 布尔值Boolean
4. 数组Array
5. 对象Object
6. 空Null
7. 未定义Undefined
```
<!DOCTYPE html>
<html>
<head>
<title>timu</title>
<meta charset="utf-8">
</head>
<body>
<script>
var x ;//x 未定义 x为undefined
var x = 5 ;//x 为数字number
var x = "MR" ;//x 为字符串string
var x = true ;//x 为布尔值boolean(true)
var x = flase ;//x 为布尔值boolean(flase)
var x = new Array("html","css","javascript");//x 为数组array
var x = ["html","css","javascript"];//x 为数组array
var x = {
name:"wang",
id : 1997
};//x 为对象
</script>
</body>
</html>
```
数字Number
四舍五入 Math.round(number)
向下取整 Math.floor(number)
向上取整 Math.ceil(number)
特殊值 Infinity正无穷 -Infinity负无穷 NaN非数字
字符串String
字符串转义字符
| 转义字符 | 含义 |
|---|---|
| \b | 退格符 |
| \t | 水平制表符 |
| \n | 换行符 |
| \f | 换页符 |
| \|反斜线 | |
| \’ | 单引号 |
字符串拼接
加号对于数字类型进行加法运算，对于字符串进行拼接
字符串属性
length 返回创建字符串属性的函数
constructor 返回字符串的长度
prototype 允许您向对象添加属性和方法
```
<!DOCTYPE html>
<html>
<head>
<title>timu</title>
<meta charset="utf-8">
</head>
<body>
<script>
var x = 'hello';
var y = 'world'
window.alert(x+y);
x.length; //字符串长度
x.charAt(0); //获取第一个字符
x.charAt(x.length-1); //获取最后一个字符
x.slice(1,2); //获取第2-3字符
</script>
</body>
</html>
```
对象Object
创建方式
```
var x = {};//没有属性的对象
var y = {
"name" : 'wang',
"sex" : 'man',
like : {
first : "javascript",
second : "html" //当属性值是对象时，属性名可以不加引号
}
};
var x = new Object();
var x = Object.create({x:1,y:1});
```
对象属性查询设置
通过(.)或者([])获取值
```
var y = {
"name" : 'wang',
"sex" : 'man',
};
var name = y.name
var sex = y["sex"]
y.yead = 10 ;//给y添加 yead
y["sex"] = "woman";//给sex赋值
//如果查询一个不存在的内容会返回undefined
//删除属性
delete y.name;
```
检查属性 in(),hasOwnPreperty()和propertyIsEnumerable()
```
var a = { x : 1};
"x" in a;//true x是a的属性
"y" in a;//flase x不是a的属性
a.hasOwnPreperty("x");//true a存在x属性
a.y = 2 ;
a.propertyIsEnumerable("y");//true
//也可以使用!==undefined判断是否存在
a.x!==undefined;//true
a.b!==undefined;//flase
```
数组Array
创建
```
var p = [];
var p = [1,2,3,4,5];
var p = new Array();
```
读写
用[]访问数组中的元素
```
var p = ["hello"];
p[0]; //"hello"读取第一个元素
p[1]="world"; //写入第二个元素 "world"
```
添加
数组添加方式之前我用的是索引添加的方法，也可以使用push()添加
```
var p =[];
p.push("hello","world");
```
删除
使用delete
```
var p = [1,2,3,4];
delete p[1];//删除索引1的内容
```
遍历数组
```
var p = [1,2,3,4,5,6];
for(var i = 0;i<p.length;i++){
var value = p[i];
};
p.forEach(function(value,index){
console.log(index + ':' + value);
});
b = p.map(function(x){
return x;
});
```
方法
```
var p =[1,2,3,4];
p.join(); //1,2,3,4数组转化成字符串进行拼接,不写参数默认逗号(,) p.join("-"),1-2-3-4
var a =[1,2,3,4];
a.reverse(); //颠倒顺序[4,3,2,1]
var b =[1,2,3,4];
b.sort(); //排序
var c =[1,2,3,4];
c.slice(0,2); //返回[0,1]
var d =[1,2,3,4];
d.splice(2);//返回[4],p = [1,2,3]
var e = [];
e.push(1,2);//e = [1,2] 返回新数组长度2
e.pop();//e = [1] 返回删除值2
//unshift()和shift()这两方法与push()，pop()方法类似
var f = [];
f.unshift(1);//f = [1] 返回新数组长度1
f.unshift(2);//f = [2,1] 返回新数组长度2
f.shift;//f = [1] 返回删除值2
var g = [1,2,3,4];
g.toString();//返回'1,2,3,4'
```
5. 函数
可重复执行的代码块。
定义函数使用function
```
<!DOCTYPE html>
<html>
<head>
<title>timu</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
alert(5);
}
</script>
</body>
</html>
```
函数的参数
```
function myFunction(name,job){
alert("hello " + name + "," + job)
}
//调用
<button onclick="myFunction("wang","web")">点击这里</button>
```
返回值 return
```
function myFunction(){
var x = 1;
return x;
}
var y = myFunction();//y = 5
```
实际参数和形式参数
在function muFunction(a,b){return a*b}; 调用muFunction(1,2);
a,b作为形式参数，用于占位，
调用函数使用1,2数值是实际参数
函数属性、方法、构造函数
length属性 获取实际参数的数量
callee属性 返回当前正在指向的函数
caler属性 返回调用当前正在执行函数的函数名称
6. 作用域
局部作用域和全局作用域
“`
function myfunction(){
var x = 1;//局部变量 只能在函数内部调用 函数外部不能使用 函数参数也是局部变量
console.log(x);
}；
var y = 1;//全局变量
function myfunction1(){
console.log(y);//
}
“`
生命周期
局部变量在函数执行完毕后销毁
全局变量在网页关闭后销毁
- 事件
HTML事件是发生在HTML元素上的事情
HTML页面中使用JavaScript时，JavaScript也可以触发这些事件
常见事件
onchange HTML元素改变
onclick 点击HTML元素
onmouseover 在HTML元素上移动鼠标
onmouseout 从HTML元素上移开鼠标
onkeydown 按下键盘
onload 浏览器已完成页面的加载
8. 运算符
= 赋值
+ 加法运算
- 减法运算
* 乘法运算
/ 除法运算
% 取摸(余数)
++ 自增
– 自减
<p> y=1 计算x=y++，显示结果<p>
<button onclick="func()">显示结果</button>
<p id="demo"></p>
<script>
function func(){
var y = 1;
var x = y++;
var demoP=document.getElementById("demo");
demoP.innerHTML="x=" + x + ",y=" + y;
}；
</script>
<!-- xy值都会受到影响 -->赋值运算符
= x=y
+= x+=y
-= x-=y
<p> x=1 和 y=1, 计算 x+=y, 显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x=1;
var y=1;
x+=y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>逻辑运算符
设x=1
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
| == | 等于 | x==1 | true |
| === | 值和类型全部相等 | x===”1” | false |
| != | 不等于 | x!=2 | false |
| !== | 值或类型不相等 | x!==”1” | true |
| > | 大于 | x>2 | false |
>= | 大于或等于 | x>=1 | true |
| < | 小于 | x<4 | true |
| <= | 小于或等于 | x<=0 | false |
| && | and 同时满足返回true | (x < 2 && x < 10) | true |
| or 满足一个返回true | |||
| ! | not 非 | !(x=1) | false |
9. 语句
循环语句
while
语法
while(条件){
需要执行的代码块;
}; 实例
while(i<3){
x = x + "数字是" + i "<br>";
i++;
}; do-while
语法
do{
需要执行的代码;
}
while(条件)； 实例
do{
x = x + "数字是" + i "<br>";
i++;
}
while(i<3); for
语法
for(循环变量=初始值;循环条件;递增/递减计数器){
循环代码块;
}; 实例
for(var i =0;i<10;i++){
document.write(i+"<br>");
}; for(语句1;语句2;语句3){}
语句1语句2语句3都可以不写内容。但是必须要在代码块中写出条件不然for语句不成立
for-in
实例
var pa ={name : "wang",like : "js"};
for(x in pa){
txt = txt + pa[x];
}; 利用for while遍历数组
casea=["AAA","BBB","CCC"]；
var i = 0;
for(;case[ai];){
document.write(casea[i]+"<br>");
i++;
};
while(casea[i]){
document.write(casea[i]+"<br>");
i++;
}
跳转语句
return
终止函数体,返回一个值
function fi(){
x=1;
return x;
}
```
break
跳出循环,跳出后会继续执行该循环之后的代码;
for(i=0;i<10;i++){
if(i==3){
break;
}
x = x + "数值为" + i + "<br>";
};
continue
中断循环中的迭代,如果出现了制定的条件,然后继续循环中的下一个循环
for(i=0;i<10;i++){
if(i==3) continue;
x = x + "数值为" + i + "<br>";
}
选择语句
if
流程控制语句,有条件的执行语句
语法
if(条件){
当条件是true时执行的代码块
};
if(条件){
当条件是true时执行的代码块
}else{
当条件是false时执行的代码块
}；
实例
var time = 1;
if(time<2){
document.write("2");
};
if(time<2){
document.write("3");
}else{
document.write("1");
};
实例
if(条件1){
当条件1是true时执行的代码块;
}else if(条件2){
当条件2是true时执行的代码块;
}else{
条件1和条件2都不是true 时执行的代码块;
};
var time = 4;
if (time<10){
document.write("<b>早上好</b>");
}else if (time>=10 && time<16){
document.write("<b>今天好</b>");
}else{
document.write("<b>Hello World!</b>");
};
switch
语法
swith(n){
case 1:
执行代码块1
break;
case 2:
执行代码块2
break;
default:
n与case 1 和case 2不同时执行的代码块;
};
在case 1这里做判断的是"==="运算符,而不是"=="运算符.
switch在执行过程中每一个case都必须要执行下去,执行时间长.
实例
var x;
var d=new Date().getDay();
switch (d)
{
case 0:
x="今天是星期日";
break;
case 1:
x="今天是星期一";
break;
case 2:
x="今天是星期二";
break;
case 3:
x="今天是星期三";
break;
case 4:
x="今天是星期四";
break;
case 5:
x="今天是星期五";
break;
case 6:
x="今天是星期六";
break;
};
document.write(x);
default关键词
default 关键词来规定匹配不存在时做的事情：
var x;
var d=new Date().getDay();
switch(d){
case 6:
x="今天是星期六";
break;
case 0:
x="今天是星期日";
break;
default:
x = "今天不是周日也不是周六";
};
document.write(x);
异常处理语句
JavaScript错误
当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误。
JavaScript抛出错误
当错误发生时,当事情出问题时,JavaScript引擎通常会停止,并生成一个错误消息。
描述这种情况的技术术语是：JavaScript 将抛出一个错误。
try
语句测试代码块的错误
catch
语句处理错误
通常 try 和 catch 是成对出现的。
try{
//在这里运行代码
}catch(err){
//在这里处理错误
}
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>learn JavaScript</title>
<script>
var txt = "";
function message() {
try {
aleart("Welcome guest!");
} catch (err) {
txt = "本页有一个错误。\n\n";
txt += "错误描述：" + err.message + "\n\n";
txt += "点击确定继续。\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>
throw
语句创建自定义错误
创建或抛出异常(exception)
throw exception
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>learn JavaScript</title>
<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) {
var y = document.getElementById("mess");
y.innerHTML = "错误：" + err + "。";
}
}
</script>
</head>
<body>
<h1>我的第一个 JavaScript</h1>
<p>请输出一个 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="mess"></p>
</body>
</html> finally
后期处理
配合try catch使用
try{
//通常这里的代码会从头执行到结束而不会产生任何问题,但是有时候会抛出一个异常 要么由throw语句抛出,要么通过调用一个方法间接抛出
}catch(e){
//当try抛出异常后才会执行这里的代码,通过局部变量e来获取ERROR对象或抛出的其他值的引用,这里的代码可以处理这个异常,也能忽略这个异常,还能通过throw重新抛出异常
}finally{
//不管try是否抛出异常,这里的逻辑总会执行,终止try语句块的方式：1)正常终止;2)break,continue或return;3)抛出异常,异常被catchc截取进行处理;4)抛出异常,异常没有截取,继续向上传播
}
类似 var x; function myfunction1(){}…等等也属于语句
在写各类语句的时候一定要使用括号包裹内容,避免解释器解释错误,导致歧义
10. 正则
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式.
语法
/pattern/modifiers;使用字符串方法
search() 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置。
replace() 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串。
test() 用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回true，否则返回 false。
var name = "wang!"
var x = name.search(/w/i)
//返回0
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "www");
var res_1 = str.replace("microsoft","www")；
//返回Visit www
```
11. 表单验证
---
必填(必选)
function validateForm(){
var x=document.forms[“myForm”][“fname”].value;
if (x==null || x==”“){
alert(“必须填写姓名”);
return false;
}
};
“`
邮箱验证
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
alert("不是一个有效的 e-mail 地址");
return false;
}
};
<form name="myForm" action="demo-form" onsubmit="return validateForm();" method="post">
Email:
<input type="text" name="email">
<input type="submit" value="提交">
</form>
6692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
