前情提要:
今天学习的是js的函数以及简单的类的使用
一:函数的初识别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// <!--函数声明不需要加上关键字var-->
function sayhello (name) {
document.write("<h1>"+"hello"+name+"</h1>")
}
function getname() {
return "小宝"
}
get1name =function (name) {
return "大宝"
}
// 如果函数有参数,调用时需要传入参数
sayhello("咱三") var username =getname()
document.write(username)
var username1 =get1name()
document.write(username1)
</script>
</head>
<body> </body>
</html>
二:全局变量以及局部变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// <!--全局变量,可以被该页面中的所有函数引用-->
var num =10;
function test1() {
//加上var 浏览器就会在去全局中定义该函数 num1 =12;
var num3 =21;
// 局部变量只有当前函数中有效
document.write(num+"<br>");
document.write(num1+"<br>");
document.write(num3+"<br>")
}
function test2(){
document.write(num+"<br>");
document.write(num1+"<br>");
document.write(num3+"<br>");
}
test1();
test2()
</script>
</head>
<body> </body>
</html>
三:自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// <!--自定义对象-->
function Person() { }
//使用new 关键字创建对象
var person =new Person();
//给person 对象增加name属性
person.name ="张三";
// 给person 对象增加age属性 person.age =18;
// 给person 对象增加eat 方法
person.eat =function () {
document.write(this.name +"正在吃饭")
}; // 调用属性
document.write(person.name,person.age+"<br>");
//调用方法
person.eat()
</script> </head>
<body> </body>
</html>
四:创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function Person(name,age) {
this.name =name;
this.age =age;
// this.sleep =function () {
// alert(this.name+'正在树胶')
// }
this.sleep =function () {
alert(this.name +"正在睡觉")
} }
// var person =new Person("李四",20);
// document.write(typeof person)
document.write(person.name);
document.write(person.age); person.sleep()
</script>
</head>
<body> </body>
</html>
五:使用object 创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var person =new Object();
person.name ="小钟";
person.age =25;
person.code =function (something) {
document.write(this.name+"正在做"+something)
};
person.code("作业")
</script>
</head>
<body> </body>
</html>
六:使用json 创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var person ={
name :"太白金星",
age :20,
run :function () {
alert(this.name+"正在跑步");
}
};
person.run() </script>
</head>
<body> </body>
</html>
七:string 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let s1 ="10";
let s2 =new String("10");
alert("s1==s2"+(s1==s2))
</script>
</head>
<body> </body>
</html>
八:string的常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var counter ="中国".fontcolor("red");
document.write(counter.concat("<br>"));
var str ="Hello World Hello World";
document.write(str.charAt(6) + "<br/>"); //根据索引查找字符
document.write(str.charCodeAt(6)+"<br>"); //根据字符查找unideo的编码
document.write(str.indexOf("World")+"<br>"); //查询字符串中指定字符串的第一次出现的索引值
document.write(str.substring(12,17)+"<br>"); //提取12到17索引出现的内容
document.write(str.valueOf()) //返回本身内容 </script>
</head>
<body> </body>
</html>
九:实现字符串的翻转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义一个函数实现字符串的翻转功能
function reverse(srcStr) {
var temstr =''
for (i=srcStr.length -1;i>=0;i--){
var c =srcStr.charAt(i)
temstr+=c
}
return temstr
}
var s =reverse("abcd")
alert(s)
</script>
</head>
<body> </body>
</html>
十:number 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var s =10;
var s1 =new Number(10)
var s2 ="11"
var s3 =new Number("a11")
/*
执行parseInt函数的时候，默认它只会把字符串第一个非数字（包含空格）前面字符进行转换。
如果第一个字符是非数字（不包含空格），那么转换结果为NaN。
*/
var num =parseInt(s3)
document.write(typeof s)
document.write(typeof s1)
document.write(typeof s2)
document.write(typeof s3)
document.write(s3)
document.write(num) </script>
</head>
<body> </body>
</html>
十一:math 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
document.write("绝对值"+Math.abs(-10)+"<br>")
document.write("向上取整"+Math.ceil(3.14)+"<br>")
document.write("向下取整"+Math.floor(3.14)+"<br>")
document.write("四舍五入"+Math.round(3.6)+"<br>")
document.write("求最大值"+Math.max(3,5)+"<br>")
document.write("求最小值"+Math.min(3,5)+"<br>")
document.write("生成随机数"+Math.random(1,5)+"<br>") </script>
</head>
<body> </body>
</html>
十二:生成4位数验证码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var num ='';
for (i=1 ;i<5;i++){
var s1 =Math.floor(Math.random()*10)
num =s1+num
}
document.write(num) </script>
</head>
<body> </body>
</html>
十三:date 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getdate(d) {
var dd = d.getDate() //获取日
var mm =d.getMonth()+1 //获取月
var yy =d.getFullYear() //获取年
var hh =d.getHours() //获取小时
var min =d.getMinutes() //获取分
var sec =d.getSeconds() //获取秒
return yy +"年" +mm +"月"+dd+"日"+hh+"时"+min+"分"+sec+"秒"
}
var dd =new Date()
document.write(dd+"<br>")
var time1 =dd.getDate()
document.write(time1+"<br>")
var times1 =getdate(dd);
document.write(times1) </script>
</head>
<body> </body>
</html>
十四:array 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var arr4 =[10,20,30]
var arr5 =[11,22,33]
arr4 =arr4.concat(arr5,99,100)
document.write(arr4+"<br>")
document.write(arr4[0]+"<br>")
document.write(arr4[1]+"<br>")
for (i=1;i<arr4.length;i++){
document.write(arr4[i]+"<br>")
}
</script>
</head>
<body> </body>
</html>
十五:对象的常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function join(arr,sep) {
var arrstr=''
for (var i=0;i<arr.length;i++){
arrstr =arrstr+arr[i] +sep }
return arrstr.substring(0,arrstr.length-1) }
var arr =["java","python","go"]
var str =arr.join('-')
document.write(str)
</script>
</head>
<body> </body>
</html>
十六:扩展对象功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// function search(arr,key) {
// for(i =0;i<arr.length;i++){
// if (arr[i]==key){
// return i
// }
// else {
// return -1
// }
//
// }
//
// }
// var arr =[1,2,3,4,5]
// var i =search(arr,1)
// alert(i)
// seach1 =function (arr,key) {
// for(i =0;i<arr.length;i++){
// if (arr[i]==key){
// return i
// }
// else {
// return -1
// }
//
// }
// }
// var arr =[6,7,8,9,10]
// var i =seach1(arr,6)
// alert(i)
//
Array.prototype.search =function (key) {
for (i =0;i<this.length;i++){
if (this[i]==key){
return i
}
}
return -1;
}
var arr =[6,7,8,9,10]
var ss= arr.search(6)
document.write(ss)
</script>
</head>
<body> </body>
</html>
十七:push 和pop 方法
十八:resreve
十九:slice
二十:splice
二十一:sort
二十二:tofixed