JavaScript初学入门（JS打印9*9乘法表，JS制作简易计算器）

柔光的暖阳◎ 2021-10-18 16:24 175阅读 0赞

**目录**

网页的三部分组成：

Java和JavaScript的关系：

JavaScript的三种使用方式：

Js的5种输出方式：

Js的语法初始：

js中值的类型：

JS中的运算符：

JS中的流程控制语句\----------------->>>简易计算器----->>>>打印9\*9乘法表

JS中的函数(相当于java中的方法)

JS中变量的作用域(1)全局变量(2)局部变量 :声明在函数内

JS中的对象

JS中常用的内置对象 (是JS中一个种含有属性和方法的特殊的数据类型而已)

--------------------

# 网页的三部分组成： #

1：结构（Structure）：由HTML（显示数据）和XML（存储和传输数据）

2：表现（Presentation）：由Css组成

3：行为 （Behavior）：ECMAScript

# Java和JavaScript的关系： #

Java和JavaScript的关系就好比：雷锋  和雷锋塔 ，毫无联系。

## JavaScript的三种使用方式： ##

**1）内嵌到HTML标签中**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		//onclick等于后面是js的语言，这是嵌入到html语言中的，这个功能是弹出ok窗口
    		<input type="button" value="点击" onclick="window.alert('ok');"/>
    	</body>
    </html>

**2）写在Script标签中**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function text(){
    				window.alert("ok");
    			}
    		</script>
    	</head>
    	<body>
    		
    		<input type="button" value="登录" onclick="text()" />
    	</body>
    </html>

**3）写在单独的js标签中**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script src="../js/js4.js"></script>
    	</head>
    	<body>
    		<input type="button" value="登录" onclick="text1()"/>
    	</body>
    </html>

js文件：

function text1(){
    	window.alert("hello");
    }

## Js的5种输出方式： ##

1）window.alert(" ");   弹窗的方式进行输出

2）document.write(" ");  以流的方式输出到页面中（建立新的页面）

3）console.write(" ")； 将信息打印在控制台上

4）innerHTML（）；将内容写在HTML的标签里。

5）innerText（）;   将内容写在html标签里，（Text的括号里的所有都是文本）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function text(){
    				window.alert("第一种方式：弹出窗口");
    			}
    			function text1(){
    				document.write("第二种方式，打印在新的页面");
    			}
    			function text3(){
    				console.log("将信息打印在控制台上F12可见")
    			}
    			function text4(){
    //				需要创建div标签，然后把信息打印在div标签里
    				var doc=document.getElementById("div1");//得到id为div1的标签
    				doc.innerHTML="将这个信息打印在id=div1的div标签里";
    				doc.innerText="打印成文本信息所有的全部打印";
    				//innerHTML和innerText的区别是：
    				//如果在innerHTML中输出<h1>A</h1>这个就相当于在id=div1的div中在放一个h1的标题标签
    				//但是在innerText中这样一模一样的打印，就会打印出  <h1>A</h1>  这个文本信息
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="第一种方式" onclick="text()"/>
    		<input type="button" value="第二种方式" onclick="text1()"/>
    		<input type="button" value="第三种方式" onclick="text3()"/>
    		<input type="button" value="第四种方式" onclick="text4()"/>
    		<div id="div1"></div>
    	</body>
    </html>

## Js的语法初始： ##

###      js中值的类型： ###

Number类型、  String类型 、 Array（数组）类型   、Object（对象）类型、Function函数（相当于java中的方法）

###     ###

###   JS中的运算符： ###

a)算术运算符 +,-,\*,/,%  
        b)逻辑运算符  
         c)关系运算符  
**  JS中的变量统统使用var来声明，所以JS是一种弱类型语言  
  JS中的变量使用var来声明，所以JS中的变量没有数据类型，但是JS中的值却有数据类型**

**我们可以使用type of函数来判断 变量的类型是什么**

### JS中的流程控制语句 ###

**( 1)分支结构**  
          单分支 if  
          双分支 if..else  
           多分支  ：多重if  
                             switch

