java学习【web基础-Javascript入门】

Javascript入门
1.1 引入

html：负责网页结构
css： 负责网页美观
javascript：负责用户与浏览器交互。

1.2 javacript的来由

1994时，网景公司研发了livescript语言，领航者浏览器（把livescript语言植入到浏览器）
微软公司的IE浏览器，后来自己花钱20亿美金研发jscript

1995年，Sun公司，推出jdk1.1 .谈合作。livescript-》javascript

1998，美国在线收购网景。

2003，直接关闭网景。网景6-7亿美金。2千万美金，组建谋智基金（火狐）

javascript   jscript    语法不同。 ECMA（欧洲制造商联盟）

scirpt的语法：
1）基础语法（ECMA规范）
2）BOM编程（没有统一）
3）DOM编程（没有统一）

2.1 javascript使用
注释：

javascript的注释：单行 //   多行  /* */
css的注释：css  多行注释  /* */
html的注释 : <!--注释 -->

常用的函数：

alert("提示框");
document.write("向浏览器输出内容");

javascript的使用方法：

1）内部使用 
a)<script type="text/javascript">
js代码
</script>
b)弊端：和html代码混杂在一起，不好维护，不好重用

2）外部javascript（推荐使用）
<script src="1.js"></script>
优点:可以将html代码和js代码分离,管理起来更加方便
注意:不能使用自闭和的script标签导入js文件
<script src="1.js"/>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--js的内部使用-->
<script type="text/jscript">
//js中的弹出框
alert("hello!")
//给网页中写内容
document.write("world")
</script>


<!--js的外部使用-->
<script src="1.js"></script>
</head>

<body>
</body>
</html>

//1.js
document.write("hello");

2.2 变量和数据类型
1）定义和赋值变量： var 变量名=值;

var a = 10;
//var a = 20;
var b = 3.14;
var c = 'c';
var d = "hello";
var e = true;
var f = new Object();

注意：

1）使用var关键词定义变量，var可以省略的，但是不建议省略var
2) 在js中可以重复定义变量，后面定义的变量会覆盖前面的变量。
3) js是弱类型语言，使用var来定义任何数据类型
4）js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined），未赋值的变量不能使用

typeof(变量)：查看变量的数据类型

2)js的数据类型分类：

a）number： 无论整数还是小数，都是number类型
b) string:  无论字符还是字符串，都是string类型
c) boolean
d) object  对象类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//定义变量
var a = 100;
var b = 12.24;
var c = 'f';
var d = "abc";
var e = true;
var f = new Object();

//js中的变量可以重复定义,只不过后面的变量会覆盖前面的变量
 j=200;
 j=300;
//定义了一个变量h,并没有给h初始化,undefined 
var h;

//查看每一个变量的类型
 document.write("a:"+typeof(a));
 document.write("</br>");
 document.write("b:"+typeof(b));
 document.write("</br>");
 document.write("c:"+typeof(c));
 document.write("</br>");
 document.write("d:"+typeof(d));
 document.write("</br>");
 document.write("e:"+typeof(e));
 document.write("</br>");
 document.write("f:"+typeof(f));
 document.write("<br>");
 document.write(j);
 document.write("<br/>");
 document.write(h);
</script>
</head>

<body>
</body>
</html>

2.3 类型转换函数

 string->number(整数) :  parserInt(变量)
 string->number(小数):  parserFloat(变量)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var a = "13.14";
var b = "520";

document.write("转换之前的数据类型："+"a:"+typeof(a)+"<br/>");
document.write("转换之前的数据类型："+"b:"+typeof(b)+"<br/>");

document.write("转换之后的数据类型："+"a:"+typeof(parseFloat(a))+"<br/>");
document.write("转换之后的数据类型："+"b:"+typeof(parseInt(b))+"<br/>");


</script>
</head>

<body>
</body>
</html>

2.4 运算符

1)算术运算符： + - * /  %
2)比较运算符： > <  >=  <= ==
3)逻辑运算符： &&  ||   !
4)三目运算符:  表达式 ? true的结果 : false的结果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var a = 100;
var b = 300;
var c = 400;
//1)算术运算符： + - * / %
document.write(a+b+"<br>");
document.write(a-b+"<br>");
document.write(a*b+"<br>");
document.write(a/b+"<br>");
document.write(a%b+"<br>");
document.write("<hr>");

//2)比较运算符： > < >= <= ==
document.write(a>b);
document.write("<br/>");
document.write(a<b);
document.write("<br/>");
document.write(a>=b);
document.write("<br/>");
document.write(a<=b);
document.write("<br/>");
document.write(a==b);
document.write("<hr>");

