1 javascript基础语言
javascript语法体系1）EMCA基础语法（统一）
2）BOM编程（不统一）
3）DOM编程（不统一）
1.1 javascript使用
<!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>javascript基础</title>
<script type="text/javascript">
//java 单行 // 多行 /* */ 文档注释 /** */ javadoc
//css 多行注释 /* */
//javascript 单行 // 多行 /* */
/*
常用的函数：
alert("提示框");
document.write("向浏览器输出内容");
*/
//alert("提示框");
//document.write("输出内容");
/*
javascript的使用方法：
1）内部javacript:
a)在html页面中使用<script>标签，在<script>标签体中写js内容
b)弊端：和html代码混杂在一起，不好维护，不好重用
2）外部javascript（推荐使用）
*/
</script>
<!-- 导入外部js文件
注意： 不能使用<script src="01.j/s"> 空标签方式导入
-->
<script src="01.js"></script>
</head>
<body>
</body>
</html>
1.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）定义和赋值变量： var 变量名=值;
注意：
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 对象类型
*/
var a = 10;
//var a = 20;
var b = 3.14;
var c = 'c';
var d = "hello";
var e = true;
var f = new Object();
document.write("a的值为："+a +",a的数据类型是:"+typeof(a)+"<br/>");
document.write("b的值为："+b +",b的数据类型是:"+typeof(b)+"<br/>");
document.write("c的值为："+c +",c的数据类型是:"+typeof(c)+"<br/>");
document.write("d的值为："+d +",d的数据类型是:"+typeof(d)+"<br/>");
document.write("e的值为："+e +",e的数据类型是:"+typeof(e)+"<br/>");
document.write("f的值为："+f +",f的数据类型是:"+typeof(f)+"<br/>");
</script>
</head>
<body>
</body>
</html>
1.3 类型转换函数
<!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">
/*
string->整数： parseInt(变量)
注意：
1）使用parseInt函数转换时，转换的内容中的第一个是数值类型，就可以继续转换，直到遇到非数组类型为止。
string->小数： parseFloat(变量)
*/
var a = "10";
a = "10a";
document.write("a的类型是(转换前)："+typeof(a)+"<br/>");
//转换
a = parseInt(a);
document.write("a的类型是(转换后)："+typeof(a)+",值为："+a+"<br/>");
var b = "3.14";
b = parseFloat(b);
document.write("b的类型是(转换后)："+typeof(b)+",值为："+b+"<br/>");
</script>
</head>
<body>
</body>
</html>
string->number(整数) : parserInt(变量)
string->number(小数): parserFloat(变量)1.4 运算符
<!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)算术运算符： + - * / %
2)比较运算符： > < >= <= ==
3)逻辑运算符： && || !
4)三目运算符: 表达式 ? true的结果 : false的结果
注意：
在js中，布尔值可以用true用1来代表，false用0来代表
*/
/*
var a = 10;
var b = false;
document.write("结果为："+(a/b)+"<br/>");
document.write("结果为："+(a+b)+"<br/>");
*/
/*
var a = 10;
var b = 20;
document.write("结果为:" +(a<b) + "<br/>");
*/
var a = 1;
var b = true;
document.write("结果为:"+(a=b));
/*
document.write("结果为:"+(false&&true)+"<br/>");
document.write("结果为:"+(false||true)+"<br/>");
document.write("结果为:"+(!true)+"<br/>");
*/
/*
var age = 12;
document.write( age>=18 ? "成年人" : "未成年人");
*/
</script>
</head>
<body>
</body>
</html>
1.5 流程控制语句
if
swtich
for
while
do-while
for-in
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">
/*
if语句
if(表达式){
语句
}else{
语句
}
条件可以是：
布尔值：true：成立 ； false:不成立
number：非0：成立； 0： 不成立
string: 非空字符串： 成立 ； 空字符串： 不成立
object: 非null: 成立； null：不成立
*/
/*
if(null){
alert("条件成立");
}else{
alert("条件不成立");
}
*/
/*
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(初始化语句;判断进入条件;步长语句){
语句
}
*/
/*
var result = 0;
for(var i=1;i<=100;i++){
result+=i;
}
document.write("结果为:"+result);
*/
/*
while语句
while(表达式){ true的时候才进入循环
语句
}
*/
/*
var i = 1;
while(i<=5){
document.write("helloworld<br/>");
i++;
}
*/
/*
do-while语句
do{
语句
}while(表达式)
*/
var i = 1;
do{
document.write("helloworld<br/>");
i++;
}while(i<=5);
</script>
</head>
<body>
</body>
</html>
/*
for-in语句：
for(var 遍历 in 数组|对象){
}
作用：
1）遍历数组
2）对象
注意：
遍历对象的时候，变量是属性的名称，如果获取属性值，则 p[i];
*/
//定义数组
/*
var arr = [10,20,30,40];
//遍历数组
//使用for循环
for(var i=0;i<arr.length;i++){
document.write(arr[i]+",");
}
document.write("<hr/>");
//使用for-in遍历
for(var i in arr){
document.write(arr[i]+",");
}
*/
//定义对象
function Person(name,age){
this.name = name;
this.age = age;
}
//创建对象
var p = new Person("eric",20);
//遍历对象
for(var i in p){
document.write(p[i]+"<br/>");
}
/*
with语句：方便函数的调用
with(对象){
直接写对象的方法，无需写对象的名称
}
*/
with(document){
for(var i=1;i<=5;i++){ //行数
for(var j=1;j<=i;j++){ // 控制星星数
write("* ");
}
write("<br/>");
}
write("<hr/>");
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
write(i+"*"+j+"="+(i*j)+" ");
}
write("<br/>");
}
}
1.6 函数
<!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 函数名称(形式参数列表){
语句
}
调用函数:
函数名称(实际参数列表);
注意：
1）js的函数使用function定义，但是形式参数列表不能使用var关键词
2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型
3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数。
4）js中的形式参数和实际参数的数量可以不一致，依然可以调用。
5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。
6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数
*/
function add(a,b){ //a=10 b=20 40
//alert(arguments.length);
for(var i=0;i<arguments.length;i++){
document.write(arguments[i]+",");
}
var result = a+b;
document.write("两个参数的结果为："+result);
//return result;
}
function add(a,b,c){ // a=10 b=20 c undefined a+b+c=NaN
var result = a+b+c;
document.write("三个参数的结果为："+result);
}
//var s = add(10,20);
//document.write("返回值："+s);
add(10,20);
/*
实际参数<形式参数： NaN
实际参数>形式参数： 取前面的实际参数，后面的参数丢失
*/
</script>
</head>
<body>
</body>
</html>
1.7 基于对象编程
内置对象
String对象
<!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>String对象</title>
<script type="text/javascript">
//方式一：定义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(): 直接给字符串添加颜色
replace(): 替换指定的字符串
split(): 使用指定字符串切割字符串，返回字符串数组
substring(start,end); 截取字符串，start：开始索引， end:结束索引
substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
*/
var str ="hellojava";
document.write(str.charAt(4)+"<br/>");
document.write(str.indexOf("a")+"<br/>");
document.write(str.lastIndexOf("a")+"<br/>");
document.write(str.fontcolor("#0000ff")+"<br/>");
document.write(str.replace("java","itcast")+"<br/>");
document.write(str.substring(5,9)+"<br/>");
document.write(str.substr(5,4));
/*
var str = "java-net-php-平面";
var strArray = str.split("-");
for(var i=0;i<strArray.length;i++){
document.write(strArray[i]+",");
}
*/
</script>
</head>
<body>
</body>
</html>
Number对象
<!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>Number对象</title>
<script type="text/javascript">
//方式一：定义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());
*/
var b1 = new Boolean(true);
var b2 = new Boolean(true);
document.write((b1==b2)+"<br/>");
document.write(b1.valueOf()==b2.valueOf());
</script>
</head>
<body>
</body>
</html>
Boolean对象
Math对象
<!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>Math对象</title>
<script type="text/javascript">
/*
常用的方法：
1）ceil()： 向上取整。 如果有小数部分的话，直接+1
2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位
3) round(): 四舍五入取整。满5进一
4）random(): 生成一个随机的0-1的小数 .包含0，不包含1
5）max(): 返回最大值
6）min(): 返回最小值
*/
var num = 3.50;
document.write(Math.ceil(num)+"<br/>");
document.write(Math.floor(num)+"<br/>");
document.write(Math.round(num)+"<br/>");
document.write(Math.round(Math.random()*100)+"<br/>");
document.write(Math.max(10,6,54,23,76)+"<br/>");
document.write(Math.min(10,6,54,23,76)+"<br/>");
</script>
</head>
<body>
</body>
</html>
Date对象
<!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>Date对象</title>
<script type="text/javascript">
//创建日期
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()+" ");
//时
document.write(date.getHours()+"时");
//分
document.write(date.getMinutes()+"分");
//秒
document.write(date.getSeconds()+"秒");
</script>
</head>
<body>
</body>
</html>
Array数组对象
<!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>Array数组</title>
<script type="text/javascript">
/*
注意：
1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。
2) js的数组可以存放任意类型的元素。
*/
//方式一：创建数组
//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];
//alert(arr.length);
//给数组赋值
/*
arr[0]=10;
arr[1]="hello";
arr[2]=true;
*/
//alert(arr.length);
//遍历 length属性： 表示数组的长度
/*
for(var i=0;i<arr.length;i++){
document.write(arr[i]+",");
}
*/
/*
常用的方法：
join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串
reverse(): 反转数组中的元素
*/
var arr = ["java","net","php","ios"];
/*
var str = arr.join("-");
document.write(str);
*/
for(var i=0;i<arr.length;i++){
document.write(arr[i]+",");
}
document.write("<hr/>");
//反转
arr = arr.reverse();
for(var i=0;i<arr.length;i++){
document.write(arr[i]+",");
}
</script>
</head>
<body>
</body>
</html>
1.8 自定义对象
java：使用class来定义对象javascript： 使用function来定义对象
<!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 对象名称(形式参数){
定义属性
定义方法
}
创建对象：
var 变量 = new 对象名称(实际参数);
*/
/*
//定义人对象
function Person(name,age){ //this: 表示当前调用的对象
//定义属性 赋值
this.name = name;
this.age = age;
//定义方法
this.say = function(){
alert("这个对象的方法");
}
}
//创建人对象
var p = new Person("狗娃",12);
*/
/*
定义对象方式二： 无参数的构造函数
//定义对象
function Person(){
}
//创建对象
var p = new Person();
//追加属性
p.name = "狗剩";
p.age = 14;
//追加方法
p.say = function(){
alert("狗剩的函数");
}
*/
/*
定义对象的方式三：使用Object对象。 Object对象可以作为任意对象的模板
//创建对象
var p = new Object();
//追加属性
p.name = "狗蛋";
p.age = 16;
//追加方法
p.say = function(){
alert("狗蛋的函数");
}
*/
/*
定义对象方式四：使用字面量的形式创建对象。 json语言（了解）
*/
//创建人对象
var p = {
//定义属性（属性名：属性值）
"name":"铁蛋",
"age": 20,
//定义方法
"say":function(){
alert("铁蛋的函数");
}
};
//查看属性值
document.write(p.name);
document.write(p.age);
//调用对象方法
p.say();
/*
document.write("<br/>");
//使用for-in遍历对象
for(var i in p){
document.write(p[i]+"<br/>");
}
*/
</script>
</head>
<body>
</body>
</html>
1.9 原型
给内置对象追加方法
<!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>
<!--
问题： 不使用ArrayUtil工具，但也想实现search和max方法的功能
预期解决方法： 想把search和max方法设计到Array内置对象中
问题：如何给Array对象扩展两个方法呢？
方案一：拿到Array定义对象的代码，在代码上加
function Array(){
this.join = function(){}
this.reverse = function(){}
this.saarch = function(){} 追加方法
}
拿不到Array对象的源码，行不通
方案二：使用原型属性给Array对象添加方法
什么是原型？
1）js的每个对象中都包含有了原型属性（prototype）
2）如果往某个对象的原型属性添加了方法，那么添加的这个方法就会自动地添加到当前对象的方法中。
3) 原型的作用：给内置对象追加方法的
function Array(){
//属性
this.prototype = new Prototype(); //原型对象
this.search = function(){}
}
原型对象
function Prototype(){
this.search = function(){}
}
-->
<script type="text/javascript">
/*
给Array追加一个search和max方法
*/
Array.prototype.search = function(target){
//遍历
for(var i=0;i<this.length;i++){
if(this[i]==target){
return i;
}
}
return -1; //找不到就是-1
}
Array.prototype.max = function(){
//存储最大值
var max = this[0];
for(var i=1;i<this.length;i++){
if(this[i]>max){
max = this[i];
}
}
return max;
}
var arr = [10,43,21,65,3,87];
var index = arr.search(87);
document.write("位置是："+index+"<br/>");
var max = arr.max();
document.write("最大值："+max);
</script>
</head>
<body>
</body>
</html>
扫一扫
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
