JavaWeb基础——JavaScript
JavaScript主要起对页面的一些动态操作以及与后台的交互作用
<html>
<head>
<meta charset="UTF-8">
<title>演示javascripttitle>
head>
<body>
<script type="text/javascript">
/*
通常高级程序设计预言所包含的语法内容：
1、关键字：预言中被赋予特殊含义的单词
2、标识符：用于标示数据表达式的符号，通常可以理解为在程序中自定义的名称，比如变量名、函数名
3、注释：注解说明解释程序
4、变量：用于标示内存中一片空间，用于存储数据，该空间中的数据是可以变化的，当数据不确定时使用变量
5、运算符：可以让数据进行运算的符号
6、语句：用于对程序的运行流程进行控制的表达式
7、函数：用于对功能代码进行封装，便于提高复用性
8、数组：对多数据进行存储，便于操作，即容器
9、对象：一个封装体，既可以封装数据又可以封装函数
*/
script>
<script type="text/javascript">
/*
js中定义变量，使用到关键字。
这个关键字就是var
*/
//定义变量，js是弱类型的
var x=3;//var不写也行，因为js是非严谨的语言
x="abc";//重新赋值为字符串abc
x=3.45;//赋值为小数，即数值类型
x=true;//赋值为boolean类型
x='c';//赋值为字符串c,不存在字符
// alert("x="+x);//这是一个函数，将具体的参数通过对话框进行显示
script>
<script type="text/javascript">
/*
运算符：
1、算术运算符
+ - * / % ++ --
2、赋值运算符
= += -= /=
3、比较运算符
4、逻辑运算符
5、位运算符
6、三元运算符
*/
//1、算术运算符演示
var a=3710;
// alert("a="+a/1000*1000);//a=3710 因为js是弱类型，即3.71*1000
var a1=2.3,b1=4.7;
// alert("a1+b1="+(a1+b1));
// alert("12"-1);//结果：11
// alert("12"+1);//结果：121
// alert(true+1);//结果：2 因为在js中false就是0或者null,非0，非null。就是true，默认用1表示
var n=3,m;
m=++n;
// alert("n="+n+",m="+m);
//===============================================
//2、赋值运算符
var i=3;
i=i+2;
i+=2;
// alert("i="+i);
//===============================================
//3、比较运算符
var z=3;
// alert(z!=4);
//===============================================
//4、逻辑运算符
var t=4;
// alert(t>3 && t<6);
//===============================================
//5、位运算符
var c=6;
// alert(c&3);
//===============================================
//6、三元运算符
// alert(3>10?100:200);
script>
<script type="text/javascript">
/*
细节：
1、undefined：未定义,其实它就是一个常量
*/
var xx;
// alert(xx);//undefined
// alert(xx==undefined);//结果：true
//要想获取具体值的类型，可以通过typeof来完成
// alert(typeof("abc"));//string
// alert(typeof(2.5));//number
// alert(typeof(true));//boolean
// alert(typeof(78));//number
// alert(typeof('9'));//string
script>
<script type="text/javascript">
var x=3;
// if(x=4)
if(4==x){//建议将常量放在左边，以报错来修正代码
alert("yes");
}
else{
alert("no");
}
script>
<script>
//循环结构
var x=1;
document.write("");
while(x<10)
{
//将数据直接写到当前页面中
document.write("x="+x+"
");
x++;
}
document.write("");
script>
<script type="text/javascript">
/*
练习：在页面中显示一个99乘法表,循环
*/
document.write("");
for(var x=1;x<=9;x++){
document.write("");
for(var y=1;y<=x;y++){
document.write(""+y+"*"+x+"="+y*x+" ");
}
document.write(" ");
}
document.write("
");
script>
body>
html>1、变量
<html>
<head>
<meta charset="UTF-8">
<title>局部变量和全局变量title>
head>
<body>
<script type="text/javascript">
/*
此处的x是全局变量，在整个页面都有用
*/
for(var x=0;x<3;x++){
document.write("x="+x);
}
document.write("x===="+x);
script>
<script type="text/javascript">
document.write("xx="+x);
script>
<script type="text/javascript">
/*只有在函数封装体中才是局部变量*/
function show(){
var x=6;//局部变量
}
document.write("x==="+x);//结果是未定义
script>
<script type="text/javascript">
var x=3;//全局变量x
function show(x){//局部变量x
x=8;
}
show(x);
document.write("x="+x);//结果：3
script>
body>
html>2、字符串
out.js
/**
* 打印指定参数数据到页面上，并换行
*/
function println(param){
document.write(param+"
");
}
/**
* 打印指定参数数据到页面上
*/
function print(param){
document.write(param);
}
<html>
<head>
<meta charset="UTF-8">
<title>js字符串title>
head>
<body>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript">
/*
字符串表现形式：
var str=new String("abc");
var str="abc"
*/
var str="abcde";
println("len="+str.length);
println(str);
alert(str.bold());//结果:abcd 写数据就是加粗
println(str.fontcolor());//给字体加颜色
println(str.link("http://www.baidu.com"));//给字符串加超链接
println(str.substr(1,3));//bcd 从下标为1到下标为3的位置
println(str.substring(1,3));//bc 从下标为1到下标为3的位置，包含头不包含尾
/*
发现js中的string对象方法有限，想要对字符串操作的其他功能
比如：去除字符串两端的空格，这时只能定义
*/
//去除字符串两端的空格
function trim(str){
/*
定义两个变量，一个记录开始的位置，一个记录结束的位置
对开始的位置的字符进行判断，如果是空格，就进行递增，直到不是空格为止
对结束的位置的字符进行判断，如果是空格，就进行递减，直到不是空格为止
必须要保证开始<=结束，这样才可以进行截取
*/
var start,end;
start=0;
end=str.length-1;
while(start<=end && str.charAt(start)==' '){
start++;
}
while(start<=end && str.charAt(end)==' '){
end--;
}
return str.substring(start,end+1);
}
var s=" ab c ";
alert("-"+trim(s)+"-");
/*
既然trim方法是用来操作字符串的方法，可不可以像字符串已有的方法一样，将该字符串也定义到字符串对象中呢？
直接用字符串对象调用就可以了
这里就可以使用一个字符串的原型属性来完成
原型：就是该对象的一个描述，改描述中如果添加了新功能
那么该对象都会具备这些新功能，而prototype就可以获取到这个原型对象
通过prototype就可以对对象的功能进行扩展
需求：给string对戏那个添加一个可以去除字符串两端空格的新功能
就可以使用原型属性来完成
*/
//给string的原型中添加一个功能，注意：给对象添加新功能直接使用对象
//对象新内容.新内容即可
// String.prototype.len=199;//给string的原型对象添加一个属性，名为len,值为199
// println("haha".len);//结果：199
//添加行为
// String.prototype.trim=trim;//和下面的效果一样
String.prototype.trim=function(){
var start,end;
start=0;
end=this.length-1;
while(start<=end && this.charAt(start)==' '){
start++;
}
while(start<=end && this.charAt(end)==' '){
end--;
}
return this.substring(start,end+1);
}
script>
body>
html>3、原型练习
stringtool.js
/**
* 字符串新功能，添加一个将字符串转成字符数组
* 返回一个数组
*/
String.prototype.toCharArray=function(){
//定义一个数组
var chs=[];
//将字符串中的每一位字符存储到字符数组中
for(var x=0;x<this.length;x++){
chs[x]=this.charAt(x);
}
return chs;
}
/*
* 添加一个，将字符串进行反转的方法
*
*/
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;xreturn arr.join("");
}
<html>
<head>
<meta charset="UTF-8">
<title>原型练习title>
head>
<body>
<script type="text/javascript" src="stringtool.js">script>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript">
/*
练习1、给字符串添加一个功能，将字符串变成一个字符数组
练习2、给字符串添加一个功能，将字符串进行反转
*/
var str="abcde";
println(str.toCharArray());
println(str.reverse());
script>
body>
html>4、函数
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<script type="text/javascript">
/*
js中的函数演示：
函数：就是一个功能的封装体
定义功能通常需要两个明确。
1、功能的结果
2、功能实现中的参与运算的未知的内容
js中的定义函数的格式
通过指定的关键字来定义
function 函数名（参数列表）{
函数体；
return 返回值；//如果没有具体的返回值，return语句可以省略不写
}
*/
function demo(){
alert("demo run");
return;
}
// demo();//调用函数
/*
需要加法运算
*/
function add(x,y){
return x+y;
}
var sum=add(4,5);
// alert("sum="+sum);
script>
<script type="text/javascript">
/*
函数的一些细节
1、只要使用函数的名称就是对这个函数的调用
2、函数中有一个数组在对传入的参数进行存储，这个数组就是argument
*/
function show(x,y){
// alert(x+":"+y);
for(var a=0;a<arguments.length;a++){
document.write(arguments[a]);
}
}
// show(4,5,6);//建议函数中定义了几个参数就传递几个实参
script>
<script type="text/javascript">
/*
函数的细节2：
*/
function getSum(){
return 100;
}
var sum=getSum();//getSum函数运行，并将返回的结果赋值给sum
var sum=getSum;//getSum本身是一个函数名，而函数本身在js中就是一个对象，getSum就是这个函数对象的引用
//将getSum这个引用的地址赋值给sum.这时sum也指向了这个函数对象
//相当于这个函数对象有两个函数名称
alert("sum="+sum);//打印的时候如果sum指向的是函数对象，那么会将该函数对象的字符串表现形式打印出来
//就是该函数的代码定义格式
script>
body>
html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<script type="text/javascript">
/*
js函数的其他表现形式
动态函数：使用的是js中内置的一个对象Function
用的不多,参数列表、函数体都是通过字符串动态指定的
*/
var add=new Function("x,y","var sum; sum=x+y; return sum;");
var he=add(4,8);
alert("he="+he);
function add2(x,y){
var sum;
sum=x+y;
return sum;
}
script>
<script type="text/javascript">
/*
匿名函数：没有名字的函数
通常是函数的简写形式
*/
var add3=function(a,b){
return a+b;
}
alert(add3(7,8));
script>
body>
html>5、进制转换及for语句的应用
<html>
<head>
<meta charset="UTF-8">
<title>全局方法title>
head>
<body>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript">
/*
全局方法演示
*/
// println(parseInt("123")+1);
var val=parseInt("12abc");//val=12
println("value="+val);
/*
将指定进制格式的字符串转成十进制
*/
var num=parseInt("110",2);
println("num="+num);
var num1=parseInt("0x3c",16);
println("num="+num);
//将十进制转成其他进制，使用数字对象完成
var num3=new Number(6);
println("num3="+num3.toString(2));
var num4=60;
println("num4="+num4.toString(16));
/*
js中的特有语句for in
格式：
for(变量 in 对象)//对对象进行遍历的语句
{
}
*/
var arr=[32,80,65];
for(i in arr){
println("i="+arr[i]);
}
println("
");
var numObj="abc";
for(x in numObj){
println(x);
}
script>
body>
html>6、对象
<html>
<head>
<meta charset="UTF-8">
<title>js对象title>
head>
<body>
<script type="text/javascript">
/*
object对象：
toString():将对象编程字符串
valueOf():返回指定的原始值
*/
function show(){
alert("show run");
}
alert(show.toString());
script>
body>
html>自定义对象
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象title>
head>
<body>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript">
/*
js自定义对象
如果想要自定义对象，应该先对对象进行描述
js是基于对象，不是面向对象的，不具备描述事物的能力
如果想按照面向对象的思想编写js
就要先描述，在js中，可以用函数来模拟面向对象的中的描述
*/
//用js来描述人
function Person(){//相当于构造器
// alert("person run");
}
//通过描述进行对象的建立 new
var p=new Person();
//动态给p对象添加属性，直接使用p属性名即可
p.name="zhangsan";
p.age=29;
//如果定义的p对象的属性赋值为一个函数，即是给p对象添加一个方法
p.show=function(){
alert("show:"+this.name+":"+this.age);
}
p.show();
var obj=new Object();
obj.name="god father";
obj.age=2013;
alert(obj.name+":"+obj.age);
/*
function Person(name,age){
//在给Person对象添加了两个属性
this.name=name;
this.age=age;
this.setName=function(name){
this.name=name;
}
this.getName=function(){
return this.name;
}
}
var p=new Person("旺财",20);
p.setName("小强");
alert(p.getName());
*/
var pp={
//定义一些成员
"name":"小明","age":38,
"getName":function(){
return this.name;
}
}
//对象调用成员有两种方式：对象.属性名 对象["属性名"]
alert(pp.age+":"+pp.getName());
script>
body>
html>7、数组
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<script type="text/javascript">
/*
javascript中的数组演示
数组用于存储更多的数据：是一个容器
特点：
1、长度是可变的
2、元素的类型是任意的
建议在使用数组时，存储同一类型的元素，操作起来方便点
js中的数组定义的两种方式：
1、var arr=[]; var arr=[3,1,5,8];
2、使用了javascript中的Array对象来完成的定义
var arr=new Array();//var arr=[]
var arr1=new Array(5);//数组定义并且长度是5
var arr2=new Array{5,6,7}//定义一个数组，元素是5,6,7
*/
var arr=[23,78,100];
// alert(typeof(arr));//对象类型object
// alert("len:"+arr.length);
//遍历数组
for(var x=0;x"arr[" +x+"]="+arr[x]+"
");
}
script>
body>
html>数组的功能
<html>
<head>
<meta charset="UTF-8">
<title>Array基本功能title>
head>
<body>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript">
/*
演示数组
*/
var arr=["nba","haha","cba","aaa","abc"];
var arr2=["qq","xiaoqiang",70];
println(arr);
println(arr2);
//在arr数组上连接一个元素"mm",在连接一个arr2数组
var newArr=arr.concat("mm",arr2);
println(newArr);//结果：nba,haha,cba,aaa,abc,mm,qq,xiaoqiang,70
println(arr.join("-"));//指定数组中元素的连接符连接元素
//移除数组中的最后一个元素，并返回该元素，pop
/*
println("
");
println(arr);
println(arr.pop());
println(arr);
*/
//添加一个元素，并返回该数组的长度
// println(arr.push("a"))
//删除并返回第一个元素
// println(arr.shift());
//返回一个数组的一段,不包含最后4的位置元素
// println(arr.slice(2,4));
//数组排序
// println(arr.sort());
//移除相应位置的元素并添加,返回所移除的元素
/*
var temp=arr.splice(1,3,"xixi","wang","cai");
println(temp);
println(arr);
*/
//将指定数组元素插入数组开头
println(arr.unshift("uuu"));
println(arr);
script>
body>
html>栈、队列的模拟
<html>
<head>
<meta charset="UTF-8">
<title>堆栈和队列title>
head>
<body>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript">
/*
数组练习
*/
var arr=[];
//模拟队列结构
arr.unshift("abc1");
arr.unshift("abc2");
arr.unshift("abc3");
/*
println(arr.pop());
println(arr.pop());
println(arr.pop());
*/
//模拟堆栈结构
println(arr.shift());
println(arr.shift());
println(arr.shift());
script>
body>
html>对数组的操作
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<script type="text/javascript">
/*
综合练习：
1、定义功能，完成对数组的最值获取
2、对数组排序
3、对数组查找
4、对数组元素进行反转
*/
var arr=[66,13,27,35];
//取最值
function getMax(arr){
var max=0;
for(var x=1;xif (arr[x]>arr[max])
max=x;
}
return arr[max];
}
var maxValue=getMax(arr);
// alert("maxValue:"+maxValue);
//排序
function mysort(arr){
for(var x=0;x1;x++){
for(var y=x+1;yif(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+"
");
}
// document.write("排序前："+arr);
println("排序前："+arr);
mysort(arr);
println("排序后："+arr);
script>
<script type="text/javascript">
/*
3、对数组查找
4、对数组元素进行反转
*/
//查找
function searchElement(arr,key){
for(var x=0;xif (arr[x]==key)
return x;
}
return -1;
}
//折半，必须有前提，必须是有序的数组
function binarySearch(arr,key){
var max,min,mid;
min=0;
max=arr.length-1;
while(min>1;
if(key>arr[mid])
min=mid+1
else if(key1;
else
return mid;
}
return -1;
}
//对数组的反转
function reverseArray(arr){
for(var start=0,end=arr.length-1;start"反转后："+arr);
script>
body>
html> 8、常见对象
Date对象
<html>
<head>
<meta charset="UTF-8">
<title>常见对象Datetitle>
head>
<body>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript" >
/*
演示js中的日期 Date
*/
var date=new Date();
println(date.toLocaleString());//日期和时间
println(date.toLocaleDateString());//只有日期
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
var week=getWeek(date.getDay());
println(year+"-"+month+"-"+day+"-"+week);
function getWeek(num){
var weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return weeks[num];
}
//日期对象和毫秒值之间的转换
var date2=new Date();
//获取毫秒值 日期对象--->毫秒值
var time=date2.getTime();
println("time:"+time);
//将毫秒值转成日期对象
//1、new Date(time);//setTime();
/*
将日期对象和字符串之间进行转换
日期对象转成字符串：toLocalString toLocalDateString
*/
//将字符串转成日期对象，具备指定格式的日期字符串--->毫秒值--->日期对象
var str_date="9/28/2017";
var time2=Date.parse(str_date);
var date3=new Date(time2);
println(date3.toLocaleDateString());
/*
为了简化对象调用内容的书写
可以使用js中的特有语句with来完成
格式：
with(对象){
在该区域中可以直接使用指定的对象的内容，不需要写对象
}
例如：
with(date){
var year=getFullYear();
var month=getMonth()+1;
var day=getDate();
var week=getWeek(getDay());
println(year+"-"+month+"-"+day+"-"+week);
}
跟上面的效果一样
*/
script>
body>
html>math对象
<html>
<head>
<meta charset="UTF-8">
<title>Math方法演示title>
head>
<body>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript">
/*
math对象中的方法都是静态的，不需要new,直接调用即可
*/
var num1=Math.ceil(12.34);//返回大于等于指定参数的最小整数
var num2=Math.floor(12.34);//返回小于等于指定数据的最大整数
var num3=Math.round(12.54);//四舍五入
println("num1="+num1);
println("num2="+num2);
println("num3="+num3);
var num4=Math.pow(10,2);//平方
println("num4="+num4);
println("
");
for(var x=0;x<10;x++){
// var num=Math.floor(Math.random()*10+1);//返回1-10之间的随机数
var num=parseInt(Math.random()*10+1);//返回由字符串转换得到的整数
println(num);
}
script>
body>
html>