您的位置:首页 > Web前端 > JavaScript

Java语言基础JavaScript

2012-08-24 19:52 471 查看
JavaScript概述

JavaScript是基于对象和事件驱动的脚本语言,主要应用在客户端。
特点:
1.交互性(它可以做的是信息的动态交互)
2.安全性(不允许直接访问本地硬盘)
3.跨平台性(只要是可以解析Js的浏览器都可以执行,和平台无关)

JavaScript与Java的不同
1.Js是Netscape(网景)公司的产品,前身是LiveScript;Java是Sun公司的产品,现在是Oracle公司的产品。
2.Js是基于对象,Java是面向对象。
3.Js只需解释就可以执行,Java需要先编译成字节码文件,再执行。
4.Js是弱类型,Java是强类型(每一种类型都有具体的划分)。

JavaScript与Html的结合方式
1.将JavaScript代码封装到<script>标签中;
2.将JavaScript代码封装到js文件中,并通过<script>标签中的src属性进行引用;
<script type="text/javascript" src="demo.js"> </script>
注意:如果<script>标签中使用了src属性,那么该标签中封装的javascript代码不会被执行。所以导入js文件通常都是使用单独的<script>标签。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
</head>
<body>
<!--导入js文件-->
<script type="text/javascript" src="demo.js">
</script>
<!--封装javascript代码-->
<script type="text/javascript">
alert("hello javascript");//标签中使用了src属性,那么该标签中封装的javascript代码不会被执行
</script>
</body>
</html>


JavaScript语法
通常,高级程序设计语言所包含的语法内容:
1.关键字,该种语言中被赋予了特殊含义的单词;
2.标识符,用于标识数据和表达式的符号,通常可以理解为在程序中自定义的名称,比如变量名、函数名;
3.注释,注解说明解释程序,用于调试程序;
4.变量,标识内存中的一片空间,用于存储数据,该空间中的数据时可以变化的,当数据不确定时,定义变量来操作数据;
5.运算符,可以让数据进行运算的符号;
6.语句,用于对程序的运行流程进行控制的表达式;
7.函数,用于对功能代码进行封装,以便于提高复用性;
8.数组,对多数据进行存储,便于操作就是缓冲容器;
9.对象,只要是基于对象的语言,或者面向对象语言都存在对象的概念,对象就是一个封装体,既可以封装数据,又可以封装函数;
这些都是高级程序设计语言具备的共性内容,只不过各种语言对这些内容的表现形式不同,但是使用的基本思想是一致的。

Js变量
Js中定义变量,需要使用关键字:var;
Js是弱类型的,不需要具体的类型。var关键字可以省略,因为Js是非严谨的语言。

<!--演示JavaScript语法-->
<script type="text/javascript">
//定义变量
var x=3;//js是弱类型,不需要具体的类型
x="abc";
x=3.45;
x=true;
x='c';//赋值为字符串c,Js中单引号和双引号都是字符串
alert("x="+x);//这是一个函数,将具体的参数通过对话框进行显示
</script>


Js运算符
1.算数运算符
2.赋值运算符
3.比较运算符
4.逻辑运算符
5.位运算符
6.三元运算符

<!--运算符-->
<script type="text/javascript">
//算数运算符
var a = 3710;
//alert(a / 1000 * 1000);//3710,而不是3000
var a1 = 2.3;
b1 = 4.7;
//          alert("a1+b1="+(a1+b1));//7,而不是7.0
//            alert("12"+1);//121
//            alert("12"-1);//11
//            alert(false+1);//2。在Js中false就是0或者null;true是非零或非空,默认用1表示

var n=3,m;
m=n++;//n=4,m=3
//            m=++n;//n=4,m=4
//            alert("n="+n+",m="+m);
//=======================================================
//赋值运算符
var i=3;
i+=2;//在Js中等同于i=i+2,其他运算符同此处
//            alert("i="+i);
//=======================================================
//比较运算符,比较运算符结果是false或true
var z=3;
//            alert(z==4);
//=======================================================
//逻辑运算符,连接两个boolean型的表达式
var t=4;
//            alert(t>3&&t<6);//区分&和&&,在Js中&等是位运算符。此处若用&,则1&1结果为1
//            alert(!t);//false
//=======================================================
//位运算符
var c=6;
//            alert(c&3);    //110&011=010
//            alert(5^3^3);//5
//            alert(c>>>1);//3
//            alert(c<<2);//24
//=======================================================
//三元运算符
//            3>0?alert("yes"):alert("no");//yes
alert(3>10?100:200);//200
</script>

