JS基础语法简述

JavaScript是前端工程师用的不能再熟悉的一种脚本语言，主要是用户创建动态网页、与后端交互等。下面是我学习时整理的JavaScript基础语法

1.js基本常识

js命名规范：
1.一定要有意义，尽量用英文单词
2.不要以数字开头，不能使系统的关键字,不能使用运算符
3.注意大小写
大小写：
变量名和函数名 第一个单词 小写以后每个单词 首字母大写
对象 ： 每个单词首字母都要大写
分号：
结构定义语句后不加分号 if for while
功能执行语句一定要加分号 赋值等
变量：
变量声明后是浏览器关闭后才释放的，在没关闭之前可以随时使用

数据类型：
typeof(变量);

1.number (int float double) 注意：计算时还是按整形和浮点型分开使用
2.string (string char)
3.boolean
4.object(object array null) 使用时分别处理
5.undefined 没有声明变量
整数
var a=10;
var a=045;
var a=0Xff;
浮点数不能用等号进行判断
字符串'',""没有区别，所有的转义都可以使用，

2.函数

1.函数的作用 ---决定去不去使用
2.函数的参数 ---决定怎么用
3.返回值     ---决定调用后如何处理

a.函数组成：

1.函数名
2.参数：根据需要使用参数
3.函数体（功能）
4.返回值（可选）
注：函数名不加()时，这个函数名就代表整个函数。函数名可赋值给一个变量，那么这个变量就可以当作这个函数的函数名使用,也可以直接var test=function(){}

b.回调函数（参数中用到了函数）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
例：
	function demo(a,b,fun){
		return a+b+fun(a,b);
	}
	demo(1,2,test);
	function test(x,y){
		return 100+x+y;
	}
	
	也可以:
	demo(1,2,function(x,y){
		return x*y;
	});
	
	
	再者：
	functioin table(start,end,check){
		for(var i=start;i<end;i++){
			if(check(i)){
				document.write(i+'</br>');
			}
		}
	}
	//1.从这个函数中(10,500)取出3的倍数
	//2.从这个函数中(-200,200)取出负数
	table(10,500,function(num){
		if(num%3==0) return true;
		else return false;
	});

c.系统函数
系统函数中的global和window对象可以供程序员使用
escape(charstring)//为字符串进行编码.所有空格、标点、重音符号以及其他非ASCII
字符否用%xx编码代替，其中xx等于表示该字符的十六进制数
unescape(charstring) 与其用法一致但是是解码操作
isNaN(data)判断data是否为不是数字类型（NaN）
eval(codestring) 检查并执行代码

1
2
3
4
5
6
<script>
a="23.45";
var str='var f="'+a+'";if(!isNaN(f)){ var i=parseInt(f);}else{var i=0;}';
eval(str);
alert(1);
</script>

d.函数特性
d-1.js中函数外声明的变量即可看成全局变量
默认参数：

1
2
3
4
5
6
7
8
function test(a,b,c){
	a = a ? a : 1;
	b = b ? b : 2;
	c = c ? c : 3;
	alert(a+"-----"+b+"-----"+c);
}
test();

d-2.如果形参数大于实参数，那么函数内将把所有形参合成一个数组arguments

3.javascript对象

3.1 基本常识
a.基于对象的操作方式（面向对象封装、继承、多态）
b.将相关的操作使用一个对象完成，看作是一个整体
javascript——–php
对象————-类
对象实例 —–对象
c.对象包括：

字符串对象
数学对象
数组
事件对象

d.对象中存的内容：

   d.1、属性（变量）
   d.2、方法（函数）
都是和这个对象相关的

e.使用步骤：
e.1.找到对象
e.2.实例化对象
e.3.操作对象

f.实例对象

f.1对象实例：用'.'进行操作
f.2对象实例.属性 （取值，赋值）
f.3对象实例["属性名"]
f.4对象实例.方法（）；

