03javascript01
1.简介
概念： 一门客户端脚本语言
运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了
功能：
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript发展史：
1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase
2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
3. 1996年，微软抄袭JavaScript开发出JScript语言
4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
2.基本语法
2.1与HTML结合方式
1.内部js
定义<script>,标签体内容就是js代码
2.外部js
定义<script>,通过src属性引入外部的js文件
注意：
1.<script>可以定义在HTML页面的任何地方，但是定义的位置会影响执行顺序。
2.<script>可以定义多个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部JS-->
<script>
alert("hello world"); //定义在head中，先加载script，再加载input标签； </script>
<!--外部js-->
<script src="js/a.js"></script> </head>
<body>
<input type="text">
<!--<script>
alert("hello world"); //定义在body中，先加载input，再加载script标签； </script>-->
</body>
</html>
a.js
alert("我是外部的js文件")
2.2注释
1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/
2.3数据类型
1. 原始数据类型(基本数据类型)
1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串。 字符串 "abc" "a" 'abc'
3. boolean: true和false
4. null：一个对象为空的占位符
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
2. 引用数据类型：对象
2.4变量
变量：一小块存储数据的内存空间
Java语言是强类型语言，而JavaScript是弱类型语言。
强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据(java/c)
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。（python）
语法：
var 变量名 = 初始化值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title> <script>
/* //定义变量
var a = 3;
alert(a);
a = "abc";
alert(a);*/ // 1.定义number类型
var num = 1;
var num2 = 1.1;
var num3 = NaN; document.write(num + "<br>");
document.write(num2 + "<br>");
document.write(num3 + "<br>"); //2.定义string类型
var str = "abc";
var str2 = 'a';
document.write(str + "<br>");
document.write(str2 + "<br>"); //3.定义boolean
var flag = true;
document.write(flag + "<br>"); //4.定义null和undefined
var obj = null;
var obj2 = undefined;
var obj3;
document.write(obj + "<br>");
document.write(obj2 + "<br>");
document.write(obj3 + "<br>"); </script>
</head>
<body> </body>
</html>
typeof运算符：获取变量的类型。
注：null运算后得到的是object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title> <script>
/* //定义变量
var a = 3;
alert(a);
a = "abc";
alert(a);*/ // 1.定义number类型
var num = 1;
var num2 = 1.1;
var num3 = NaN; document.write(num + "----" + typeof (num) + "<br>");
document.write(num2 + "----" + typeof (num2) + "<br>");
document.write(num3 + "----" + typeof (num3) + "<br>"); //2.定义string类型
var str = "abc";
var str2 = 'a';
document.write(str + "----" + typeof (str) + "<br>");
document.write(str2 + "----" + typeof (str2) + "<br>"); //3.定义boolean
var flag = true;
document.write(flag + "----" + typeof (flag) + "<br>"); //4.定义null和undefined
var obj = null;
var obj2 = undefined;
var obj3;
document.write(obj + "----" + typeof (obj) + "<br>");
document.write(obj2 + "----" + typeof (obj2) + "<br>");
document.write(obj3 + "----" + typeof (obj3) + "<br>"); </script>
</head>
<body> </body>
</html>
2.5运算符
1. 一元运算符：只有一个运算数的运算符
++，-- ， +(正号)
+(-)：正负号
注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
* 其他类型转number：
* string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
* boolean转number：true转为1，false转为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var b = "123";
document.writeln(typeof (b+1)+"<br>");
document.writeln(b+1+"<br>"); var c = +"123";
document.writeln(typeof (c+1)+"<br>");
document.writeln(c+1+"<br>"); var d = +"abc";
document.writeln(typeof (d+1)+"<br>");
document.writeln(d+1+"<br>");
</script>
</head>
<body> </body>
</html>
2. 算数运算符
+ - * / % ...
3. 赋值运算符
= += -+....
4. 比较运算符
> < >= <= == ===(全等于)
5. 逻辑运算符
&& || !
6. 三元运算符
? : 表达式
var a = 3;
var b = 4;
var c = a > b ? 1:0;
语法：
表达式? 值1:值2;
判断表达式的值，如果是true则取值1，如果是false则取值2；
2.6流程控制语句
1. if...else...
2. switch:
在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
switch(变量):
case 值:
在JS中,switch语句可以接受任意的原始数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var a = "abc";
switch (a) {
case 1:
alert("number");
break;
case "abc":
alert("string");
break;
case null:
alert(null);
break;
}
</script>
</head>
<body> </body>
</html>
3. while
4. do...while
5. for
2.7JS特殊语法
1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字，也可以不使用
用： 定义的变量是局部变量
不用：定义的变量是全局变量(不建议)
3.基本对象
3.1 Function：函数(方法)对象
1.创建
1. var fun = new Function(形式参数列表,方法体); //忘掉吧
2. function 方法名称(形式参数列表){
方法体
}
3. var 方法名 = function(形式参数列表){
方法体
}
2.方法
3.属性
length:代表形参的个数
4.特点
1. 方法定义时，形参的类型不用写,返回值类型也不写。
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
5.调用
方法名称(实际参数列表);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1.创建方式1
var fun1 = new Function("a", "b", "alert(a);");
fun1(3, 4);
alert(fun1.length); //2.创建方式2
function fun2(a, b) {
alert(a + b);
} fun2(3, 4); //3.创建方式3
var fun3 = function (a, b) {
alert(a * b);
}
fun3(4, 5); /*
求任意两个数的和
*/
function fun4(a, b) {
return a + b;
} var sum = fun4(5, 6);
alert(sum) /*
求任意多个数的和
*/
function fun5() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
} var sum2 = fun5(1, 2, 3);
alert(sum2);
</script>
</head>
<body> </body>
</html>
3.2array对象
1. 创建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
2. 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3. 属性
length:数组的长度
4. 特点：
1. JS中，数组元素的类型可变的。
2. JS中，数组长度可变的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script> //1.创建方式
var arr1 = new Array(1, 2, 3);
var arr2 = new Array(3);
arr2[1] = 8;
var arr3 = [4, 5, 6];
document.writeln(arr1 + "</br>");
document.writeln(arr2 + "</br>");
document.writeln(arr3 + "</br>");
document.writeln(arr3.join("***") + "</br>"); //按照指定格式拼接字符串
arr3.push("abc");
document.writeln(arr3.join("***") + "</br>"); //按照指定格式拼接字符串 </script>
</head>
<body> </body>
</html>
3.3Date对象
1. 创建：
var date = new Date();
2. 方法：
toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var date = new Date();
document.writeln(date+"<br>");
document.writeln(date.toLocaleString()+"<br>");
document.writeln(date.getTime());
</script>
</head>
<body> </body>
</html>
3.4Math：数学对象
1. 创建：
特点：Math对象不用创建，直接使用。 Math.方法名();
2. 方法：
random():返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。
3. 属性：
PI
3.5正则表达式对象
1. 正则表达式：定义字符串的组成规则。
1. 单个字符:[]
如： [a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
2. 量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
m如果缺省： {,n}:最多n次
n如果缺省：{m,} 最少m次
3. 开始结束符号
^:开始
$:结束
2. 正则对象：
1. 创建
1. var reg = new RegExp("正则表达式");
2. var reg = /正则表达式/;
2. 方法
1. test(参数):验证指定的字符串是否符合正则定义的规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1.方式1
var reg = new RegExp("\\w{6,12}");
var reg2 = /\w{6,12}/;
alert(reg.test("zhangsan"));
alert(reg2.test("zhangsan")); </script>
</head>
<body> </body>
</html>
3.6Global对象
1. 特点：
全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法：
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str = "大学";
var encode = encodeURI(str);
document.writeln(encode + "<br>");
var s = decodeURI(encode);
document.writeln(s + "<br>"); var encode1 = encodeURIComponent(str);
document.writeln(encode1 + "<br>");
var s1 = decodeURIComponent(encode);
document.writeln(s1 + "<br>"); str1 = "https://www.baidu.com?wd=大学";
var encode = encodeURI(str1);
document.writeln(encode + "<br>");
var s = decodeURI(encode);
document.writeln(s + "<br>"); var encode1 = encodeURIComponent(str1);
document.writeln(encode1 + "<br>");
var s1 = decodeURIComponent(encode);
document.writeln(s1 + "<br>");
</script>
</head>
<body> </body>
</html>
parseInt():将字符串转为数字
逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN
NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
3. URL编码
传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.javascript语法体系
1）EMCA基础语法（统一）
2）BOM编程（不统一）
3）DOM编程（不统一）
1.1 javascript使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript基础</title>
<script>
/*
javascript的使用方法：
1）内部javacript:
a)在html页面中使用<script>标签，在<script>标签体中写js内容
b)弊端：和html代码混杂在一起，不好维护，不好重用 2）外部javascript（推荐使用）
*/
/*
常用的函数：
alert("提示框");
document.write("向浏览器输出内容");
*/
// alert("提示框");
// document.write("输出内容");
</script>
<!-- 导入外部js文件
注意： 不能使用<script src="01.j/s"> 空标签方式导入
-->
<script src="01.js"></script> </head>
<body> </body>
</html>
document.write("输出内容");
1.2 变量和数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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 对象类型
*/
a = 10;
document.write('a的值为：' + a + ' 类型为: ' + typeof(a) + '<br/>');
b = 3.14;
document.write('b的值为:' + b + ' 类型为: ' + typeof(b) + '<br/>');
c = 'hello';
document.write('c的值为：' + c + ' 类型为: ' + typeof(c) + '<br/>');
d = true;
document.write('d的值为：' + d + '<br/>');
e = new Object();
document.write('e的值为：' + e+' 类型为: ' + typeof(e) );
</script>
</head> <body> </body>
</html>
1.3 类型转换函数
string->number(整数) : parserInt(变量)
string->number(小数): parserFloat(变量)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类型转换函数</title>
<script type="text/javascript">
/*
string->整数： parseInt(变量)
注意：
1）使用parseInt函数转换时，转换的内容中的第一个是数值类型，就可以继续转换，直到遇到非数组类型为止。 string->小数： parseFloat(变量) */
a = "10";
a = "10a";
document.write("a的类型是(转换前)：" + typeof(a) + "<br/>");
//转换
a = parseInt(a);
document.write("a的类型是(转换后)：" + typeof(a) + ",值为：" + a + "<br/>"); b = "3.14";
b = parseFloat(b);
document.write("b的类型是(转换后)：" + typeof(b) + ",值为：" + b + "<br/>"); </script>
</head>
<body> </body>
</html>
1.4 运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符</title>
<script type="text/javascript">
/*
1)算术运算符： + - * / %
2)比较运算符： > < >= <= ==
3)逻辑运算符： && || !
4)三目运算符: 表达式 ? true的结果 : false的结果 注意：
在js中，布尔值可以用true用1来代表，false用0来代表 */
a = 10;
b = false;
document.write("结果为：" + (a / b) + "<br/>");
document.write("结果为：" + (a + b) + "<br/>"); a = 10;
b = 20;
document.write("结果为:" + (a < b) + "<br/>"); a = 1;
b = true;
document.write("结果为:" + (a = b) + "<br/>"); document.write("结果为:" + (false && true) + "<br/>");
document.write("结果为:" + (false || true) + "<br/>");
document.write("结果为:" + (!true) + "<br/>"); age = 12;
document.write(age >= 18 ? "成年人" : "未成年人");
</script>
</head>
<body> </body>
</html>
1.5 流程控制语句
if
swtich
for
while
do-while
for-in
with
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制语句</title>
<script type="text/javascript">
/*
1，显示"*"为三角型，5行，第1行有1个"*"，第2行有2个"*"…… 2，显示乘法口诀。
1*1=1
1*2=2 2*2=4
....
1*9=9 2*9=18 ... */
for (i = 1; i <= 5; i++) { //行数
for (j = 1; j <= i; j++) { // 控制星星数
document.write("* ");
}
document.write("<br/>");
}
document.write("<hr/>"); for (i = 1; i <= 9; i++) {
for (j = 1; j <= i; j++) {
document.write(i + "*" + j + "=" + (i * j) + " ");
}
document.write("<br/>");
}
/*
for-in语句：
for(var 遍历 in 数组|对象){ } 作用：
1）遍历数组
2）对象
注意：
遍历对象的时候，变量是属性的名称，如果获取属性值，则 p[i];
*/
//定义数组
arr = [10, 20, 30, 40]; //遍历数组
//使用for循环
for (i = 0; i < arr.length; i++) {
document.write(arr[i] + ",");
}
document.write("<hr/>");
//使用for-in遍历
for (i in arr) {
document.write(arr[i] + ",");
} //定义对象
function Person(name, age) {
this.name = name;
this.age = age;
} //创建对象
p = new Person("eric", 20); //遍历对象
for (i in p) {
document.write(p[i] + "<br/>");
} </script>
</head>
<body> </body>
</html>
1.6函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
<script>
/*
函数定义：
function 函数名称(形式参数列表){
语句
} 调用函数:
函数名称(实际参数列表); 注意：
1）js的函数使用function定义，但是形式参数列表不能使用var关键词
2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型
3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数。
4）js中的形式参数和实际参数的数量可以不一致，依然可以调用。
5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。
6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数 */
function add(a, b) {
result = a + b;
// document.write('结果为：'+result);
return result;
} s = add(10, 20);
document.write(s);
</script>
</head>
<body> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数练习</title>
<script type="text/javascript">
/*
如果大月，显示“该月有31天”
如果小月,显示“该月有30天”
如果2月，显示“该月有28天“
*/
function check(){
//alert("调用");
var month = document.getElementById("month").value; //表单输入的内容都是string类型！！
//alert(typeof(month));
//alert(month); //string和number比较，string会自动转换成number类型，再进行比较
/*
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("地球上没有这个月份");
}
*/ //强制转换
month = parseInt(month);
switch(month){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
alert("该月有31天");
break;
case 4:
case 6:
case 9:
case 11:
alert("该月有30天");
break;
case 2:
alert("该月有28天");
break;
default:
alert("地球上没有这个月份");
} } </script> </head>
<body>
请输入一个月份值：<input type="text" id="month"/><input type="button" value="查询" onclick="check()"/>
</body>
</html>
1.7基于对象编程
string对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String对象</title>
<script type="text/javascript">
//方式一：定义String对象
str1 = new String("hello");
str2 = new String("hello"); document.write("结果：" + (str1 == str2) + "<br/>");
//valueOf（）:该方法返回对象的内容
document.write("结果：" + (str1.valueOf() == str2.valueOf()) + "<br/>"); //方式二：
str1 = "hello";
str2 = "hello"; document.write("结果：" + (str1 == str2) + "<br/>");
/*
常用方法：
charAt(): 返回指定索引的内容
indexOf(): 返回首次出现指定字符的索引位置
lastIndexOf(): 返回最后出现指定字符的索引位置
fontcolor(): 直接给字符串添加颜色
replace(): 替换指定的字符串
split(): 使用指定字符串切割字符串，返回字符串数组
substring(start,end); 截取字符串，start：开始索引， end:结束索引
substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
*/ 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", "jxufe") + "<br/>");
document.write(str.substring(5, 9) + "<br/>");
document.write(str.substr(5, 4) + "<br/>");
str = "java-net-php-平面";
strArray = str.split("-");
for (i = 0; i < strArray.length; i++) {
document.write(strArray[i] + ",");
} </script>
</head>
<body> </body>
</html>
Number对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number对象</title>
<script type="text/javascript">
//方式一：定义Number对象
num1 = new Number(20);
num2 = new Number(20);
document.write((num1==num2)+"<br/>");
document.write((num1.valueOf()==num2.valueOf())+"<br/>");
//方式二：
var num1 = 20;
var num2 = 20; document.write((num1==num2)+"<br/>");
document.write((num1.valueOf()==num2.valueOf())+"<br/>"); b1 = new Boolean(true);
b2 = new Boolean(true);
document.write((b1 == b2) + "<br/>");
document.write((b1.valueOf() == b2.valueOf())+"<br/>"); </script>
</head>
<body> </body>
</html>
Date对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date对象</title>
<script type="text/javascript">
//创建日期
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>
数组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组对象</title>
<script type="text/javascript">
/*
注意：
1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。
2) js的数组可以存放任意类型的元素。
*/
//方式一：创建数组
//1.1 指定数组长度
// arr = new Array(3);
// arr[0] = 1;
// arr[1] = 2;
// arr[2] = 3;
// for (i in arr) {
// document.write(i + " , ")
// }
//1.2 不指定数组长度、默认0个元素
arr = new Array();
arr[0] = 6;
arr[1] = 'hello';
arr[2] = true;
let i;
for (i in arr) {
if (!arr.hasOwnProperty(i))
continue;
document.write(arr[i] + " , ");
}
//1.3 指定具体内容
arr = new Array(10, "world", false); //arr = [10,"world",false] 更推荐Python的这种写法
for (i in arr) {
if (!arr.hasOwnProperty(i))
continue;
document.write(arr[i] + " , ");
}
/*
常用的方法：
join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串
reverse(): 反转数组中的元素
*/
document.write("<hr/>");
arr = ["java", "net", "php", "ios"];
let str = arr.join("-");
document.write(str);
// for (let i = 0; i < arr.length; i++) {
// document.write(arr[i] + ",");
// }
document.write("<hr/>");
//反转
arr = arr.reverse(); for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + ",");
}
</script>
</head>
<body> </body>
</html>
1.8 自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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("这个对象的方法");
}
} //创建人对象
let p = new Person("狗娃", 12);
//查看属性
document.write(p.name + '</br>');
document.write(p.age + '</br>');
// p.say();
for (let i in p) {
if (!p.hasOwnProperty(i))
continue;
document.write(p[i] + '</br>');
} //定义对象方式二： 无参数的构造函数
//定义对象
function Person2() {
} //创建对象
let p2 = new Person2();
//追加属性
p2.name = "狗剩";
p2.age = 14;
//追加方法
p2.say = function () {
alert("狗剩的函数");
};
for (let i in p2) {
if (!p2.hasOwnProperty(i))
continue;
document.write(p2[i] + '</br>');
} //定义对象的方式三：使用Object对象。 Object对象可以作为任意对象的模板 //创建对象
let p3 = new Object();
//追加属性
p3.name = "狗蛋";
p3.age = 16;
//追加方法
p3.say = function () {
alert("狗蛋的函数");
};
for (let i in p3) {
if (!p3.hasOwnProperty(i))
continue;
document.write(p3[i] + '</br>');
}
/*
定义对象方式四：使用字面量的形式创建对象。 json语言（了解） */
//创建人对象
let p4 = {
//定义属性（属性名：属性值）
"name": "铁蛋",
"age": 20,
//定义方法
"say": function () {
alert("铁蛋的函数");
}
};
for (let i in p4) {
if (!p4.hasOwnProperty(i))
continue;
document.write(p4[i] + '</br>');
} </script>
</head>
<body> </body>
</html>
1.9 原型
给内置对象追加方法，相当于扩展对象的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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(let i=0;i<this.length;i++){
if(this[i]==target){
return i;
}
}
return -1; //找不到就是-1
}; Array.prototype.max = function(){
//存储最大值
let max = this[0];
for(let i=1;i<this.length;i++){
if(this[i]>max){
max = this[i];
}
}
return max;
}; let arr = [10,43,21,65,3,87]; let index = arr.search(87);
document.write("位置是："+index+"<br/>"); let max = arr.max();
document.write("最大值："+max); </script>
</head>
<body> </body>
</html>
03javascript01的更多相关文章
随机推荐
- 关于vue给对象新增属性页面不会动态更新
不知道大家有没有遇到过这个问题,当我们给data里边声明或者已经赋值过的对象或者数组,添加新的属性时,如果更新此属性的值是不会动态更新视图的. $set 看以下实例: 我们开始给drug_list追加 ...
- mysql学生成绩排名,分组取前 N 条记录
转载 https://blog.csdn.net/jslcylcy/article/details/72627762 score表: CREATE TABLE `score` ( `student_ ...
- bind标签_databaseId标签，_parameter标签的使用
1.在接口写方法 public List<Employee> getEmpsTestInnerParameter(Employee employee); 2在映射文件中进行配置 <s ...
- 十、RF运行方式pybot运行方式
pybot命令 1.执行整个项目下的所有用例: pybot 项目路径.例如: pybot D:\RF 2.执行某个suit中的所有用例: pybot 项目路径\suit文件名称. 例如:pybot D ...
- python插件快速安装
windows下安装python插件没有linux那样方便. 可以先安装easy_install.我的是win64 下载地址 直接下载py文件运行,将对应目录添加到环境变量,我的是D:\dev_t ...
- 开发-日常工具：TFS（Team Foundation Server）
ylbtech-开发-日常工具:TFS(Team Foundation Server) TFS(Team Foundation Server)是一个高可扩展.高可用.高性能.面向互联网服务的分布式文件 ...
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
- Visual Studio Code 断点调试Nodejs程序跳过node内部模块(internal modules)
Built-in core modules of Node.js can be referred to by the ‘magic name’ <node_internals> in a ...
- fiddler之请求过滤（Filters）
开启fiddler后,会监听所有的请求,在大多数情况下,我们只需要监听部分请求,此时可以使用Filters功能去控制. 界面显示如下: 默认情况下过滤是未开启的,需要勾选“user filters”进 ...
- LeetCode算法题-Magic Squares In Grid（Java实现）
这是悦乐书的第326次更新,第349篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第196题(顺位题号是840).3 x 3魔方是一个3 x 3网格,填充了从1到9的不同 ...