javascript开发简明教程

最新推荐文章于 2025-09-11 11:00:07 发布

原创最新推荐文章于 2025-09-11 11:00:07 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了JavaScript的基础知识，包括变量声明和类型、作用域、基本语句、函数定义及面向对象编程等内容，并通过实例演示如何实现简单的模块化编程。

引言:

网上关于javascript基础教程很多,由于我本身并不是前端开发人员,所以并不打算深入学习关于javascript,我们都知道javascript是一种弱类型的解释型语言。主要用于配合前端开发,随着Nodejs等框架的火热,javascript目前也应用在一些后端中。可以在pc,ios,android这3种不同端进行统一编写。我这次主要是实现web可视化这块的功能,所以才大概的学习下javascript的一些基本语法,主要是变量声明和变量类型,变量的作用域,基本语句,函数定义以及最后为了达到可重用目的进行的面向对象编程。我们会发现语言之间还是有一些共性的。学习完一门语言之后,接受另外一门语言也就变得相对容易。可以将javascript和python进行类比,我们会发现有很多相同点。

一.变量定义和作用域
1.变量声明
由于变量是弱类型的,所以没有声明变量类型的问题,但是变量类型是由变量初始化的值决定的。这点是和python是一样的。
2.变量类型种类
JS中有6种数据类型：Undefined、Null、Boolean、Number、String和Object。JS中不支持任何创建自定义类型的机制，而所有值最终都将是这6种数据类型。其数据类型的动态性特点足以表示所有数据。JS提供typeof操作符来检测变量的数据类型。其中Undefined和Null这两种类型容易产生混淆。
(1) Undefined说明
我们先来看看Undefined这个数据类型吧，Undefined类型只有一个特殊的值——undefined。undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
1) 变量被声明了，但没有赋值时，就等于undefined。
2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
3)对象没有赋值的属性，该属性的值为undefined。
4) 函数没有返回值时，默认返回undefined。
总结起来就是说undefined用来代表那些已经声明却未赋值或者根本还没定义的变量的值。

var name
alert(name)

上面语句的打印结果为undefined.故针对undefined只需要记住代表那些已经声明却未赋值或者根本还没定义的变量的值。

(2) Null说明
Null类型是第二个只有一个值的数据类型，这个特殊的值是null，从逻辑角度来看，null值表示一个空对象指针，而这也正是使用typeof操作符检测null值会返回“object”的原因。(其实这是JavaScript最初实现的一个错误，后来被ECMAScript沿用下来）

如果定义的变量准备在将来用户保存对象，那么最好将该变量初始化为null而不是其他值。这样一来，只要直接检查null值就可以知道相应的变量是否已经保存了一个对象的引用。实际上，undefined值是派生自null值的，因此ECMA-262规定对他们的相等测试要返回true：

(3)Undefined和Null 的区别和联系

尽管null和undefined有这样的关系，但它们的用途完全不同，如前所述，无论什么情况下都没有必要把一个变量的值显式地设置为undefined，可视同样的规则对null却不适用。换句话说，只要意在保存对象的变量还没有真正保存对象，就应该明确地让该变量保存null值。这样做不仅可以体现null作为空对象指针的惯例，而且也有助于进一步区分null和undefined。

一般只需要用 (!exp) 来判断就可以了,代表值是null,又由于undefined=null，故无需具体判断 null 还是 undefined。这也避免了具体判断是null还有undefined

注:null是指空对象,而undefined是未定义变量。它们应用在不同的地方。但他们的值是相等的,这点是容易使人混淆的。

(4)Object说明

对象定义的形式可以使用我们平时开发时经常使用的json形式一样定义对象数据。
var s={username:'xiaoqiang',id:'13423423423'}
二.变量定义和使用(很重要)
1.局部变量与全局变量
使用var关键字修饰的变量是局部变量,主要用在函数内部中。而使用使用赋值语句并不带var修饰的变量是全局变量。这点很重要,导致我开始写js递归程序时出现问题。
这些总结一下就是var主要是用来进行一次性使用的变量,所以称为局部变量。而全局变量的作用域和生命周期比var定义的变量长。所以尽量使用var定义变量,除非必要。不然会导致一些难以调试发现的错误。
2.变量作用域
变量的作用域遵守我们其他语言中的就近原则。当解释器需要查找变量时,首先从局部作用域找起,如果没找到,则查找全局作用域中的变量。

s=0
function print(){
var s=1
alert("s="+s)
}

这里程序明显会打印s=1而不是s=0
3.类型装换
Number(),String(),Boolean()用来进行类型转化。
三.基本语句
1.条件语句
条件语句主要为以下形式
1)if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