//3)逻辑运算符： && || !
document.write((a>b)&&(a>c));//false
document.write("<br/>");
document.write((a>b)||(a>c));//false
document.write("<br/>");
document.write(!(a>b));//true
document.write("<br/>");

document.write("<hr>");
//4)三目运算符: 表达式 ? true的结果 : false的结果
var age = 17;
age>18?alert("成年人"):alert("非成年人");

</script>
</head>

<body>
</body>
</html>

2.5 流程控制语句
if语句
if(表达式){
语句
}else{
语句
}
条件可以是：

布尔值：true：成立 ； false:不成立
number：非0：成立； 0： 不成立
string: 非空字符串： 成立 ； 空字符串： 不成立
object: 非null: 成立；  null：不成立

<script type="text/javascript">
if(null){
alert("条件成立");
}
else {alert("条件不成立");}//条件不成立
</script>

swtich语句
swtich(变量){
case 选项1:
语句;
break; 如果不break，就会继续下面选项的语句
case 选项2:
语句;
break;
default:
默认;
}

注意：

case的条件：
1）可以是常量. string,number
2）可以是变量。（java是不能是变量）
3)可以是表达式 （java不能这样）

var i = "b";
var b = "b";
switch(i){
case "a":
document.write("你选择了a");
break;  
case b:
document.write("你选择了b");
break;
case "c":
document.write("你选择了c");
break;
case "d":
document.write("你选择了d");
break;
default:
document.write("你选择了其他");
break;
}

    var age = 20;
switch(true){
case age>=18:
document.write("他是成年人");
break;
case age<18:
document.write("他是未成年人");
break;
    }

for语句：
for(初始化语句;条件判断语句;流程控制语句){
循环体语句
}

需求：页面上打印十次helloworld

for(var i=0;i<10;i++){
document.write("helloword");
document.write("<br>");
        }

需求：对1-100进行求和

var result = 0;
for(var i=1;i<=100;i++){
result+=i;
    }
    document.write("结果为:"+result);

while语句
初始化语句
while(条件判断语句){
循环体语句;
条件控制语句;
}
需求：在页面上打印十次helloworld;

var i = 0;
while(i<10){
document.write("helloword");
document.write("<br>");
        i++;

do-while语句
初始化语句;
do{
循环体语句;
条件控制语句;
}while(判断条件语句)

需求：在页面上打印十次helloworld;

var i = 0;
do{
document.write("helloword");
document.write("<br>");
        i++;
        }while(i<10);

循环语句课堂练习（for循环的嵌套）：
1.显示※为三角型，5行，第1行有1个※，第2行有2个※……

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//1,显示"*"为三角型，5行，第1行有1个"*"，第2行有2个"*"……
for(var i=1;i<6;i++){
for(var j=0;j<i;j++){
 document.write("*");
 }
 document.write("<br>");
 }

</script>
</head>

<body>
</body>
</html>

2.打印99乘法表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//2. 打印99乘法表
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
var sum=i*j;
 document.write(i+"*"+j+"="+sum);
 document.write("&nbsp;");}
 document.write("<br>");}
</script>
</head>

<body>
</body>
</html>

with语句：方便函数的调用
with(对象){
直接写对象的方法，无需写对象的名称
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">

with(document){
var i=0;
do{
 write("helloword");
 write("<br>");
 i++;
 }while(i<10); 
 }

</script>
</head>

<body>
</body>
</html>

1.6 函数
函数定义：

    function 函数名称(形式参数列表){
        语句  
    }

调用函数:

    函数名称(实际参数列表);

注意：

1）js的函数使用function定义，但是形式参数列表不能使用var关键词
2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型
3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数。
4）js中的形式参数和实际参数的数量可以不一致，依然可以调用。
5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。
6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数

注意：

实际参数<形式参数： NaN
实际参数>形式参数： 取前面的实际参数，后面的参数丢失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//定义一个函数,a和b的加法
function add(a,b){
 alert(arguments.length);
var res=a+b;
return res;}

function add(a,b,c){
 alert(arguments.length);
var res=a+b+c;
return res;}

var sum=add(1,2);
 document.write(sum);
</script>
</head>

<body>
</body>
</html>

案例：定义一个函数，输入月份，可以查询到该月份的天数
1,3,5,7,8,10,12 大月 31天
4,6,9,11 小月 30天
2 小小月 28天

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//当我的按钮的单击事件被触发以后需要执行的操作
function checkMonth(){
//获取单行输入域内的用户输入的月份值
var month = document.getElementById("month").value;
//使用if语句做判断,给出相应的提示 
if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){ 
 alert("该月有31天");
 }else if(month==4||month==6||month==9||month==11){
 alert("该月有30天");
 }else if(month==2){
 alert("该月有28天");
 }else{
 alert("星球上没有这个月份");
 }

 }