如Date对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
	var dt=new Date();
	var str="今天是：";
	str += (dt.getYear()+1900)+"年";
	str += (dt.getMonth()+1)+"月";
	str += dt.getDate()+"日 ";
	str += dt.getHours()+":";
	str += dt.getMinutes()+":";
	str += dt.getSeconds()+" ";
	
	var	arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
	str += arr[dt.getDay()];
	document.write(str);
</script>

3.2自定义对象
a.方法一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
	function Play(){
		
	}
	var p = new Play();
	//属性
	p.width=300;
	p.height=200;
	p.num=4;
	p.autotime=3;
	//方法
	p.autoPlay=function(){
		alert("dsfdsfdsfdgf");
	}
	p.test=function(){
		
	}
	
	
	alert(p.width);
	p.autoPlay();
</script>

b.方法二：

1
2
3
4
function Play(){
									=》》》》》》var p = new Object();
	}
	var p = new Play();

c.方法三：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Play(){
	var p = new Object();
	//属性
	p.width=300;
	p.height=200;
	p.num=4;
	p.autotime=3;
	//方法
	p.autoPlay=function(){
		alert("dsfdsfdsfdgf");
		alert(p.num);//this.num,静态方法中无this
	}
	p.test=function(){
		
	}
	return p;
}
var p = new Play();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
	function Play(){
		var p = new Object();
		//属性
		p.width=300;
		p.height=200;
		p.num=4;
		p.autotime=3;
		//方法
		p.autoPlay=function(){
			alert("dsfdsfdsfdgf");
			alert(this.num);
		}
		p.test=function(){
			
		}
		return p;
	}
	
	var p = new Play();
	
	alert(p.width);
	p.autoPlay();
</script>

d.方法四：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//有this就得有对象
	function Play(width,height,num){
		this.width=width;
		this.height=height;
		this.num=num;
		this.autoPlay=function(){
			alert("###########");
		}
		this.test=function(){
			
		}
		return p;
	}
	
	var p = new Play(3000,200,8);
	
	alert(p.width);
	p.autoPlay();
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
遍历属性名(接上)：
	var pro="";
for(pro in p){
	alert(p[pro]);
}
with(对象st){
	所有方法如果不加对象都是st的方法
}
with(document){
	write("<table>");
}

3.3内置对象
a.Function对象：

1
2
3
4
5
<script>
var demo=new Function("x","y","return x+y");
demo=new Function("x","y","return x*y");
alert(demo(3,4));
</script>

b.String对象：

1
2
var str = new String("abcdefg");
var str = "abcdefg";

c.快速声明对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var p=new Object();
p.name="zhangsan";
p.age=10;
p.sex="nan";
/*
	json
	{属性1:值1,属性2:值2,属性3:值3,属性4:值4}
*/
var p={name:"zhangsan",age:10,sex:"nan"};
alert(p.name);
alert(p["age"]);
match()一般用于验证操作
Number对象：
alert(Number.MAX_VALUE);

d.静态对象：不创建对象的情况下直接用对象名访问

e.Math对象：
不要实例化，直接调用
如100以内随机数：

1
2
var num=Math.random()*100;
document.write(num+"<br>");

4.数组

数组的声明与应用
a、数组的作用:只要是批量的数据都需要使用数组声明
b、如何声明数组
4.1.快速声明数组的方法
var 数组名=[元素1,元素2,元素3,元素4];
其中的元素可以为另一个数组.
4.2.使用array对象

1
2
3
4
5
6
7
8
9
10
function MyArray(){
	this.length=arguments.length;
	for(var i=0;i<arguments.length;i++){
		this[i] = arguments[i];
	}
	
	this.sort=function(){}
	this.pop=function(){}
	this.push=function(){}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var arr = new Array("成员","成员","成员n");
var arr = new Array(10);
var arr=[1,5,3,4,2,9,8,7];
arr.sort(function(a,b){//可用此方法对函数进行重写
	if(a>b){
		return -1;
	}
	else if(a == b){
		return 0;
	}
	else{return 1};
});
document.write(arr);
var arr=["aaa","aaaa","aa","b","aaaaaaaa"];
//arr.push("wwww","yyyy");
//arr.pop();
//arr.unshift("hello");
arr.shift();
alert(arr);
alert(arr.length);
reverse();数组反转
join(s);数组转为字符串，'s'为连接符

c、遍历数组

d、数组的处理（内置处理方法）

5.DOM

作用：DOM(Document Object Model)
1.document 文档 HTML/XML文件 即标记语言
2.Object对象(HTML元素 转乘的对象(js对象))
注意：如果使用js操作HTML文档，就需要先将HTML文档中的结构转成js对象
a.操作属性
b.操作内容
5.1.innerText//里面的东西全以文本形式显示 obj.innerText=”brother“，
该属性火狐浏览器不兼容，可用textContent代替，用法相同
使用时可自己写一个方法,用document.all判断是否支持所有方法，即自己写个转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
		if(document.all){
			alert(document.all);
		}
		ffie(a,"wwww");
	alert(ffie(a));
	function ffie(obj,value){
		if(document.all){
			if(typeof(value)=="undefined"){
				return obj.innerText;
			}
			else obj.innerText=value;
		}else{
			if(typeof(value)=="undefined"){
				return obj.textContent;
			}
			else obj.textContent=value;
		}
}

5.2.innerHTML//里面的内容以HTML形式显示
使用时尽量使用innerHTML
5.3.outerText
5.4.outerHTML //3,4都包含自己本身的标签
表单
表单元素取值需要用

1
2
3
4
5
6
	**c.操作样式**
		对象.style.属性="";同时属性需要格式化，即"-"去掉，后面的单词首字母大写
---
		但有些属性无法从内联式样式中获取，此时用另一个属性即可 ， 如width/offsetWidth
---
		操作样式较多时，可添加className，className数量不限;将className清空即取消样式

        var pro="";
    for(pro in a){
        document.write("a."+pro+"="+a["pro"]+"<br>");
    }

可用此方法获取a标签中的所有属性
有了以上三点的操作之前先转成对象

```
转成对象的两种形式:
1.标记名(多个)、id(唯一)、name(多个)
document中的三个方法
var objs=document.getElementsByTagName(“div”);
var obj = document.getElementById(“one”);
var obj = document.getElementsByName(“two”);
2.通过数组获取
document.body;
document.title;
window.frames;

document.all;//所有的标记
document.embeds;//所有动画
document.scripts;//所有js脚本
document.applets;//所有Java脚本
document.forms;//所有图像
document.images;//所有表单
document.anchors;//所有的锚点
document.styleSheets;//所有的样式
document.links;//所有链接

有7种方式访问(02.html)

其各种操作按照对象操作原则，可以无限制的在js中添加属性
Model:
    一、将文档想成一个倒数，每一个部分（元素、内容、属性、注释）都是一个节点
    二、只要知道一个节点，按关系找到其他节点，
        父节点，                    parentNode
        子节点（第一个，最后一个）  childNode  firstNode  lastNode
        同胞节点 （上一个，下一个） nextSibling previousSibling
    三、找到节点：节点类型nodeType，节点名nodeName，节点值nodeValue
    nodeName属性含有节点的名称
    元素节点的nodeName是标签名称
    属性节点的nodeName是属性名称
    文本节点的nodeName是#text
    文档节点的nodeName永远是#document
注释：nodeName所包含的XML元素的标签名称永远是大写的
    对于文本节点，nodeValue属性包含文本
    对于属性节点，nodeValue属性包含属性值
    nodeValue属性对文档节点和元素节点时不可用的。
    nodeType属性克返回节点的类型

    元素类型                   节点类型
    元素                        1
    属性                        2
    文本                        3
    注释                        8
    文档                        9
    document.close()：关闭文档流
    注意：不能用输出的方式在已经结束的文档流中添加数据，此时可以动态创建节点完成操作+
    可以再一个文档流中：
    1.创建节点
        (在文本流中创建用document)document.createElement("");//只有一个文件中只能存在一个的节点不可创建
        appendChild();
        insertBefore();
    2.添加到文档流中
    3.删除节点
    removeChild();

d.事件处理：
一、事件源：任何一个HTML元素（节点），body，div，button，p,,a,h1…………
二、事件 ：你的操作

鼠标：
    click      单击
    dblclick        双击
    textcontentmenu(在body) 文本菜单
    contextmenu    //右键点击(06.html 2)
    mouseover    放上
    mouseout     离开
    mousedown     按下
    mouseup         抬起
    mousemove      移动

键盘：
    keypress  键盘事件   指数字字母键，其余键无效
    keyup      键盘抬起   
    keydown   按下          此时所有的键都可以取到

文档：
    load     加载   load中的内容在加载时最后执行(06.html 4)
    unload   关闭    关闭或切换页面时触发
    beforeunload    关闭之前

表单：
    focus   获得焦点事件
    blur     失去焦点事件
    submit   提交事件
    change   改变事件
其他事件：
    scroll    滚动事件
    selected  选择事件

三、事件处理程序
    有三种方法添加事件：
        1.格式：<tag on事件="事件处理程序"/>(05.html 1)
        2.
            <script>
                对象.on事件=事件处理程序(05.html 2)
            </script>
        3.<script for="事件源id" event="事件">
                事件处理程序
        </script>

    <body oncontextmenu="return false"></body>//可以屏蔽掉时间(06.html) 且必须用return false.用函数返回值的话要写成return tesat()
事件对象：event window.event
        属性：
            1.srcElement  //代表事件源对象
            2.keyCode          //时间发生时的键盘码  keypress keydown keyup
            3.clientX,clientY 
            4.screenX,screenY
            5.returnValue
            6.cancelBubble

6.浏览器对象

浏览器本身就有一些对象，不用创建即可使用
window : 当前浏览器窗体的

    属性：
        status
        opener//在子窗体中代表父窗体
        closed



    方法：
        alert()
        confirm()
        setInterval()
        clearInterval();//循环执行

        setTimeout("aaa()",3000)  //只执行一次,在规定时间内执行某一操作
        clearTimeout()

        open();//开启新窗体(11.html)(16)
window子对象：
            document
            frames
            location
            history
            screen 

[window.]成员
document.write();

本身window 
open可以弹出子窗体

frames//多个窗体

跳转位置函数:
    <meta http-equiv="refresh" content="3"><!--3秒钟刷新一次-->
    <meta http-equiv="refresh" content="3;url=http://www.brophp.com"><!--3秒钟加载一次页面-->
    header("Location:login.php");//前面不能有输出

    window.navigate(url)
    location.href=url;
    location.replace('url')

    记得：
        location='url';
        location.reload(true);(14.html)
history
        history.back()
        history.go(-2)(15.html)
screen
        (16.html)
表单对象:
        document.getElementById()

        document.forms.username
        document.frm1.username

        本身表单有的属性都可以作为对象的属性

        action 
        method
        enctype
        title

        方法：
        submit()
        focus()//获取焦点

        事件:
            onfocus();//获取焦点
            onblur();//失去焦点
            onchange();//内容改变事件

            form  上的onsubmit();(17.html)
select标签:
    selectedIndex代表选项框下标
    options[selectedIndex]获取选项


位置：(images/weizhi.png)
    style.top
    style.left

    offsetWidth
    offsetHeight
    offsetTop    //距离外面一层盒子的距离
    offsetLeft

    scrollHeight
    scrollWidth
    scrollTop    //滚动条滚动的高度，一般从0开始计数，计数为+时元素上升，反之下降。
没有滚动条使用js操作是的某一容器内的文本(如div)向上滚动，则需要对该div的上一层非
直接文本容器的scrollTop属性进行改动而不是文本的属性，(22.html)
scrollLeft

//用absolute布局可以是元素脱离文档流，
//用fixed布局可以使页面中某一元素的位置不随滚动条的改变而改变，此时fixed的
布局相对于HTML标签

大家看到这里应该对JavaScript的基础语法有了一定的了解，本部分内容很长，但是只是抽出来的比较重要的部分，具体的还是希望大家参考JavaScript权威书籍。如果发现本文中有错误，欢迎各位道友批评指教。