Js运算符-细节
<script type="text/javascript">
/*
* 细节
* 1.undefined,未定义,其实它就是一个常量
*/
var xx;
//            alert(xx);//undefined
//            alert(xx==undefined);//true

//要想获取具体值的类型,可以通过typeof完成
//            alert(typeof("abc")=="string");//string,可通过==直接判断类型,此处为true
//            alert(typeof(2.5));//number
//            alert(typeof(true));//boolean
//            alert(typeof(78));//number
//            alert(typeof('9'));//string
</script>


Js语句
语句:
1.顺序结构
2.判断结构
代表语句:if
3.选择结构
代表语句:switch
4.循环结构
while ,do-while,for
5.其他语句
break 跳出选择,跳出循环。
continue 用于循环语句,结束本次循环,继续下一次循环。

<script type="text/javascript">
//判断结构
/* var x = 3;
//            if (x == 4) {//如果改为x=4,则结果为yes。因为此处是赋值操作,此时x的值为4,判断结果为true。
if (4 == x) {//建议将常量放左边,如果写为=,会报错提示
alert("yes");
}
else {
alert("no");
}
*/
//=======================================================
//选择结构
/*
var x="abc";
switch(x){
case "kk":
alert("a");
break;
case "abc":
alert("b");
break;
default:
alert("c");
}
*/
//=======================================================
//循环结构
/*
var x=1;
document.write("<font color='red'>");//
while(x<10){
//                alert("x="+x);
//将数据直接写到当前页面中
document.write("x="+x+"<br/>");

x++;
}
document.write("</font>");//一个font标签,修饰循环输出的内容
*/

/*
for(var x=0;x<3;x++){//不能用int x=0,使用var
document.write("x="+x+"<br/>");
}
*/
//=======================================================
x:for(var x=0;x<3;x++){
for(var y=0;y<4;y++){
document.write("x="+x+"<br/>");
continue x;
}
}
</script>


Js语句-练习-九九乘法表

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<link rel="stylesheet" href="tabcss.css"/>
</head>
<body>
<script type="text/javascript">
document.write("<table>");
for(var x=1;x<=9;x++){
document.write("<tr>");
for(var y=1;y<=x;y++){
document.write("<td>");
document.write(y+"*"+x+"="+y*x);
document.write("<td/>");
}
document.write("<tr/>");
}
document.write("<table/>");
</script>
</body>
</html>


/*tabcss*/
table,table td{
border:#0000ff double 1px;
}


Js数组
数组用于存储更多的数据,是一个容器。
注意:1.Js数组长度是可变的;
2.元素的类型是任意的;
建议在使用数组时,存储同一类型的元素,操作起来较为方便。

Js中的恶数组定义的两种方式:
1.var arr=[];
var arr=[3,4,5,8];
2.使用JavaScript中的Array对象来完成定义。
var arr=new Array();//相当于var arr=[];
var arr=new Array(5);//数组定义,且长度为5
var arr=new Array(5,6,7);//定义一个数组,元素是5,6,7

Js中的函数
函数就是功能的封装体。
定义功能通常需要两个明确:
1.功能的结果;
2.功能实现中,参与运算的未知内容;
Js中定义函数的格式:
通过指定的关键字来定义。
function 函数名(参数列表){
函数体;
return 返回值;//如果没有具体返回值,return语句可以省略
}

JS函数不存在重载。建议函数中定义了几个参数,就传递几个实参。
细节:
1.只要使用了函数的名称,就是对这个函数的调用;
2.函数中有一个数组,在对传入的参数进行存储,这个数组的名字就是arguments;
3.

function getSum(){
return 100;
}
//var sum=getSum;//getSum本身是一个函数名,代表的是对象,函数本身在Js中就是一个对象,getSum就是这个函数对象的引用
//getSum这个引用的地址赋值给了sum,这时sum也指向了这个函数对象
//相当于这个函数对象有两个函数名称
//alert("sum="+sum);//打印的时候,如果sum指向的是函数对象,那么会将该函数对象的字符串表现形式打印出来,就是该函数的代码定义格式
var sum=getSum();//getSum函数运行,并将返回的结果赋值给sum
alert("sum="+sum);


动态函数:使用的是Js中内置的对象Function
var add=new Function("x,y","var sum;sum=x+y;return sum");
var sum=add(4,8);
alert("sum="+sum);//sum=12
参数列表、函数体都是用字符串动态指定的。

匿名函数:没有名字的函数,通常是函数的简写形式。