</script>
</head>

<body>
请输入你需要查询的月份:<input type="text" id="month"/>
<!--在这里需要给我的button标签添加一个单击事件-->
<input type="button" value="查询天数" onclick="checkMonth()" />

</body>
</html>

1.7 基于对象编程
内置对象
1.String对象

方式一：定义String对象
var str1 = new String("hello");
var str2 = new String("hello");
document.write("结果："+(str1==str2)+"<br/>");
valueOf（）:该方法返回对象的内容
document.write("结果："+(str1.valueOf()==str2.valueOf()));

方式二：
var str1 = "hello";
var str2 = "hello"; 
document.write("结果："+(str1==str2)+"<br/>");

常用方法：

charAt(索引): 返回指定索引的内容
indexOf(字符串): 返回首次出现指定字符的索引位置
lastIndexOf(字符串): 返回最后出现指定字符的索引位置
fontcolor("red"): 直接给字符串添加颜色
split("字符串"): 使用指定字符串切割字符串，返回字符串数组
substring(start,end); 截取字符串，start：开始索引， end:结束索引
substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">

var s1 = new String("hello");
var s2 = new String("hello");
 document.write(s1==s2);
 document.write("<br>");

//valueOf(),这个方法是取出对象中的内容
 document.write(s1.valueOf()==s2.valueOf());
 document.write("<br>");

//创建字符串的方式2:直接赋值
var s3 = "hello";
var s4 = "hello";
 document.write(s3==s4);
 document.write("<br>");

 document.write("<hr>");

//charAt(索引): 返回指定索引的内容
 document.write(s1.charAt(1));
 document.write("<br>");

//indexOf(字符串): 返回首次出现指定字符的索引位置
 document.write(s1.indexOf("e"));
 document.write("<br>");

//lastIndexOf(字符串): 返回最后出现指定字符的索引位置
 document.write(s1.lastIndexOf("l"));
 document.write("<br>");

//fontcolor("red"): 直接给字符串添加颜色
 s3 = s3.fontcolor("red");
 document.write(s3);
 document.write("<br>");

var s5 = "java-php-web";
//split("字符串"): 使用指定字符串切割字符串，返回字符串数组
var arr = s5.split("-");
for(var i =0;i<arr.length;i++){
 document.write(arr[i]);
 document.write("<br>");
 }

 document.write("<br>");
//substring(start,end); 截取字符串，start：开始索引， end:结束索引
 document.write(s4.substring(0,2));
 document.write("<br>");

//substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
 document.write(s4.substr(0,2));


</script>
</head>

<body>
</body>
</html>

Number对象

方式一：定义Number对象
var num1 = new Number(20);
var num2 = new Number(20);
方式二：
var num1 = 20;
var num2 = 20;
对比
document.write((num1==num2)+"<br/>");
document.write(num1.valueOf()==num2.valueOf());

Boolean对象

var b1 = new Boolean(true);
var b2 = new Boolean(true);
document.write((b1==b2)+"<br/>");
document.write(b1.valueOf()==b2.valueOf());

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//Boolean对象
var b1 = new Boolean(true);
var b2 = new Boolean(true);
 document.write(b1==b2);
 document.write("<br>");
 document.write(b1.valueOf()==b2.valueOf());
 document.write("<br>");


//Number对象
var n1 = new Number(10);
//document.write(n1);
var n2 = new Number(10);
 document.write(n1==n2);
 document.write("<br>");
 document.write(n1.valueOf()==n2.valueOf());

</script>
</head>

<body>
</body>
</html>

Math对象
常用的方法：

1）ceil()： 向上取整。 如果有小数部分的话，直接+1
2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位
3) round(): 四舍五入取整。满5进一
4）random(): 生成一个随机的0-1的小数 .包含0，不包含1
5）max(): 返回最大值
6）min(): 返回最小值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">

var i = 3.14;
//1）ceil()： 向上取整。 如果有小数部分的话，直接+1
 document.write(Math.ceil(i));
 document.write("<br>");

//2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位
 document.write(Math.floor(i));
 document.write("<br>");

//3) round(): 四舍五入取整。满5进一
 document.write(Math.round(i));
 document.write("<br>");

