javascript教程(javascript编程基础实例)

javascript教程

一、简介
1、什么是javascript
JavaScript是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）目标、事件驱动式的网页脚本言语。
2、为什么要运用javascript
表单验证
网页特效
小游戏
Ajax
3、快速入门
在程序中，假如想编写js代码，有两种办法：
1）在html文件中，在一对script符号中，直接编写
2）在js中，直接编写，在html中，运用一对script符号直接引证
1
以上两种不能在一对script符号中重复运用，引证就不能写文件内容。
二、根底语法
1、根本格局
JavaScript区别大小写
变量a和变量A是两个变量
JavaScript脚本程序须嵌入在HTML文件中
JavaScript脚本程序中不能包括HTML符号代码
每行写一条脚本句子
句子结尾能够加分号
JavaScript脚本程序能够独立保存为一个外部文件
2、关于script标签
Language：引证的言语javascript、php、c#、VBSCRIPT
Src：引证一个外部的js文件
3、关于变量
变量是用来临时存储数值的容器，变量存储的数值是能够变化的
变量必须要先声明才干运用，运用var声明变量
运用var声明：部分变量
没有运用var声明：大局变量
变量的命名规则：榜首个字符必须是英文字母，或者是下划线(_)；其后的字符，能够是英文字母，数字，下划线；变量名不能是JavaScript的保留字
变量的效果域:大局变量、部分变量
4、数据类型（若类型言语，界说无需拟定数据类型）
String：字符串‘’“”
Number：数字10、10.01、100
Boolean：布尔型true、false
Undefined：未界说
Null：空
Object:目标类型
5、运算符
1）算术运算符
+、-、*、/、%、++、–
i++
++i
2）比较运算符
、<、>=、<=、!=、==、===、!==
==和===有何区别？
==：判别值是否持平
===：判别值持平类型也相同
3）逻辑运算符
&&、||、!
4）赋值运算符
=、+=、-=、*=、/=、%=
将运算符左面的与右边的进行核算，再赋值给左面的
字符串运算符
+、+=（PHP中是用点）
三、流程结构
顺序结构
分支结构
循环结构
1、顺序结构
代码是一行接着一行履行
2、分支结构
If、else、elseif、switch
3、循环结构
For、while、do….while、for…..in
小游戏：
猜数游戏：进入到页面之后、随机一个数1–500、弹出输入框，由用户输入一个数字，假如这个数字大于随机数，
四、函数
1、函数的功能
代码重复性运用
模块化编程
2、语法：
运用函数前要先界说才干调用
函数界说有三个部分:函数名,参数列表,函数体
界说函数的格局
**function函数名([参数1,参数2…]){
函数履行部分;
return表达式;
}**
调用语法：
函数名(实参1,实参2,……,);
3、代码示例
例1：关于函数的界说和调用
//函数的界说
functiondisplay(){
alert(‘hello’);
}
//函数的调用
display();
display();
display();
例2：关于函数的参数问题
在上题中，first,second是形参，i,j是实参
在函数履行过程，形参值的改动不会影响实参
按值传递
按地址传递原理图：
在js中，目标类型默认便是按地址传递
functiondisplay(obj){
obj.name=’lisi’;
}
varp1=newObject();
p1.name=’zhangsan’;
display(p1);
alert(p1.name);//lisi
alert(p1);
JS的根本类型，是按值传递的。
vara=1;
functionfoo(x){
x=2;
}
foo(a);
console.log(a);//仍为1,未受x=2赋值所影响
再来看目标：
varobj={x:1};
functionfoo(o){
o.x=3;
}
foo(obj);
console.log(obj.x);//3,被修正了!
阐明o和obj是同一个目标，o不是obj的副本。所以不是按值传递。但这样是否阐明JS的目标是按引证传递的呢？咱们再看下面的比如：
varobj={x:1};
functionfoo(o){
o=100;
}
foo(obj);
console.log(obj.x);//仍然是1,obj并未被修正为100.
假如是按引证传递，修正形参o的值，应该影响到实参才对。但这儿修正o的值并未影响obj。因此JS中的目标并不是按引证传递。那么终究目标的值在JS中怎么传递的呢？
对于目标类型，因为目标是可变(mutable)的，修正目标自身会影响到同享这个目标的引证和引证副本。而对于根本类型，因为它们都是不可变的(immutable)，按同享传递与按值传递(callbyvalue)没有任何区别，所以说JS根本类型既契合按值传递，也契合按同享传递。
vara=1;//1是number类型，不可变varb=a;b=6;
据按同享传递的求值策略，a和b是两个不同的引证(b是a的引证副本)，但引证相同的值。因为这儿的根本类型数字1不可变，所以这儿说按值传递、按同享传递没有任何区别。
根本类型的不可变(immutable)性质
根本类型是不可变的(immutable)，只有目标是可变的(mutable).例如数字值100,布尔值true,false，修正这些值(例如把1变成3,把true变成100)并没有什么含义。比较容易误解的，是JS中的string。有时咱们会测验“改动”字符串的内容，但在JS中，任何看似对string值的”修正”操作，实践都是创立新的string值。
varstr=”abc”;
str[0];//”a”
str[0]=”d”;
str;//仍然是”abc”;赋值是无效的。没有任何办法修正字符串的内容
而目标就不一样了，目标是可变的。
varobj={x:1};
obj.x=100;
varo=obj;
o.x=1;
obj.x;//1,被修正
o=true;
obj.x;//1,不会因o=true改动
这儿界说变量obj，值是object，然后设置obj.x属性的值为100。而后界说另一个变量o，值仍然是这个object目标，此刻obj和o两个变量的值指向同一个目标（同享同一个目标的引证）。所以修正目标的内容，对obj和o都有影响。但目标并非按引证传递，通过o=true修正了o的值，不会影响obj。
例3：关于函数的回来值问题
functiondisplay(first,second){
//函数遇到return会当即回来，后面代码不履行
returnfirst+second;
}
vari=10;
varj=20;
alert(display(i,j));
document.write(display(i,j));*/
例4：关于匿名函数
/*vari=function(){
alert(‘hello’);
};
i();*/
Vari=10;变量能够保存数据，也能够保存地址
Functiondisplay(){
}在window目标下增加一个叫display的变量，它指向了这个函数的首地址
Window.i=display咱们让window目标下的i指向这个函数的首地址
display()=======i();
例5：自调用匿名函数
Function(){}：相当于回来首地址
(Function(){})：把这部分看做一个全体
(function(){})()：相当于找到这个地址并履行
以上这种写法：能够避免代码库中的函数有重命问题，而且以上代码只会在运行时履行一次，一般用做初始化工作。
例6：大局变量与部分变量
在函数内部界说的便是部分的，否则便是大局的
假如函数内的变量没有var声明会直接影响大局的