var add3=function(a,b){
return a+b;
}
alert(add(7,8))//15


练习:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
/*
* 综合练习:
* 1.定义功能,完成数组的最值获取;
* 2.对数组排序;
* 3.对数组进行查找;
* 4.对数组元素进行反转;
*/
//取最值
var arr=[66,13,37,29,89,98,12];
function getMax(arr){
var max=0;//初始化脚标
for(var x=1;x<arr.length;x++){
if(arr[x]>arr[max])
max=x;
}
return arr[max];
}
var maxValue=getMax(arr);
//            document.write("maxValuee="+maxValue);

//排序
function sortArray(arr){
for(var x=0;x<arr.length;x++)
for(var y=x+1;y<arr.length;y++){
if(arr[x]>arr[y])
swap(arr,x,y);
}
}
//数组中的元素位置置换
function swap(arr,x,y){
var temp=arr[x];
arr[x]=arr[y];
arr[y]=temp;
}
function println(val){
document.write(val+"<br/>");
}
println("排序前:"+arr);
//            sortArray(arr);
println("排序前:"+arr);
</script>
<script type="text/javascript">
//对数组进行查找
function searchElement(arr,key){
for(var x=0;x<arr.length;x++){
if(arr[x]==key){
return x;
}
return -1;
}
}
//折半查找,必须是有序的数组
function binarySearch(arr,key){
var max,min,mid;
min=0;
max=arr.length-1;

while(min<=max){
mid=(max+min)>>1;
if(key>arr[mid])
min=mid+1;
else if(key<arr[mid])
max=mid-1;
else
return mid;
}
}

//对数组进行反转
function reverseArray(arr){
for(var start=0,end=arr.length-1;start<end;start++,end--){
swap(arr,start,end);
}
}
reverseArray(arr);
println("反转后:"+arr);
</script>
</body>
</html>


全局变量和局部变量
定义在函数体内部的变量叫做局部变量,而直接在脚本片段(<script><script/>)中定义的是全局变量。

var x=3;
function show(x){
x=8;
}
show(x);
document.write("x="+x);//3,x是全局变量,x=8是show中的局部变量,而全局变量还是x=3。


常见对象-Object
objectname.toString([radix])
Array 将 Array 的元素转换为字符串。结果字符串由逗号分隔,且连接起来。
Boolean 如果 Boolean 值是 true,则返回 “true”。否则,返回 “false”。
Date 返回日期的文字表示法。
Error 返回一个包含相关错误消息的字符串。
Function 返回如下格式的字符串,其中 functionname 是被调用 toString 方法函数的名称:
function functionname( ) { [native code] }
Number 返回数字的文字表示。
String 返回 String 对象的值。
默认 返回 “[object objectname]”,其中 objectname 是对象类型的名称。

object.valueOf( )
Array 数组的元素被转换为字符串,这些字符串由逗号分隔,连接在一起。其操作与 Array.toString 和 Array.join 方法相同。
Boolean Boolean 值。
Date 存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function 函数本身。
Number 数字值。
Object 对象本身。这是默认情况。
String 字符串值。

String基本功能

<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 演示string对象
* 表现形式:
* var str=new String("abc");
* var arr="abc";
*/
var str="abcde";
//            println(str);//abcde
//            println("len="+str.length);//len=5
//            alert(str.bold());//<B>abcde</B>,效果是加粗
//            println(str.fontcolor("red"));//同上<font></font>,效果是字体颜色
//            println(str.link("http://www.baidu.com/"));//超链接
println(str.substr(1,3));//bcd,包含头,也包含尾。从1开始,3是长度。
println(str.substring(1,3));//bc,包含头,不包含尾。1、3是首尾脚标。
</script>


string的自定义方法:

function trim(str){
//定义两个变量,一个记录开始位置,一个记录结束的位置
//对开始位置的字符进行判断,如果是空格,就进行递增,直到不是空格位置
//对结束位置的字符进行判断,如果是空格,就进行递减,直到不是空格位置
//必须要保证开始<=结束,这样才能保证截取
var start,end;
start=0;
end=str.length-1;
while(start<=end&&str.charAt(start)==" "){//charAt,返回指定索引位置处的字符。
start++;
}
while(start<=end&&str.charAt(end)==" "){//charAt,返回指定索引位置处的字符。
end--;
}
return str.substring(start,end+1);
}
var s="   ab c   ";
alert("-"+trim(s)+"-");//-ab c-


prototype 属性
返回对象类型原型的引用。

