我的上个博客提到了JavaScript技术, 首先学习JavaScript编程语言,需要知道它也是W3C组织制定的编程规范。因此学习JavaScript依然使用的W3C的手册。与上个blog中提到的html所查询的文档是同一个文档,可以自行下载与查阅,网上也有在线的版本:http://www.w3school.com.cn/。其中包含了几乎所有W3C指定的标准中的手册与技术标准。
JavaScript语言它的诞生主要的目的是希望在页面上,用户提交数据之前,对用户输入的数据进行简单的数据验证。提高用户在浏览器端操作数据的合法性以及体验效果。JavaScript语言它主要运行在客户端的浏览器中,也称为客户端的脚本语言。
其中JavaScript语言的特点:
1、JavaScript弱类型,Java强类型。
2、JavaScript是基于对象的编程语言。
3、解析性语言,直接交给浏览器就能解析运行,不需要编译。并且JavaScript如果书写错误,不报错。
对于学习了javase的一些哥们哥们来说,我们学习JavaScript语言重点在于学习和Java不同,以及调试错误。本文后期将JavaScript简称JS。
前文的博客中提到了css与html之间的结合方式,这里需要理解js与html文件的结合方式,这里说下个人的理解,html就像一个更包容万物的载体,其本身的内容算不上强大也算不上严谨,但是许多的设计思想和编程语言可以通过标签,引入等方式附加到其中,大大的提升了其生命周期和使用范围,进而构成了整个互联网内容的基石。
方式一:直接在页面上使用script标签嵌入JS代码。
<!--
JavaScript代码一般建议书写在head标签中,但是实际开发中也有不少前端人员会不遵守,对于代码的运行和解释没有影响。
格式:
<script type="text/javascript">
JS代码
</script>
-->
<script type="text/javascript">
//书写js代码
alert("Hello World!");
//在JS中有个对象document,其中有个write方法,可以把数据直接写在页面上
document.write("Hello World!");//dom中的方法,用来在页面写入文字,相当于javase的system.out.println();
</script>
方式二:将JS
代码抽取到文件中,在这个文件中专门书写
JS
代码,在需要使用的
HTML页面上使用
script
标签引入
JS
代码。这种方法是在实际项目开发中经常使用,可以减少代码的耦合性,增加可读性。但是本文中为了直观显示,使用第一种方法,包括下面js的进阶内容都以此来显示。
<!--
js和html代码的第二种结合方式:
使用script标签引入其他的js文件
-->
<script type="text/javascript" src="demo1.js"></script>
<script type="text/javascript">
alert(“hello world”);
</script>
有一点值得注意!
注意:如果使用script标签引入外部的js文件,在这个script标签中不能在书写其他的js代码,即使书写了也不执行。
2. 任何一门编程语言都有自己的默认的语法规则,JS中需要学习的语法:注释
关键字、标识符
常量、变量、数据类型
运算符(算术运算、赋值运算、关系运算、逻辑运算、位运算、三元运算)
函数(方法)
数组
对象
3.js的注释:
JS中的注释书写和Java的基本类似:
单行注释:// 注释内容
多行注释:/* 注释内容 */
注意:JS中没有文档注释。
4.关键字:被JS语言赋予特定含义的单词。关键字在编程中出现之后,就具备特定的含义。
注意:在js中没有int double 这些关键字。但有:var if for while break continue 等
5.标识符:开发者根据自己的需求自己定义的一些标记。
标识符的组成:数字 、 字母 、 下划线 、$ 不能数字开始,可以用作变量名、函数名、数组名等,但是标识符不能是关键字。
6.js的常量
Java中的常量:
数字:整数和小数
字符:使用单引号引用起来的
字符串:使用双引号引用的
布尔值:true和false
null值:null
JS中的常量:
数字:不区分整数和小数。
字符串:所有使用单引号或者双引号引用的都是字符串。
布尔值:true和false
null值:null
undefined值:undefined
7.js的变量
Java中定义变量的格式:
数据类型 变量名 ;
数据类型 变量名 = 数据值;
JS中定义变量的格式:
var 变量名;
var 变量名 = 数据值;
Java中的数据类型:
2种:基本数据类型和引用数据类型
基本数据类型8种:byte short int long float double char boolean
JS中的数据类型:
2种:基本数据类型和引用数据类型
基本类型:
number 类型 :表示js中的所有数值数据。整数和小数
string类型: 表示js中的所有字符串
boolean类型:逻辑值
null值:null
undefined值:undefined
<script type="text/javascript">
//定义变量
var a = 100;
//alert(a);
/*
可以使用js中的typeof(变量) 检测这个变量的类型
*/
alert(typeof(a));
/*
JS中的变量空间在定义完成之后是没有自己的数据类型的,
只有存储了具体的数据之后,才能知道这个空间是什么类型
并且在后期使用的过程中,还可以修改这个空间中的数据以及数据类型
建议后期再书写js代码的时候,不要一个空间存储不同类型的数据
*/
a = "abc";
alert(typeof(a));
</script>
Java中的所有进制转换在JS全部通用。
8.js运算符
JS中拥有的运算符和Java中的基本一致。
算术运算、赋值运算、关系(比较)运算、逻辑运算、位运算、三元运算。
<script type="text/javascript">
//算术运算:
var a = 5;
var b = "a";
//+ 号 如果和字符串进行运行,结果会是一个更长的字符串
alert(a+b);
//在js中没有整数和小数的区分,计算完依然是4321
alert(4321 / 1000 * 1000);
/*
在js中,如果算术运算的其他符号(除+之外)参与运算的时候
运算中如果有字符串,会把整个字符串先转成对应的数字,然后再进行运算
如果字符串无法转成对应的数字,这时就会发生运算的错误,得到NaN数据
*/
alert( a - b );
a = a++;
alert(a);
</script>
//赋值运算符 = 赋值号:把右侧的结果赋值给左侧的变量空间。
var 4 = a; //左侧不是变量,右侧没有一个确定的结果
<script type="text/javascript">
//关系运算
var a = 5;
var b = "5";
//一个等号是赋值号
//alert(a=b);
/*
两个等号表示的具体的数值是否相等
如果比较的数据类型不统一,会把他们的类型转成一致的,然后只比较具体的数值
*/
alert(a == b);
/*
三个等号,要求数值相等的同时,数据类型也要相同。
*/
alert(a === b);
</script>
<script type="text/javascript">
/*
逻辑运算:
在JS中遇到所有的非零、非null、非undefined的数据都可以理解成true。
遇到所有的零、null、undefined都可以理解成false。
在JS中:
(这部分特别难理解和掌握,但是如果想成为top高手,需要仔细领会,本人在研究生期间接触js时一直被这个问题所困惑)
&&:如果左边为false,右侧肯定是不会计算的,会把左侧的表达式结果作为&&的结果。
但是如果左边为true,右侧是需要参加运算,在运算的过程中,&&的运算结果是右侧表达式的结果。
||:如果左边为true,右侧不参与运算,把左侧表达式结果作为||的结果
如果左边为false,右侧必须参加运算,把右侧的结果为||的结果
! : 非 真 为 假
非假为真
!!0 false
!-1 false
!"abc" false
*/
var a = 0;
var b = 5;
//alert( !a || b + 10 );
alert(!"null");
</script>
注意:JS中没有 单与、单或、异或的逻辑运算。
其他的循环,条件选择等与java并无区别
9.js中的函数,
函数:可以封装一段独立的运行代码,在需要的时候,通过函数名进行调用。其中的函数和对象特别容易弄混淆也不容易区分。
第一种定义方法:
Java中的函数定义方式:
修饰符 返回值类型 方法名( 参数类型 变量名 ,参数类型 变量名.... ){
方法体
}
JS中函数的第一种定义方式:
function 函数名( 变量名 , 变量名 ..... ){
函数体
}
注意一下七点内容:
JS中的函数细节:
1、函数必须被调用才能执行。
2、js中的函数在定义的时候不需要书写返回值类型,因为js是弱类型语言。
3、如果一个函数有返回值,可以直接使用return语句,直接返回数据即可
4、在js中函数没有重载的概念,如果出现了一样的函数,这时后面的函数会把前面的函数覆盖掉
5、在js的函数上,不管写不写参数列表,在调用的时候,可以传递参数,也可以不传递参数。
6、其实在js中的函数中有一个隐式看不见的参数,它会接收传递给当前这个函数的所有数据
这个隐式参数arguments,其实它是一个数组名
7、在js中,如果调用函数的时候,调用语句没有书写小括号,这时相当于把整个函数又赋值给其他的变量.这个变量就可以认为成函数的新名称使用。
第二种方式:
使用JS中的Function对象创建函数,这种方式几乎不用。
<script type="text/javascript">
/*
演示js中的函数的第二种定义方式
格式:
var 函数名 = new Function("参数列表" , "函数体");
*/
var demo = new Function("x","y","return x + y ;");
alert(demo(3,7));
//上述代码相当于
function demo( x , y){
return x + y;
}
alert(demo(3,7));
</script>
匿名函数:
格式:
function ( 参数列表 ){
函数体
}
<script type="text/javascript">
/*
匿名函数:
function (){
alert("你好");
}
在JS中匿名函数必须和JS中的事件一起使用。
经常在页面加载完成之后,我们希望执行某个js函数:
在浏览器把一个html页面加载完成之后,浏览器底层会自动触发onload事件。
而这个事件对应的函数由开发人员指定
*/
function demo(){
alert(123);
}
demo();
//给onload事件绑定一个函数
onload = function(){
alert("页面加载完成");
}
</script>
9.js中数组的定义方式
Java中数组的定义方式:
数据类型[] 数组名 = new 数据类型[数组长度];
数据类型[] 数组名 = new 数据类型[]{值,值.....};
数据类型[] 数组名 = {值,值.......};
JS中的数组的定义方式:
var 数组名 = [值,值........];
<script type="text/javascript">
/*
数组的定义
*/
var arr = [1,2,5];
//数组的length属性
alert(arr.length);
//给数组某个空间中存放数据
//JS中的数组中可以存放不同类型的数据
arr[0] = "abc";
/*
js中的数组没有脚本越界异常,
因为在JS中的数组它的长度随时可以改变
可以把JS中的数组理解成Java中的list集合。
*/
arr[5] = false;
alert(arr);
</script>
10.通过对象创建数组:
<script type="text/javascript">
/*
使用Array对象创建数组:
格式:
var 数组名 = new Array(数组中的元素或者是数组的长度);
如果在使用Array对象创建数组的时候,指定的数据为一个,并且这个数据为整数
这个值一定是数组的长度,而不是数组中的元素。
如果指定的是一个小数,就会出现程序错误。
*/
//var arr = new Array(1,2,5);
var arr = new Array("abc",true,false,null,undefined,123);
alert(arr.join("#"));
</script>
11.js中的对象
JS中提供的对象:
Array对象表示数组。
Math对象主要处理常用的数学运算。
String对象处理字符串,大部分功能和Java中的String类一致
Date对象,日期对象,和Java中的Date以及Calendar类用法一致。
Boolean对象,没啥用。
RegExp正则对象。和Java中的Pattern以及Matcher一致。
全局函数:这些函数不依赖任何的对象,可以直接通过函数名调用。
<script type="text/javascript">
/*
全局函数:
encodeURI() 对url地址中的数据进行编码
decodeURI() 对编码后的url进行解码
eval() 它可以把一个字符串解析成JS代码,并运行这个JS代码
*/
var s = "http://sh.itcast.cn?name=张三&age=23";
var en_s = encodeURI(s);
document.write(en_s);
document.write("<hr />");
var de_s = decodeURI(en_s);
document.write(de_s);
var ss = "alert('abc')";
//alert(ss);
eval(ss);
</script>