var s=1
if(s==1){
alert(s);
}

2)if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

var s=2
if(s==1){
alert("equals to 1")
}
else{
alert("not equals to 1")
}

3)if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

var s=3
if(s==1){
alert("1")
}
elseif(s==2){
alert("2")
}
else{
alert("3")
}

2.循环语句
循环语句主要为以下形式
1)for - 循环代码块一定的次数

for(var i=0;i<10;i++){
alert(i)
}

2)for/in - 循环遍历对象的属性

var s={username:"xiaoqiang","id":"134234"}
for(var key in s){
alert(key+":"+s[key]+"#")
}

3)while - 当指定的条件为 true 时循环指定的代码块

var s=1
while(s!=10){
alert(s)
s++;
}

4) do/while - 同样当指定的条件为 true 时循环指定的代码块( 和while作用一样)

四.函数定义

函数是为了对某一段实现特定功能的代码进行重用的手段。将功能代码封装在函数体内。
函数定义形式如下:
function 函数名([参数列表]){}

s=[1,2,3,4,5]
function printPath(s){
for(var i=0;i<s.length;i++){
alert(i);
}
}
printPath(s)

五.如何面向对象编程
面向对象编程比面向过程有着天然的优势,便于维护和代码开发。并且将实现一定功能的代码封装在一个模块中。实现面向对象变量一般有2种方式,我们逐一进行介绍。
1.function实现
function 类名(参数列表){
//设计属性和方法
}
下面我们通过一个例子来理解。

function User(name){
	//对象属性
	this.name=name;
	//对象方法
	this.printName=function(){
	alert("my name is"+this.name)
	}
	//外部参数传入
	this.add=function(s1,s2){
	return s1+s2;
	}
}
s=new User("fadfs")
s.printName()

2.原型法实现,通过prototype关键字实现,prototype是任何对象都具有的一个属性。本质上是克隆clone(),js中解释就是返回对象类型原型的引用。下面从实战角度,直接以案例来说明用法。

function User(name){
	this.name=name;
}
//键值对的形式
User.prototype={
	add:function(s1,s2){
	return s1+s2;
	},
	printName:function(){
	return this.name;
	}
}
s=new User("fadfs")
s.printName()

原型法允许在不修改源代码的基础上进行原来对象方法的扩充和修改操作。

六.模块化

将一定功能的代码封装在js文件中,当我们需要时通过js文件引用代码,这样可以更好的维护和开发代码。js代码的测试环境必须要在html中进行,因为js引擎在浏览器中,我们可以在浏览器中右击选择查看元素进行js debug测试与开发。
下面我们利用面向对象编程思想实现一个简单的js的加减法功能
1)在calculator.js中写入以下代码

function calculator(name){
	this.name=name;
	this.printName=function(){
	alert(name)
	}
}
calculator.prototype={
	add:function(s1,s2){
	return s1,s2
	},
	sub:function(s1,s2){
	return s1-s2;
	}
}

2)在calculatorTest.html中写入以下代码:

<html>
<meta charset="UTF-8">
<!--引入我们刚刚开发的计算器模块-->
<script src="calcalator.js">
<script>
c=new calculator("超级计算器")
c.printName()
c.add(1,2)
c.sub(2,1)
</script>
</html>

七.总结

由于js比较难以调试,我在开发中会使用Json2.js这个js文件提供的功能,进行Json对象和json字符串之间的转化,以便能够看到对象当前的状态,便于调试。

js知识点繁多,比如嵌套函数定义,闭包等特性。js学习更详细高级教程地址:js从基础到高级,这个网址不仅可以学习js,还收录了其他很多的开发语言的教程。作为平时备用的API使用,也是一个不错的主意。