/*
* 既然trim方法是用来操作字符串的方法,可不可以像字符串已有的方法一样,
* 将此方法也定义到字符的对象中?能够用字符串对象直接调用。
* 这里就可以使用一个该字符串的原型属性来完成。
* 原型:就是该对象的一个描述,该描述中如果添加了新功能,那么它的对象都会具备这些新功能。
* 用prototype就可以获取这个原型对象。
* 通过prototype就可以对对象的功能进行扩展。
*
* 需求:想要给string对象添加一个可以去除字符串两端空格的新功能。
* 就可以使用原型属性来完成。
*/
//给string的原型中添加一个功能。注意,给对象添加新功能,直接使用对象.新内容。
//String.prototype.len=199;//给string的原型对象中添加一个属性,名为len,值为199
//添加行为
String.prototype.trim = function() {
var start, end;
start = 0;
end = this.length - 1;
while (start <= end && this.charAt(start) == " ") {// charAt,返回指定索引位置处的字符。
start++;
}
while (start <= end && this.charAt(end) == " ") {// charAt,返回指定索引位置处的字符。
end--;
}
return this.substring(start, end + 1);
}

alert("-"+"   abc d e  ".trim()+"-");

/**
*字符串对象的新功能,将字符串进行反转
*/
String.prototype.reverse=function(){
var arr=this.toCharArray();

//将数组位置置换功能进行封装,并定义到了反转功能内部
function swap(arr,a,b){
var temp=arr[a];
arr[a]=arr[b];
arr[b]=temp;
}
for(var x=0,y=arr.length-1;x<y;x++,y--){
swap(arr,x,y);
}
return arr.join("");//join方法,将字符数组连接
}


Array 对象
提供对创建任何数据类型的数组的支持。
arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
参数arrayObj 必选项。要赋值为 Array 对象的变量名。

size 可选项。可选项数组的大小。由于数组的下标是从零开始,创建的元素的下标将从零到 size -1。

element0,...,elementN 可选项。要放到数组中的元素。这将创建具有 n + 1 个元素的长度为 n + 1 的数组。使用该语法时必须有一个以上元素。

concat 方法 (Array) 返回一个新数组,这个新数组是由两个或更多数组组合而成的。

join 方法
返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来。
arrayObj.join(separator)

//push 方法 将新元素添加到一个数组中,并返回数组的新长度值。
arr3.push(arra,arrb,arrc);//arra,arrb,arrc为数组,push方法实现了二维数组

<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
*演示数组
*/
var arr=["nbc","haha","cba","aaa","abcd"];
var arr2=["qq","xiaoqiang"];

println(arr);
println(arr2);

//合并数组:在arr数组上连接一个元素"mm",再连接一个arr数组
var newArr = arr.concat("mm",arr2);//效果:将"mm"作为新数组中的元素,arr2中的元素也作为新数组的元素
//println(newArr);
println(arr.join("-"));//nbc-haha-cba-aaa-abcd

//println(myJoin(arr,"="));
//模拟join方法
function myJoin(arr,separator){
var str="";
for(var x=0;x<arr.length;x++){
if(x!=arr.length-1)
str+=arr[x]+separator;
else
str+=arr[x];
}
return str;
}

//pop 方法 移除数组中的最后一个元素,并返回元素
/*
println("<hr/>");
println(arr);//nbc,haha,cba,aaa,abcd
arr.pop();
println(arr);//nbc,haha,cba,aaa

//shift 方法 移除数组中的第一个元素,并返回该元素。
println(arr.shift());//nba
println(arr)

//slice 方法 (Array) 返回一个数组的一段。
//arrayObj.slice(start, [end]),包含头不包含尾
*/

println("<hr/>");
//sort 排序
println(arr);
//arr.sort();
println(arr);//aaa,abcd,cba,haha,nbc

//splice 方法 从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。
//arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])
//删除元素并进行元素的替换
//var temp= arr.splice(1,3,8080,9527,"xixixi","wangcai");
//println(temp);//删除的元素:haha,cba,aaa
//println(arr);//在删除位置,并插入新元素nbc,8080,9527,xixixi,wangcai,abcd

//println(arr.unshift("uuuu"));//将元素添加到数组的首位
println(arr);//uuuu,nbc,haha,cba,aaa,abcd
</script>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 数组练习
* 用数组可以实现js中的堆栈或者队列数据结构
*/
var arr=[];
//arr.unshift("abc1","abc2","abc3");//添加元素,输出顺序为:abc1,abc2,abc3

arr.unshift("abc1");
arr.unshift("abc2");
arr.unshift("abc3");//输出为abc3,abc2,abc1
println(arr);