javascript编程基础实例

JavaScript是一种用于创建和操控动态网站内容的编程语言，是开发交互式Web界面的最佳挑选之一。那么，其交互性体现在哪些方面？怎么完成根本的交互式操作？下面我们一起来深化学习一下JavaScript的三大根本操作，分别是改动HTML内容，改动HTML特点以及改动HTML款式。希望经过事例解说，我们能够快速把握这些根本操作。
1、JavaScript改动HTML内容
我们先经过一个实例，为我们叙述Javascript怎么改动HTML的内容。首要我们要完成的作用是经过点击按钮，即可改动页面的内容，完成内容的切换。比方点击按钮，欢迎来到学致”变为“Helloxuezhi!”。要完成上述事例作用，其实很简单，根本操作只需求四步：
（1）增加一个按钮。
在body中刺进button标签完成按钮：
（2）在按钮上绑定onclick点击事情。
在按钮元素中，增加一个点击事情onclick特点，如下所示：
（3）获取id=”demo”的元素标签。
首要，我们怎么获取HTML元素呢？获取之前我们需求运用Document目标，那么，什么是Document目标？Document是一个目标，它的作用是当浏览器载入HTML文档，即可生成Document目标，Document目标是HTML文档的根节点，协助我们从脚本中对HTML页面中所有元素进行访问。我们运用getElementById()方法来获取id=”demo”的元素标签：
（4）运用innerHTML修正HTML内容（将”欢迎来到学致“更改为”Helloxuezhi!“）。
修正HTML内容，我们经过innerHTML特点，可设置或回来表格行的开端和完毕标签之间的HTML，也就是，能够对应的获取/赋值元素内容。直接为innerHTML特点赋值，将”欢迎来到学致”内容设置为“Helloxuezhi!”。
2、JavaScript改动HTML特点
我们经过点击按钮即可改动页面HTML特点，完成图片切换。该作用是网页中最常见的功能，也是前端开发有必要把握的最根本的技术。那么，该怎么完成呢？下面以白天和黑夜两个图片的切换作用为例，为我们解说JavaScript的根本操作：
（1）增加白天和黑夜两个按钮。
经过button标签增加两个白天和黑夜两个按钮。
（2）在按钮上绑定点击事情onclick。
分别为button标签增加对应的onclick事情。
（3）获取图片元素。
若要替换图片，首要就要获取图片元素；那么，怎么获取图片元素呢？首要，需求界说图片标签，然后标签内界说一个名称，将id设置为myImage；我们经过id来获取当前图片，代码如下：
然后，获取id为myImage的图片元素，代码如下：
经过document.getElementById方法获取标签，就获取到了对应图片元素。
（4）更换图片途径。
运用图片标签内的src特点来改动（src特点是图片途径），将图片设置为新途径来完成图画改换。若我们点击按钮，将src特点的值改动为xx.jpg新图片，如下所示：
我们设置对应的两个按钮，改动src特点值，将其设置为对应的图片代码如下：
这样我们经过点击按钮改动标签src特点了,完成了图片途径的改动。
3、JavaScript改动HTML款式
改动HTML的款式，完成字体大小款式的改动，是网页中最常见的功能，也是前端开发有必要把握的最根本的技术。那么，上述HTML款式的改动是怎么完成的呢？根本操作过程如下：
（1）增加一个按钮。
我们经过button标签完成“点击”按钮的增加。
（2）在按钮上绑定onclick点击事情。
在上述代码中，完成了在button标签上增加onclick点击事情。
（3）获取显现文字的元素。
改动字体大小之前，我们要先获取显现文字的元素；那要怎么获取显现文字的元素呢？首要，界说文字显现的div标签，代码如下：
然后，获取id=”demo”的元素，代码如下：
经过document.getElementById方法来获取id=”demo”的div标签，这样就获取到div标签。接下来，就能够完成改动文字大小了。
（4）改动文字大小。
这一步需求运用innerHTML；因为HTMLDOM允许JavaScript改动HTML元素的款式。改动HTML元素的款式，是改动HTML特点的一种变种。该事例的示例代码如下：
网页默许字体大小为12像素，此处我们经过style.fontSize将字体大小设置为30像素；也就说，将点击按钮之后出现的文字设为30像素。