javaScript
练习一下javaScript
js01
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function createTable() {
//创建表格
var table=document.createElement("table");
var tr=document.createElement("tr");
var td=document.createElement("td");
//创建文本节点
var txt=document.createTextNode("hellow");
//子对象
td.appendChild(txt);
tr.appendChild(td);
table.appendChild(tr);
//把表格添加到boby里去
document.body.appendChild(table);
//table.setAttribute("border","2px");
table.style.border="solid 2px blue";
</script>
</body>
</html>
js.02
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function createTable() {
//创建表格
var table=document.createElement("table");
var tr=document.createElement("tr");
var td=document.createElement("td");
//创建文本节点
var txt=document.createTextNode("hellow");
//子对象
td.appendChild(txt);
tr.appendChild(td);
table.appendChild(tr);
//把表格添加到boby里去
document.body.appendChild(table);
//table.setAttribute("border","2px");
table.style.border="solid 2px blue";
</script>
</body>
</html>
js03
<html>
<body>
<script>
var o = {
"na me":"kuangjun",
'age':20,
length:155,
work:function(){
var tmp = "na me";
//alert(this["na me"]);
alert(this[tmp]);
}
};
//alert(o.age);
//alert(o.length);
//o.work();
//成员的访问方式
//------------------------
//弱类型的编程语言，比如javascript，ruby
var a = 5;
a = "adsfa";
//动态性:运行时可变化，比如对象可以动态的添加成员
var o2 ={};
o2.name = "banzhang";
o2.work = function(){
alert(this.name);
}
//o2.work();
//创建对象的第二种方式
//习惯：首字母大写的时候，此函数不是用来调用的，
//而是用来创建对象的
//构造型函数（Constructor）
function Person(name,age){
//这里的this指向的是new Person创建出来的对象
this.myname = name;
this.age = age;
this.work = function(){};
}
var p1 = new Person("xuewei",18);
p1.length = 180;//利用javascript的动态性，来追加成员
alert(p1.myname);
//alert(p1.age);
//alert(p1.length);
//alert(p1.name);
//添加静态方法
Person.sp ="静态属性";
Person.sp2 = "静态属性2"
Person.sm1 = function(){
alert('静态方法');
}
alert(Person.sp2);
Person.sm1();
</script>
</body>
</html>
javaScript oop
javaScript oop面向对象，面向对象包含：继承，封装，多态。
<html> <head></head> <body> <script> /* function Class(name){ this.name=name; this.student=[]; } function Student(name,age,sex){ this.name=name; this.age=age; this.sex=sex; } function Test(){ var class=new Class("前端三班"); for(var i=0;i<10;i++){ var student=new student() } } */ /* function Student(name,age,gender){ this.name=name; this.age=age; this.gender=gender; } function ClassInfo(name age){ this.name=name; this.age=age; } ClassInfo.prototype.add=function(student){ var data=[]; data.push(student); }; var s1=new Student("张三",18,false); var s2=new Student("李四",19,false); var s2=new Student("王五",20,true); //根据年龄查询学生 ClassInfo.prototype.select=function(student){ } </script> </body> </html>*/ <html> <head> </head> <body> <h1>say,hello!</h1> <script type="text/javascript"> /* 1.创建一个学生类 ，里面有名字、年龄、性别这3个属性 2.创建一个班级类 有一个名字属性 有一个add方法，用来往班级里面添加一个学生 有一个getStudentsByGender（通过性别查询学生） 有一个方法getStudentsByAge（） */ function Student(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } function Class(name){ this.name = name; this.list = []; } //添加 Class.prototype.add = function(student){ this.list.push(student); } Class.prototype.getStudent = function(){ //alert(this.list); document.write("班级人数：" + this.list.length + "<br/>"); for(x in this.list){ document.write("学生姓名：" + this.list[x].name + "<br/>"); } } Class.prototype.getStudentsByGender = function(sex){ var ss = []; for(x in this.list){ if(this.list[x].sex==sex){ ss.push(this.list[x]); }else if(this.list[x].sex==sex){ ss.push(this.list[x]); }else{ ss==null; } } return ss; } var stu1 = new Student("zss",18,"男"); var stu2 = new Student("lss",18,"女"); var stu3 = new Student("www",20,"男"); var cls = new Class("java"); cls.add(stu1); cls.add(stu2); cls.add(stu3); // 查询班级所有人 cls.getStudent(); // 根据性别查询班级人数 var ss = cls.getStudentsByGender("男"); alert(ss.length); </script> </body> </html>
知识点：
<html>
<body>
<p id="p"> this is ppp </p>
<p id="p2"> this is ppp22 </p>
<p id="p3"> this is ppp33 </p>
<script>
//arguments
//arguments是每一个函数内部的一个对象
//可以访问实际传递给函数的参数的信息。
/*
function add(a,b){
//console.log(add.length);//形参的个数
//console.log(arguments.length);//实际传过来的参数
var total = 0;
for(var i = 0;i< arguments.length;i++){
total += arguments[i];
}
return total;
}
var result = add(1,2,3,4,5);
var result2 = add(1,2);
console.log(result);
console.log(result2);
function setStyle(){
if(arguments.length < 1
|| arguments.length > 2){
return ;
}
var pele = document.getElementById("p");
if(arguments.length == 1){
return pele.style[arguments[0]] ;
}else{
pele.style[arguments[0]] = arguments[1];
//pele.style.backgroundColor = "red"
}
}
//setStyle("fontSize","18px");
setStyle("backgroundColor","red");
var styleValue = setStyle("backgroundColor");
alert(styleValue);
setStyle("fontSize","18px");
var styleValue2 = setStyle("fontSize");
alert(styleValue2);
//声明的时候参数的个数与实际调用时无关
//foreach循环
var arr = [100,300,800];
for(var data in arr){
//alert(arr[data]); //循环数组时，data是下标
}
var o ={name:"cj",age:22};
for(var p in o){
//alert(p);
//alert(o[p]);
}
function myForEach(eles,callback){
for(var i=0;i< eles.length;i++){
callback(i,eles[i]);
}
}
var alls = document.getElementsByTagName("p");
myForEach(alls,function(index,ele){
//alert(index);
//alert(ele);
ele.style.backgroundColor = "red";
});*/
//对象继承
//重载（个数不同，类型不同)
//回调函数
function CjOneDay(maiyan){
console.log("chouyan");
var yan = maiyan(10);
console.log(yan);
}
function banZhangMaiYan(money){
if(money == 20){
return "wuyeshen";
}else{
return "zhongnanhai";
}
}
CjOneDay(banZhangMaiYan);
</script>
</body>
</html>
<html> <body> <script> //所有用var声明的变量以及声明的函数 /* var a = 1; function f(){ alert(a); var a = 5; } f(); * var a = 1; function f(){ alert(a); a = 8; } f(); //上面的代码的处理过程 // ******全局处理**** /* 1. 在预处理的阶段： 1.1 读取分析整个源代码 1.2 找出所有用var声明的变量以及用 声明的方式创建的函数 1.3 把第二步找出来的东东 添加到一个对象里面去（如果是全局代码， 这个对象就是window） 1.4 如果是变量，那么值此时等于undefined 如果是函数，此时的值就指向函数 全局代码的执行：（在我们的案例里面） 1.1 把a的值从undefined改为1 1.2 调用f函数，以便f函数得到执行。 */ /* ****函数内部：**** var a = 1; function f(){ alert(a); var a = 5; alert(a); } f(); 预处理阶段 1.1把函数的参数添加到一个对象（词法对象） 1.2 把所有用var声明的变量以及声明的形式创建的 函数添加到词法对象里面。变量的值也是为undefined 执行阶段 */ </script> </body> </html>
浙公网安备 33010602011771号