//arr.pop();//删除尾部元素,abc3,abc2
arr.shift();//删除首部元素,abc2,abc1
println(arr);
</script>

<script type="text/javascript" src="arraytool.js"></script>
<script type="text/javascript">
println("<hr/>");
/*
* 给数组对象添加新功能,并使用到原型属性
*/
var array=["nbc","haha","cba","aaa","abcd"];

var maxValue=arr.getMax();
println("maxValue:"+maxValue);
println(array);
</script>
</body>
</html>


Date 对象
启用基本存储器并取得日期和时间。
dateObj = new Date()
dateObj = new Date(dateVal)
dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])

month 必选项。表示的月份,是从 0 到 11 之间的整数( 1 月至 12 月)。

<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 演示js中的日期,Date
*/
var date=new Date();
//println(date);
//println(date.toLocaleString());//日期和时间
//println(date.toLocaleDateString());//只有日期
var year=date.getFullYear();//getYear方法已过时
var month=date.getMonth()+1;//注意month的取值为0-11
var day=date.getDate();
var week=getWeek(date.getDay());
println(year+"年"+month+"月"+day+"日    "+week);

function getWeek(num){
var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return weeks[num];
}
println("<hr/>")

//日期对象和毫秒值之间的转换
var date2=new Date();
//获取毫秒值,日期对象对象——>毫秒值
var time=date2.getTime();
println("time:"+time);
//将毫秒值转成日期对象
//1.new Date(time);
//2.setTime()
var date3=new Date(time);
//println(date3);

//3.将日期对象和字符串之间进行转换,使用parse
//日期对象转成字符串 date.toLocaleDateString()、date.toLocaleString()
//将字符串转成日期对象。将具备指定格式的日期字符串——>毫秒值——>日期对象
var str_date="9/28/2017";

var time2=Date.parse(str_date);
var date4=new Date(time2);
println(date4);//Thu Sep 28 00:00:00 UTC+0800 2017
println(date4.toLocaleDateString());
</script>


JS特有语句
为了简化对象调用的书写,可以使用JS中的特有语句with来完成。
格式:
with(对象)
{
在该区域中可以直接使用指定的对象的内容,不需要写对象。
}

<script type="text/javascript">
println("<hr/>");
var date=new Date();
function getWeek(num){
var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return weeks[num];
}
with (date) {
var year = getFullYear();//getYear方法已过时
var month = getMonth() + 1;//注意month的取值为0-11
var day = getDate();
var week = getWeek(date.getDay());
println(year+"年"+month+"月"+day+"日    "+week);
}
</script>


Math对象
是一个固有对象,提供基本数学函数和常数。
Math.[{property | method}]
参数
property 必选项。Math 对象的一个属性名。
method 必选项。Math.对象的一个方法名。

<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 演示Math对象,该对象中的方法都是静态的,不需要new,直接可以Math调用
*/
var num1=Math.ceil(12.34);//13,返回大于等于参数的最小整数
var num2=Math.floor(12.34);//12,返回小于等于参数的最大整数
var num3=Math.round(12.34);//12,四舍五入
println("num1="+num1);
println("num2="+num2);
println("num3="+num3);

var num4=Math.pow(10,2);//10^2
println("num4="+num4);

println("<hr/>")
for(var x=0;x<10;x++){
//var num=Math.floor(Math.random()*10+1);//伪随机数,取整

//parseInt,全局方法
var num=parseInt(Math.random()*10+1);//伪随机数,取整
println(num);
}
</script>


全局方法

<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*
* 演示global的全局方法
*/
println(parseInt("123")+1);//124

var val=parseInt("abc");
println("value="+val);//value=NaN,非法。可以通过isNaN来判断结果是否非法

var val=parseInt("12abc");
println("value="+val);//12,将abc舍弃

var num=parseInt("110",2);//将制定禁止的字符串转换成十进制,110——>6
println("num="+num);

var num1=parseInt("0x3c",16);
println("num1="+num1);//num1=60

//十进制——>其他进制,使用数字对象完成
var num3=new Number(6);
println("num3="+num3.toString(2));//num3=110,使用Number对象,十进制——>二进制
var num4=60;//JS是基于对象的语言,num4在底层是对象
println("num4="+num4.toString(16));//num4=3c
</script>


JS特有的语句-for in

格式:
for(变量 in 对象)//对对象进行遍历的语句
{
}

var arr=[32,80,65];
for(i in arr){
println(arr[i]);//遍历数组
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: