javascript学习笔记

/*
 * JavaScript学习总结
 */

/*
 * 变量声明
 */

var name = "xiaoming"; 			//字符
var age = 20; 					//数字
var sex;						//只声明变量不赋值,这时系统默认赋值  undefined
var $ = document.getElementById;	//简单实现类似jQuery的元素选取,当然jQuery实际要比这复杂的多

//区分大小写,标识符必须以字母下划线或者$开头,后面可以跟字母数字下划线或者$
//语句最后的";"可以省略,但是为了代码清晰最好在语句最后添加";"
//字符串可以用单引号或者双引号包裹,单引号与双引号没有任何区别,但是必须前后匹配
//和其他编程语言一样,最好用有意义的名字命名标识符(且要避免与保留字冲突)

//"+"既可以作为加法运算符,进行数值计算,亦可以作为连接符,链接字符串
2+3 	//5
2+"xiaoming" == "2"+"xiaming" == "2xiaoming"   //数字与字符串用"+"链接默认会把数字先转换为字符串
"2" + "3" == "23" 
	
/*
 * 数组
 */
//数组可以存放任何类型的值,甚至是函数或者对象,数组非常类似对象但是数组是有序的数列	
var xiaoming = new Array();
xiaoming[0] = "xiaoming";
xiaoming[1] = 20;
xiaoming[2] = "male";
//或者
var xiaoming = new Array("xiaoming",20,"male");
//或者,直接
var xiaoming = ["xiaoming",20,"male"];


/*
 *函数
 */

//函数声明方式一
function say(name,age,sex)
{
	var word = "my name is "+name+" ,my age is "+age+" ,my sex is "+sex+".";
	return word;
}

//注意在函数内部声明的变量
function say()
{
	var name;  //此为局部变量,值在函数内部可以访问,函数执行完毕立即销毁
	age;      //此为全局变量
}

//如果没有东西要返回则可以省略 return 这时默认返回 undefined

//函数声明方式二
var say = function(name,age,sex)
{
	var word = "my name is "+name+" ,my age is "+age+" ,my sex is "+sex+".";
	return word;
};

//将一个匿名函数赋值给一个变量
//如上,就可以使用say()来调用函数

//匿名函数式的声明,必须要放在函数调用之前,而传统函数声明方式可以放在任何地方(在函数调用前或者函数调用后)
//匿名函数式声明类似定义一个变量并将一个匿名函数赋值给该变量,所以是一个赋值语句,所以在使用变量前当然要赋值声明了。
//而不同的函数声明会在页面载入时即被读取到,并全局可用

/*
 *对象
 */

//javascript 中一切都是对象,但没有传统意义上类的概念
//

//对象的创建

var xiaoming = {
		name : "xiaoming",
		age  : 20,
		sex  : "male",
		say  : function()
			{
				var word = "my name is "+this.name+" ,my age is "+this.age+" ,my sex is "+this.sex+".";
				return word;
			}	
};

//或者用构造函数创建,函数名按照约定最好用大写字母开头

function Persion(name,age,sex)
{
	this.name = name;
	this.age = age;
	this.sex = sex;
	this.say = function()
	{
		var word = "my name is "+this.name+" ,my age is "+this.age+" ,my sex is "+this.sex+".";
		return word;
	}	
}
var xiaoming = new Persion("xiaoming",20,"male");


//对象属性的引用可以用"."
xiaoming.name       //xiaoming
xiaoming.age   		//20

//也可以使用类似数组的"[]"语法
xiaoming["name"]   	//xiaoming
xiaoming["age"]		//20

//window   js全局环境 ,是浏览器窗口的化身,所有全局变量和函数都是window的属性或方法
//document window的属性之一,指代整个文档环境

//选取元素的方法:
document.getElementById() 	//获取页面上拥有唯一id的元素
document.getElementByTagName()   //用标记名获取元素,返回的页面上该标记的一个数组
document.getElementByClassName()  //获取相同类的标记(calss)

//最新的规范中添加了
document.querySelector();		//返回符合规则的第一个元素
document.querySelectorAll() 	//返回页面中所有符合规则的元素
//两者都支持jQuery式的css规则选取元素

//js文件在页面的放置位置
//无论是用
<script>
alert('hello world');
</script>
//还是外部文件引用
<script src="hello.js">
</script>
//最佳的存放位置是</body>结束标签之前,浏览器是按照顺序进行解析的,如果将js放在<head>标记中,在下载完js文件之前浏览器不能解析<body>标记中的
//DOM模型
//当然,很多人觉得现在的网速状态下这种影响几乎可以忽略

//还有一点就是,如果把js放在<head>标记中,当js一旦下载完成,就会开始执行,而这时浏览器在开始下载和解析<body>中的内容,DOM模型尚未创建完整,如果
//js中有操作DOM的行为,因为DOM尚未创建,所以就不会有任何结果。

<script type="text/javascript"></script> //中的type属性在html5标准中已经可以不用添加,浏览器的默认脚本就是javascript
//可以简单地用
window.onload = function()
{
	//	your code
}
//使js在页面载入完毕之后执行,粗糙地实现类似jQuery的
$(document).ready(function(){
	
})

//DOM是文档对象模型	
//BOM指浏览器对象模型

/*
 * 一个简单的完整小程序实例
 */
<html>
<head>
<meta charset="utf-8">
<title>javascriptTest</title>
<script>
window.onload = init;
 
function init()
{
	var sub = document.getElementById("submit");
	sub.onclick = add;
}
 
function add()
{
	var title = document.getElementById('title').value;   //获取指定表单id的表单元素的值
	if(title == '')
	{
		alert("You must write something");				
	}
	else
	{
		var post = document.getElementById("post");
 
		var p = document.createElement("li");		//创建<li>标记
		p.innerHTML = title;
 
		post.appendChild(p); 							//将li标记插入post内部
		return false;			//阻止默认提交动作继续执行
	}
}
</script>
</head>
<body>
<form>
  <input type="text" id="title" name="title">
	<input type="submit" id="submit" name="submit" value="ADD">
</form>
<div id="test">
	<ul id="post">
		
	</ul>
</div>
</body>
</html>

你可能感兴趣的:(JavaScript,js学习笔记,javascript语法总结)