**运用学过的知识编写一个简易的计算器：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function text(){
    				//document.getElementById是通过id找到对应的标签 .value是得到里面的值
    				var txt1=document.getElementById("tx1").value;
    				var txt2=document.getElementById("tx2").value;
    
    				//判断选择的运算方式，然后分别进行计算
    				var choose=document.getElementById("sel").value;
    				
    				//定义计算结果
    				var result;
    				switch(choose){
    					case"+":
    						//虽然得到了两个值，但是这两个值是String类型的，所以需要parseInt进行类型转换
    				       //当两个值进行相加。我们知道如果是String类型的，会形成字符串拼接的情况，所以要类型转换
    				       //相加 得到了整数的变量
    				        result=parseInt(txt1)+parseInt(txt2);
    				        break;
    				    case"-":
    				    //只有+会造成字符串的拼接，所以其他符号直接计算
    				    	result=txt1-txt2;
    				    	break;
    				    case"*":
    				    	result=txt1*txt2;
    				    	break;
    				    case"/":
    				    //两种情况，一个正常除数 一个如果除数为0
    				    	if(txt2==0){
    				    		result="除数不能为0";
    				    	}else{
    				    		result=txt1/txt2;
    				    	}
    				    	break;
    				}
    				//获取id=div1的div   然后打印输出结果
    				document.getElementById("div1").innerHTML=result;
    				
    			}
    		</script>
    	</head>
    	<body>
    		第一个数：<input type="text" id="tx1" value=""/>
    		第二个数：<input type="text" id="tx2" value=""/>
    		运算方式:<select id="sel" name="choose">
    				<option value="+">+</option>
    				<option value="-">-</option>
    				<option value="*">*</option>
    				<option value="/">/</option>
    		</select>
    		<input type="button" value="计算" onclick="text()"/>
    		运算结果：<div id="div1"></div>
    	</body>
    </html>

**(2)循环结构**  
     a)for  
     b)while  
     c)do-while  
     d)for ..in