//4）random(): 生成一个随机的0-1的小数 .包含0，不包含1
 document.write(Math.random());
 document.write("<br>");

//5）max(): 返回最大值
 document.write(Math.max(2,3,5,7));
 document.write("<br>");


//6）min(): 返回最小值 
 document.write(Math.min(2,3,5,7));


</script>
</head>

<body>
</body>
</html>

Date对象

//创建日期
var date = new Date(); //取当前系统日期时间    java: SimpleDateFormat对象 yyyy-MM-dd 格式化
//document.write(date);  //默认格式
//格式： 2015年06月01日 15时12分30秒
//年份
document.write(date.getFullYear()+"年");
//月
document.write((date.getMonth()+1)+"月");
//日
document.write(date.getDate()+"日");
//星期
document.write("星期"+date.getDay()+"&nbsp;");
//时
document.write(date.getHours()+"时");
//分
document.write(date.getMinutes()+"分");
//秒
document.write(date.getSeconds()+"秒");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//创建一个date对象
var date = new Date();
 document.write(date);
 document.write("<br>");

//在java中我们使用日期的格式化对象SimapleDateFormat() 给一个模式:yyyy-MM-dd 
//document.write(date.getYear());
 document.write("<br>");
//获取年份
 document.write(date.getFullYear()+"年");
//获取月份
 document.write(1+date.getMonth()+"月");
//获取日期
 document.write(date.getDate()+"日&nbsp;&nbsp;");

//获取时
 document.write(date.getHours()+"时");
//获取分
 document.write(date.getMinutes()+"分");
//获取秒
 document.write(date.getSeconds()+"秒");


</script>
</head>

<body>
</body>
</html>

案例练习：网页时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<span id="sapnTime"></span>
</body>
<script type="text/javascript">

//创建一个获取当前时间的方法
function getTime(){
//获取span标签对象
var spanTime = document.getElementById("sapnTime");
//创建日期对象
var date = new Date();
//获取年月日,时分秒进行字符串拼接
var time = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"&nbsp;&nbsp;"+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds();

//给标签体设置内容,innerHTML这个属性
 spanTime.innerHTML=time;

 }

//调用设置时间的方法
//getTime();//这样的方式对上面设置时间的方法只调用了一次,所以我们的时间无法实现动态的设置变化

//如果需要让时间动起来的话,我们需要每隔一秒调用getTime()这个方法一次
 window.setInterval("getTime()",1000);
//参数1:调用的函数名称 参数2:每隔多久调用一次,调用的次数没有限制


</script>
</html>

Array数组对象
方式一：创建数组

1.1 指定数组长度
var arr = new Array(3);

1.2 不指定数组长度、默认0个元素
var arr = new Array();

1.3 指定具体内容
var arr = new Array(10,"hello",true);

方式二：不需要new，直接指定内容

var arr = [10,"java",false];

注意：

1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。
2) js的数组可以存放任意类型的元素。

常用的方法：

join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串
reverse(): 反转数组中的元素
sort():排序（数字按从小到大，字母按a-z）

常用的属性：length 数组的长度

for-in语句（数组讲完之后再讲，和普通for循环遍历对比）：
for(var 遍历 in 数组){

}
var arr = [10,20,30,40];
作用：遍历数组
需求：定义数组进行遍历

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">

//1.1:var arr = new Array(3);
var arr = new Array(3);
//arr1[0] = "741";//如果没有，会显示undefined
 arr[1] = 200;
 arr[2] = 300;
 arr[3] = 400;

//1.2 var arr = new Array(); 创建数组不指定长度
var arr2 = new Array();
 arr2[0] = 100;
 arr2[1] = true;
 arr2[2] = "hello";


//1.3 var arr = new Array("hello",100,200);
var arr3 = new Array(100,200,300);


//方式2:创建数组,并给数组直接赋值不需要new
var arr4 = [100,200,"world"];


//遍历数组
for(var i=0;i<arr4.length;i++){
 document.write(arr4[i]);
 document.write("<br>");
 }


 document.write("<hr>");
//join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符
var arr5 = ["jave","php","web"];
var str = arr5.join("-");
 document.write(str);

 document.write("<br>");

//reverse(): 反转数组中的元素
 arr5 = arr5.reverse();
for(var i=0;i<arr5.length;i++){
 document.write(arr5[i]);
 document.write("<br>");
 }


</script>
</head>

<body>
</body>
</html>

秒客网

java学习【web基础-Javascript入门】

相关文章