JavaScript_2
1.JavaScript 运算符
1.1算术运算符 + 、-、*、/、%、++、--。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>算术运算符</title>
<script>
window.onload=function(){
//1.算术运算符 + 、-、*、/、%、++、--。
var num1=10;
var num2=3;
//+ 算术运算符【加--和】
//+ 连字符
document.write("<h1>"+num1+"+"+num2+"="+(num1+num2)+"</h1>");
document.write("<h1>"+num1+"-"+num2+"="+(num1-num2)+"</h1>");
document.write("<h1>"+num1+"*"+num2+"="+(num1*num2)+"</h1>");
document.write("<h1>"+num1+"/"+num2+"="+(num1/num2)+"</h1>");
document.write("<h1>"+num1+"%"+num2+"="+(num1%num2)+"</h1>");
//++[自动加1]
//变量++【先用后加】
//document.write("<h1>num1++ ="+(num1++)+"</h1>"); //10
//document.write("<h1>num1="+num1+"</h1>");// 11
//++变量【先加后用】
//document.write("<h1>++num1 ="+(++num1)+"</h1>"); //11
//document.write("<h1>num1="+num1+"</h1>"); //11
//--【自动减1】
//变量--【先用后减】
//document.write("<h1>num1-- ="+(num1--)+"</h1>"); //10
//document.write("<h1>num1="+num1+"</h1>");// 9
//--变量【先减后用】
document.write("<h1>--num1 ="+(--num1)+"</h1>"); //9
document.write("<h1>num1="+num1+"</h1>"); //9
}
</script>
</head>
<body>
</body>
</html>1.2比较运算符 == === != > < >= <=
运算结果一定是布尔Boolean型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比较运算符</title>
<script>
window.onload=function(){
//2.比较运算符 == != > < >= <= ===
var num1 = 10;
var num2 = 3;
document.write("<h1>"+num1+"=="+num2+"="+(num1==num2)+"</h1>");
document.write("<h1>"+num1+"!="+num2+"="+(num1!=num2)+"</h1>");
document.write("<h1>"+num1+">"+num2+"="+(num1>num2)+"</h1>");
document.write("<h1>"+num1+"<"+num2+"="+(num1<num2)+"</h1>");
document.write("<h1>"+num1+">="+num2+"="+(num1>=num2)+"</h1>");
document.write("<h1>"+num1+"<="+num2+"="+(num1<=num2)+"</h1>");
// === [比较数值的同时，也要比较数据类型]
var a=10;
var b="10";
document.write("<h1>"+a+"==="+b+"="+(a===b)+"</h1>");
}
</script>
</head>
<body>
</body>
</html>1.3逻辑运算符 || && ！
运算数据和运算结果都是布尔boolean
3 || 5---？？？
(3>5) || (3<5)------true
真值表
a=true b=false
| || |
&& |
! |
| a || b---true |
a && b---false
扫描二维码关注公众号，回复：
13029203 查看本文章
|
!a ---false |
| b || a---true |
b && a---false |
!b ---true |
| a || a---true |
a && a---true |
|
| b || b---false |
b && b---false |
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>逻辑运算符</title>
<script>
window.onload=function(){
//3.逻辑运算符 || && ！
var num1 = 10;
var num2 = 3;
document.write("<h1>"+((num1>num2) || (num1<num2))+"</h1>"); //true
document.write("<h1>"+((num1>num2) && (num1<num2))+"</h1>"); //false
document.write("<h1>"+!((num1>num2) || (num1<num2))+"</h1>"); //false
}
</script>
</head>
<body>
</body>
</html>1.4条件运算符 【(判断表达式) ? 数值1 : 数值2】 ()? :
var iablename=()?value1:value2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件运算符</title>
<script>
function test1(){
//4.条件运算符 【(判断表达式) ? 数值1 : 数值2】 ()? :
var val=document.getElementById("text1").value;
var str=(val > 18)?"成年":"未成年";
document.getElementById("text1").value=str;
}
</script>
</head>
<body>
<input id="text1" type="text" value="请输入年龄" /><br>
<input type="button" value="测试条件运算符" onclick="test1();"/>
</body>
</html>1.5typeof 操作符--检测变量的数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>typeOf</title>
<script>
window.onload=function(){
//typeof 操作符--检测变量的数据类型
//格式 : typeof 变量
var str="hello"; //string
var num=123.5; //number
var boo=false; //boolean
var arr=new Array(12,45.5); //object
var obj={id:1001,name:"zhangsan"}; //object
var testnull=null; //object
var un; //undefined
document.write("<h1>str的数据类型=="+typeof str+"</h1>");
document.write("<h1>num的数据类型=="+typeof num+"</h1>");
document.write("<h1>boo的数据类型=="+typeof boo+"</h1>");
document.write("<h1>arr的数据类型=="+typeof arr+"</h1>");
document.write("<h1>obj的数据类型=="+typeof obj+"</h1>");
document.write("<h1>testnull的数据类型=="+typeof testnull+"</h1>");
document.write("<h1>un的数据类型=="+typeof un+"</h1>");
}
</script>
</head>
<body>
</body>
</html>2.JavaScript 流程控制语句
1.顺序结构 自上往下一行一行逐行执行
2.选择结构 有选择的执行某一部分程序
2.1if语句结构
1.if(){}
2.if(){}else{}
3.if(){}else if(){}else if(){}...else{}
4.if语句的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if语句结构</title>
<script>
window.onload=function(){
//if(){} --当()中的结果为true是执行{}中的程序
var num1=-10;
/*
if(num1>11){
alert("当()中的结果为true是执行{}中的程序");
}
*/
//2.if(){}else{}--【2选1】
//当()中的结果为true是执行第一个{}中的程序
//当()中的结果为false是执行第二个{}中的程序
/*
if(num1>11){
alert("当()中的结果为true是执行第一个{}中的程序");
}else{
alert("当()中的结果为false是执行第二个{}中的程序");
}
*/
//3.if(){}else if(){}else if(){}...else{}--【多选1】
//当第一个()中的结果为true执行第一个{}中的程序
//当第一个()中的结果为false执行第二个()中的程序
//当第二个()中的结果为true执行第二个{}中的程序
//当第二个()中的结果为false执行第s三个()中的程序
//.....以此类推
//当所有()中的结果为false的时候，执行最后一个{}中的程序
/*
if(num1>0){
alert("当第一个()中的结果为true执行第一个{}中的程序");
}else if(num1<8){
alert("当第二个()中的结果为true执行第二个{}中的程序");
}else if(num1<4){
alert("当第三个()中的结果为true执行第三个{}中的程序");
}else{
alert("当所有()中的结果为false的时候，执行最后一个{}中的程序");
}
*/
//4.if语句的嵌套 【4选1】
if(num1>0){
if(num1<60){
alert("不及格"); //true true
}else{
alert("及格"); //true false
}
}else{
if(num1==0){
alert("0分"); //false true
}else{
alert("没有负数"); //false false
}
}
}
</script>
</head>
<body>
</body>
</html>2.2Switch语句结构
switch 语句用于基于不同的条件来执行不同的动作。
语法
switch(表达式 n){
case 常量值1:
执行代码块 1 break;
case 常量值1:
执行代码块 2 break;
.......
case 常量值n:
执行代码块 n
break;
default:
表达式的结果与case后面常量值都不匹配；
}
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>switch</title>
<script>
function jisuan(){
var num1=document.getElementById("num1").value;
var op=document.getElementById("op").value;
var num2=document.getElementById("num2").value;
var span=document.getElementById("span");
switch(op){
case "+": span.innerHTML=num1+"+"+num2+"="+(num1*1+num2*1);break;
case "-": span.innerHTML=num1+"-"+num2+"="+(num1*1-num2*1);break;
case "*": span.innerHTML=num1+"*"+num2+"="+(num1*1*num2*1);break;
case "/": span.innerHTML=num1+"/"+num2+"="+(num1*1/num2*1);break;
default: span.innerHTML="运算符号有错!";
}
}
</script>
</head>
<body>
<input id="num1" type="text" value="请输入数字" /><br>
<input id="op" type="text" value="请输入运算符" /><br>
<input id="num2" type="text" value="请输入数字" /><br>
<input type="button" value="计算结果" onclick="jisuan()"/><br>
<span id="span"></span>
</body>
</html>3.循环结构
3.1for循环
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}
语句 1 （代码块）开始前执行 starts.[初始条件]
语句 2 定义运行循环（代码块）的条件[判断条件]
语句 3 在循环（代码块）已被执行之后执行[循环增量/减量]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for</title>
<script>
window.onload=function(){
/*
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}
语句 1 （代码块）开始前执行 starts.[初始条件]
语句 2 定义运行循环（代码块）的条件[判断条件]
语句 3 在循环（代码块）已被执行之后执行[循环增量/减量]
*/
/*
var arr1=new Array(6,5,4,3,2,1);
for(var i=0;i<arr1.length;i++){
document.write("<h"+arr1[i]+">测试for循环</h"+arr1[i]+">");
}
*/
for(var i=10;i>0;i--){
document.write("<h1>数字i=="+i+"</h1>");
}
}
</script>
</head>
<body>
</body>
</html>3.2for/in
JavaScript for/in 语句循环遍历对象的属性
for (保存属性变量 in 对象){
对象名称[保存属性值的变量] ;//属性值
}
例如：
var user={id:1001,name:"zhangsan",age:23};
var att=""; //保存属性的变量
for(att in user){
//alert(att);
alert(att+"=="+user[att]);
}3.3 while循环
语法:
while (判断条件){
需要执行的代码
}
1.初始值需要定义在while语法以外
2.控制循环增量/减量的代码，需要写在” 需要执行的代码”后面，如果没有就是死循环。
例如:
var arr1=new Array(6,5,4,3,2,1);
var i=0; // 初始值
while(i<arr1.length){
document.write("<h"+arr1[i]+">测试for循环</h"+arr1[i]+">");
i++;
}3.4 do{}while循环
语法
do{
需要执行的代码
}while (判断条件);
1.初始值需要定义在while语法以外
2.控制循环增量/减量的代码，需要写在” 需要执行的代码”后面，如果没有就是死循环。
例如:
var arr1=new Array(1,2,3,4,5,6);
var i=0; // 初始值
do{
document.write("<h"+arr1[i]+">测试for循环</h"+arr1[i]+">");
i++;
}while(i<arr1.length);while与do{}while()的区别？
while是先判断后执行，do{}while()先执行后判断，do{}while()与while同等条件下多执行一次。
while/do{}while()与for的区别
for--在执行的时候需要明确的知道循环的次数
While()/do{}while()----不需要明确的知道循环的次数。
4. break 和 continue 语句
break---中断[循环/switch]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>break</title>
<script>
for(var i=1;i<=6;i++){
document.write("<h"+i+">测试break</h"+i+">");
if(i==3){
break;
}
}
</script>
</head>
<body>
</body>
</html>continue--继续【循环-结束当前循环，进入下一次循环】
for(var i=1;i<=6;i++){
if(i==3){
continue;
}
document.write("<h"+i+">测试continue"+i+"</h"+i+">");
}变量 、运算符【表达式】、函数、语句、对象、事件
5.Javascript中的对象
1.内置的对象
1.1高级对象 String Number Date Array......
1.2Dom对象
window.onload=function(){
var textInput=document.getElementById("text1");
alert(textInput);
}1.3Bom对象 window
2.自定义的对象
JavaScript 对象是拥有属性和方法【函数】的数据。
真实生活中，一辆汽车是一个对象。
汽车【对象】---重量，长宽高，品牌，颜色......[属性]
汽车【对象】---前进，后退，刹车......[方法【函数】]
在 JavaScript中，几乎所有的事物都是对象。
你已经学习了 JavaScript 变量的赋值。
以下代码为变量 car 设置值为 "Fiat" :
var car = "Fiat";
对象也是一个变量，但对象可以包含多个值（多个变量）。
var car = {type:"Fiat", model:500, color:"white"};
JavaScript 对象是变量和方法的容器.
创建对象
var 对象名称={属性名称:属性值,....,方法名称:function(){},....};
对象的定义形式
1.定义一行
例如:var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
2.JavaScript 对象可以跨越多行。
例如:
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
属性名称不需要引号，属性值中【字符串,时间日期】需要引号，其他的值不需要引号。
对象中属性和方法的访问
1.对象中属性访问
格式: 对象名称.属性名称;
对象名称[“属性名称”] / 对象名称[‘属性名称’]
2.对象中方法访问
格式: 对象名称.方法名称;
变量的分类
全局变量---对象之外的变量
1.当前对象所处函数之外
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局变量</title>
<script>
//函数之外的全局变量
//1.可以被当前程序中的任何一个函数的方法访问
//2.可以被当前程序中的任何一个函数方法中的对象中的方法访问
var testval1="全局变量";
function test1(){
//alert("testval1=="+testval1);
var per={getPerTest:function(){
alert("testval1=="+testval1);
}};
per.getPerTest();
}
function test2(){
alert("testval1=="+testval1);
}
</script>
</head>
<body>
<input type="button" value="测试全局变量1" onclick="test1();"/><br>
<input type="button" value="测试全局变量2" onclick="test2();"/>
</body>
</html>2.当前对象所处函数里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局变量2</title>
<script>
//当前函数里面，对象之外的全局变量
//1.当前函数中的任何一个对象的方法中访问
//2.当前程序中的其他函数无法访问
function test1(){
var testval="函数里面，对象之外的全局变量";
var per={getPerInfo:function(){
alert(testval);
}};
var stu={getstuInfo:function(){
alert(testval);
}};
//per.getPerInfo();
stu.getstuInfo();
}
function test2(){
alert(testval);
}
</script>
</head>
<body>
<input type="button" value="测试全局变量1" onclick="test1();"/><br>
<input type="button" value="测试全局变量2" onclick="test2();"/>
</body>
</html>局部变量---对象里面，对象的函数里面，函数的参数。
当前程序中函数里面的局部变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部变量</title>
<script>
function test1(){
var testval="当前程序中函数里面的局部变量";
//1.当前程序中当前函可以访问
//2.当前程序中当前函的对象的方法中可以访问
var per={getPerInfo:function(){
alert(testval);
}};
var stu={getstuInfo:function(){
alert(testval);
}};
}
function test2(){
alert(testval);
}
</script>
</head>
<body>
</body>
</html>3.对象的函数中--只有当前对象的函数中可以访问
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部变量</title>
<script>
function test1(){
var per={getPerInfo1:function(){
var val="对象的函数中";
alert(val);
},
getPerInfo2:function(){
alert(val);
}
};
var stu={getstuInfo:function(){
alert(val);
}};
//per.getPerInfo1();
//per.getPerInfo2();
stu.getstuInfo();
}
</script>
</head>
<body>
<input type="button" value="测试局部变量1" onclick="test1();"/><br>
</body>
</html>4.对象中方法之外的变量【对象的属性】--- 对象名称.属性名称
5.函数的参数
1.当前程序的函数的参数===当前程序中函数里面的局部变量
2.当前对象的方法参数===对象的函数中的对象的函数中。
6.Javascript中的对象
1.1自定义对象
1.2 内置对象
1.高级对象
2.dom对象
3.bom对象
2.javascript高级对象
1.创建
2.调用对象的属性和方法
3.注意事项
2.1字符串对象（String）
一个字符串可以使用单引号或双引号：
实例
var carname="Volvo XC60";
var carname='Volvo XC60';注意：双引号中的双引号用单引号代替。
var str="zhangsan:say’hello’";
1.String创建
1.通过直接赋值的方式
var str1="hello,world";
2.通过String的构造器 new String(value);
var str2=new String("hello,world");
2.String的常用属性和方法
length属性---计算字符串的长度
charAt(index)--得到字符串中指定位置的字符
var str1="hello,world";
var ch2=str1.charAt(6); //windexOf()--得到指定字符/字符串在原始字符串中第一次出现位置,如果没有就得到-1
var str1="hello,world";
var l_index=str1.indexOf("l"); // 2
lastIndexOf()得到指定字符/字符串在原始字符串中最后一次出现位置,如果没有就得到-1
substring(start,end)--截取字符串
var path="F:\20201103\JavaScript基础\20201117JavaScript(4)\JavaScript_4.docx";
var dian_index=path.lastIndexOf(".")+1;
var houzhui=path.substring(dian_index);
if(houzhui=="docx"){
alert("DOCX文档");
}
replace(old,new) 方法在字符串中用某些字符替换另一些字符。
var res1=str1.replace("hello","你好");
字符串大小写转换使用函数 toUpperCase() / toLowerCase()
split(分隔符)将字符串通过指定分隔符转为String数组【拆分字符串】
var info="name=zhangsan;age=23;address=西安";
var strarray=info.split(";");
for(var i=0;i<strarray.length;i++){
document.write("<h1>"+strarray[i]+"</h1>");
}
特殊字符
下表列出其他特殊字符，可以使用反斜线转义特殊字符：
| 代码 |
输出 |
| \' |
单引号 |
| \" |
双引号 |
| \\ |
斜杆 |
| \n |
换行 |
| \r |
回车 |
| \t |
tab |
| \b |
空格 |
var info="zhangsan:say\"hello\""; 2.2Number 对象
JavaScript 只有一种数字类型。
JavaScript 数字可以使用也可以不使用小数点来书写：
实例
var pi=3.14; // 使用小数点
var x=34; // 不使用小数点
极大或极小的数字可通过科学（指数）计数法来写：
实例
var y=123e5; // 12300000
var z=123e-5; // 0.00123
精度
整数（不使用小数点或指数计数法）最多为 15 位。
小数的最大位数是 17，但是浮点运算并不总是 100% 准确：
var num1=10/3; //3.3333333333335
八进制和十六进制
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。
var y = 0377; //8进制 255
var z = 0xFF; //16进制 255
注意:我们在定数字变量赋值是不要随便去开头使用”0”/”0x”。
无穷大（Infinity）和 无穷小（-Infinity）
在javascript中所有 JavaScript 数字均为 64 位，当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。
var myNumber=2;
while (myNumber!=Infinity){
myNumber=myNumber*myNumber;
document.write(myNumber +'<br>');
}除以0也产生了无限: var num2=10/0;
NaN - 非数字值【not a Number】
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。
你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
//var x = 1000 / "Apple";
//alert(isNaN(x)); //true 【不是一个数字】
var x2 = 1000 * "1000"; //1000000
alert(isNaN(x2)); //false 【是一个数字】
数字对象的创建
1.变量直接赋值
2.通过构造器
//变量直接赋值
var testnum1=10.558;
//通过构造器
var testnum2=new Number(10.558);
数字对象的常用属性和方法
MAX_VALUE-- JavaScript 中可表示的最大的数
Number.MAX_VALUE
MIN_VALUE-- JavaScript 中可表示的最小的数
Number.MIN_VALUE
toFixed();四舍五入保留指定的小数位数
var testnum2=new Number(10.558);
//toFixed();四舍五入保留指定的小数位数
var res1=testnum2.toFixed(2); //10.56
当 num 太小或太大时抛出异常 RangeError。0 ~ 20 之间的值不会引发该异常。有些实现支持更大范围或更小范围内的值。
当调用该方法的对象不是 Number 时抛出 TypeError 异常。
var test1="1000";
var res2=test1.toFixed(2);toString()方法可把一个 Number 对象转换为一个字符串，并返回结果。
var test2=100;
var test3=200;
alert(test2+test3); //300
var strtest2=test2.toString();
var strtest3=test3.toString();
alert(strtest2+strtest3);//100200toString() 方法 输出16进制、8进制、2进制。
var myNumber = 10;
document.write(myNumber + ' 十进制<br>');
document.write(myNumber.toString(16) + ' 十六进制<br>');
document.write(myNumber.toString(8) + ' 八进制<br>');
document.write(myNumber.toString(2) + ' 二进制<br>');2.3JavaScript Array（数组）
数组对象的作用是：使用单独的变量名来存储一系列的值。
数组的创建
1.先定义后赋值
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";2.定义+赋值
var myCars=new Array("Saab","Volvo","BMW");3.字面量赋值
var myCars=["Saab","Volvo","BMW"]; //[]=数组 数组取值---格式: 数组名称[下标]
var myCars=["Saab","Volvo","BMW"];
myCars[2];//BMW在一个数组中你可以有不同的对象
var stu={stuid:1001,
stuname:"zhangsan",
testfunc:function(){
alert("自定义对象");
}
};
var myarr = new Array();
myarr[0]=100;
myarr[1]="hello";
myarr[2]=true;
myarr[3]=stu;
alert(myarr[3].stuid);数组方法和属性
length---得到数组元素的个数。
concat()合并两个数组
var myCars=["Saab","Volvo","BMW"]; //[]=数组
var myarr = new Array();
myarr[0]=100;
myarr[1]="hello";
myarr[2]=true;
myarr[3]=stu;
var res1=myarr.concat(myCars);
alert(res1.length);join()用数组的元素组成字符串
var str=myCars.join();pop()删除数组的最后一个元素
myCars.pop();shift()删除数组的第一个元素
myCars.shift();push()数组的末尾添加新的元素
myCars.push("hello");unshift()在数组的开头添加新元素
myCars.unshift("hello");reverse()将一个数组中的元素的顺序反转排序
myCars.reverse();sort()数组排序（按字母顺序升序)
myCars.sort();数字排序（按数字顺序升序/降序）
var points = [40,100,1,5,25,10];points.sort(function(a,b){return a-b});升序
points.sort(function(a,b){return b-a});降序
toString()转换数组到字符串