**和java用法基本一样，除了for in循环，这里使用一下for in循环打印数组。然后我们再练习打印99乘法表**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function text(){
    				//定义数组
    				var arr=['one','two','three','four'];
    				//for in循环
    				for(var i in arr){
    					alert(arr[i]);
    				}
    			}
    			function text1(){
    				for(var i=1;i<=9;i++){
    					for(var j=1;j<=i;j++){
    						document.write(i+"*"+j+"="+i*j+"&nbsp,&nbsp");
    					}
    					document.write("</br>");
    				}
    				
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="for in使用" onclick="text()"/>
    		<input type="button" value="打印99乘法表" onclick="text1()" />
    	</body>
    </html>

### JS中的函数(相当于java中的方法) ###

(1)系统函数  
    parseInt(....)

(2)自定义函数  
  JS中的函数不允许重载

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="utf-8">
                    <title></title>
                    <script type="text/javascript">
                        //(1)第一种声明函数的方式
                            function test1(){
                                    //函数体
                                    alert("无参无返回值的函数");
                            }
                            function test2(a,b){ //小括号里的叫形参，但是JS是弱类型语言，所有的类型使用var声明，直接省略即可
                                    alert(a+"  "+b);
                            }
                            /**在JS中函数不能重载 test2(a,b,c)将test2(a,b)进行了覆盖*/
                            function test2(a,b,c){
                                    alert(a+" "+ b+" "+ c);
                            }
                            function test3(){
                                    return "helloworld";
                            }
                            function test4(a,b){
                                    return a+b;
                            }
                            
                            //(2)第二种声明函数的方式
                            var x=function(){
                                    alert("hello");
                            }
                            //(3)第三种声明方式
                            function test5(){
                                    //想表达一个含义，函数是对象 ，因为它是使用new关键字创建出 来了
                                    var y=new Function("a","b", "return a*b");
                                    var x=y(10,20);
                                    alert(x);
                            }
                    </script>
            </head>
            <body>
                    <input type="button" id="" value="无参无返回的函数"  onclick="test1()"/>
                    <input type="button" id="" value="带参无返回的函数" onclick="test2(10,20)" />
                    <input type="button" id="" value="带参无返回的函数" onclick="test2(10)" />
                    <input type="button" id="" value="带参无返回的函数" onclick="test2(10,20)" />
                    <input type="button" id="" value="无参带返回值的函数" onclick="alert(test3())" />
                    <input type="button" id="" value="带参带返回值的函数" onclick="alert(test4(10,20))" />
                    
                    <hr/>
                    <input type="button" id="" value="匿名函数"  onclick="test5()"/>
            </body>
    </html>

### JS中变量的作用域   (1)全局变量   (2)局部变量 :声明在函数内 ###

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="utf-8">
                    <title></title>
                    <script type="text/javascript">
                            var b=20;//全部变量
                            function test1(){
                                    var a=10;
                                    alert(a);
                            }
                            function test2(){
                                    //alert(a); a is not defined ，证明一件事儿，局部变量a只能在test1中使用
                            }
                            function test3(){
                                    alert(b);
                            }
                            
                    </script>
                    <script type="text/javascript">
                             function test4(){
                             	alert(b);
                             }
                             function test5(){
                             	c=20;
                             	alert(c);
                             }
                             function test6(){
                                    //alert(c); //找不到c is not defined
                            }
                             
                    </script>
            </head>
            <body>
                    <input type="button" id="" value="局部变量" onclick="test1()" />
                    <input type="button" id="" value="局部变量的作用域" onclick="test2()" />
                    <input type="button" id="" value="全部变量1" onclick="test3()" />
                    <input type="button" id="" value="全部变量2" onclick="test4()" />
                    <input type="button" id="" value="省略var变量3" onclick="test5()" />
            </body>
    </html>

### JS中的对象 ###

(1)自定义对象  
(2)JS中的内置对象

###  JS中常用的内置对象 (是JS中一个种含有属性和方法的特殊的数据类型而已)     ###

(1)String  
 (2)Date  
 (3)Array数组  
 (4)Function函数  
 (5)Math类  
 (6)全局对象

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="utf-8">
                    <title></title>
                    <script type="text/javascript">
                             function test1(){
                             	//String
                             	var str="helloworld";
                             	console.log(typeof str); // 值的类型是string
                             	console.log(str[0]); //相当于java中的charAt(int index) 根据索引获取字符
                             	
                             	var str2="\"hello\""; //  \转义字符
                             	console.log(str2);
                             	console.log(str.length); //与java不一样,length是String的属性
                             	
                             	console.log("o第一次出现的位置:"+str.indexOf("o"));
                             	console.log("o最后一出现的位置:"+str.lastIndexOf("o"));
                             	
                             	var str3="hello"; //match通常与正则表达式一起使用
                             	console.log("str中是否包含str3的内容:如果包含返回str3，如果不包含返回:null"+str.match(str3));
                             	console.log("str中是否包含666:"+str.match("666"));
                             	//替换
                             	console.log("替换:"+str.replace("o","你"));//替换第一个
                             	//大小转换
                             	console.log(str.toUpperCase());
                             	console.log(str.toLowerCase())
                             	
                             }
                             function test2(){/*
                             	var d1=new Date();  //得到当前系统时间
                             	console.log(d1);
                             	var year=d1.getFullYear();
                             	console.log(year);
                             	var month=d1.getMonth();
                             	console.log(month);
                             	var da=d1.getDate();
                             	console.log(da);  //12,8月12号
                             	var day=d1.getDay();  //1,    星期一
                             	console.log(day); 
                             	
                             	var d2=new Date(1000);  //得到1970年1-1  08:00:01东八区
                             	console.log(d2);
                             	//格式化日期，相当于java中的
                             	//var s=d1.format("yyyy-MM-dd");//结果为
                             	//console.log(typeof s+" "+s)
                             	//alert(new Date().format("yyyy年MM月dd日"));
                             	*/
                             }
                             function test3(){
                             	//Math对象
                             	console.log(Math.abs(10)+" "+Math.abs(-10));
                             	console.log(Math.ceil(98.001));
                             	console.log(Math.floor(98.999));
                             	console.log(Math.round(98.4)+" "+Math.round(98.5));
                             	console.log(Math.sqrt(4));
                             	//随机数
                             	console.log(Math.random());
                             	//如何得到1000-9999的随机数呢
                             	console.log( Math.ceil((Math.random()*9000))+1000);
                             	console.log(Math.max(10,20,30,3));
                             }
                             function test4(){
                             	var reg=/\d*/i;//模型中要包含0-9的数字
                             	var reg2=/\w{4}/i;
                             	
                             	var reg3=new RegExp("d","i"); //包含d
                             	//获取文本框
                             	var txtValue=document.getElementById("txt").value;
                             	//判断文本框中的值是否包含0-9的数字
                             	//与String的match一起使用
                             	alert(txtValue.match(reg3));
                             }
                    </script>
            </head>
            <body>
                    <input type="button" id="" value="String对象" onclick="test1()" />
                    <input type="button" id="" value="Date对象" onclick="test2()" />
                    <input type="button" id="" value="Math对象" onclick="test3()" />
                    <input type="button" id="" value="正则表达式对象" onclick="test4()" />
                    <input type="text" id="txt" value="" />
            </body>
    </html>