JavaScript的基本语法

1、变量和数据类型

<script type="text/javascript">
	    var shxt = 100;
	    alert(typeof(shxt));//number

	    shxt = 123.123;
	    alert(typeof(shxt));//number

	    shxt = "四海兴唐";
	    alert(typeof(shxt));//string

	    shxt = false;
	    alert(typeof(shxt));//boolean
	    
	    var num = null;
	    alert(typeof(num));//object//会报错

	    var a;
	    alert(typeof(a));//undefined
	    
	    var arr = new Array();
	    alert(typeof(arr));//object

	    var obj = new Object();
	    alert(typeof(obj));//object
</script>

2、研究哪些是false???

<script type="text/javascript">
	   //控制台输出
	   console.log("=========>研究false有哪些<=============");
	   var shxt = false;
	   console.log(!!shxt);

	   shxt="";
	   console.log(!!shxt);

	   shxt=0;
	   console.log(!!shxt);

	   var a;
	   console.log(!!a);

	   shxt = null;
	   console.log(!!shxt);

	   shxt = NaN;
	   console.log(!!shxt);
</script>

false

""

0

不赋值

null

NaN[not a number]

3、如何定义函数???

<script type="text/javascript">
	   function test01(){
		   console.log("定义式==有名函数")
	   }
	   
	   var test01 = function(){
		   console.log("变量式==匿名函数")
	   }
</script>

4、有名函数:

<script type="text/javascript">
	   //调用方法
	   test01();
	   function test01(){
		   console.log("悟空")
	   }
	   test01();
	   function test01(){
           console.log("八戒")
       }
	   test01();
	   function test01(){
           console.log("唐僧")
       }
	   test01();
//上面会输出4遍唐僧

</script>


<script type="text/javascript">
       //调用方法
       test01();
       function test01(){
           console.log("悟空")
       }
       test01();
//会输出两遍悟空
</script>
<!--方法只在自己的范围内生效,并且在各自的范围内,后者覆盖前者。-->

5、匿名函数:

<script type="text/javascript">
			//test01();
			var test01 = function() {
				console.log("悟空");
			}
			test01();
			test01 = function() {
				console.log("八戒");
			}
			test01();
			
			test01 = function() {
                console.log("唐僧");
            }
            test01();

//会输出
//悟空
//八戒
//唐僧
</script>

匿名函数,后者不会覆盖前者,并且是按顺序执行的,只有先有方法声明,才能有调用。

6、函数的形参

<script type="text/javascript">
	   function test01(a,b){
           console.log("a,b");
           return a+b;
       }
       function test01(a,b,c){
           console.log(a+","+b+","+c);
           return a+b+c;
       }
       function test01(){
    	   //内置对象
    	   console.log(arguments);
    	   var sum=0;
    	   for(var i=0;i<arguments.length;i++){
    		   sum+=arguments[i];
    	   }
    	   return sum;
       }
       
       var result01 = test01(1,2);
       var result02 = test01(1,2,3);
       console.log(result01);
       console.log(result02)
</script>

 7、逻辑运算符“||”或者

<script type="text/javascript">
	   //||的运行情况是跟Java的一样,但是结果不一样
	    console.log(true||false);//true
	    var num1 = 1;
	    var num2 = 0;
	    console.log(num1||num2);//1
	    var shxt;
	    var str = "悟空";
	    console.log(shxt||str);//悟空
	    var shxt = null;
	    var str = "八戒";
	    console.log(shxt||num2||num1||str);//1
</script>

||的运行情况是跟Java的一样,但是结果不一样

8、比较运算符

<script type="text/javascript">
	   var shxt01 = "悟空";
	   var shxt02 = "悟空";
	   console.log(shxt01==shxt02);//true
	   
	   var num01 = 123;
	   //如果你的值为纯数字组成的字符串,在使用==比较的时候默认情况下使用的是10进制转换
	   var str01 = "123";
	   console.log(num01==str01);//true
	   
	   var num02 = 0123;
	   console.log(num02)//83
	   var str02 = "0123";
	   console.log(num02==str02);//false
	   
	   //JavaScript当中有一个符号===叫做全等 typeof(A)==typeof(B)&&A==B
	    console.log(num01===str01);//false
	   // 还有一个 !== 不全等   typeof(A)!=typeof(B) || A!=B   
</script>

如果你的值为纯数字组成的字符串,在使用==比较的时候默认情况下使用的是10进制转换。

JavaScript当中有一个符号===叫做全等: typeof(A)==typeof(B)&&A==B

还有一个 !== 不全等:typeof(A)!=typeof(B) || A!=B

9、“+”的不同含义

<body>
	   <input type="text" id="num01">
	   <input type="text" id="num02">
	   <button type="button" onclick="mytest()">计算</button>
	   
	   <input type="text" id="result01" readonly="readonly" >
	   <textarea rows="" cols="" id="result02" ></textarea>
	   <span id="result03"><b>元素内容</b></span>
	<script type="text/javascript">
	   // + Java中 +12  运算符加法  连接符 字符串+
	   function mytest(){
		 var value01 =  document.getElementById("num01").value;//元素
		 var value02 =  document.getElementById("num02")["value"];//元素
		 
		 var result = parseInt(value01)+parseInt(value02);
		 document.getElementById("result01").value=result;
		 document.getElementById("result02").value=result;
		 console.log(document.getElementById("result03").innerHTML);
//<b>元素内容</b>
		 document.getElementById("result03").innerHTML=result;//innerHTML获取(HTML标签)或者设置元素内容
		 //JavaScript提供了全局的内置函数 parseInt(变量) parseFloat(变量)
		 //console.log(parseFloat(value01)+parseInt(value02));
		 
		 //console.log(obj["type"]);
		 //console.log(obj.id);
		 //console.log(typeof(obj.value)); 
		 
	   }
	</script>
</body>

①获取标签的值:

var value01 =  document.getElementById("num01").value;

或者

var value02 =  document.getElementById("num02")["value"];

document.getElementById("result03").innerHTML;就可以获取到id为result03里面的元素了。

innerHTML获取(HTML标签)或者设置元素内容

10、数组的说明

<script type="text/javascript">
//2.推荐简写方式
       var array01 = [123];
       console.log(array01);
       //可以存储如何的数据
       var array01 = [123,"悟空",true,null,undefined,function(){
    	   console.log("dddd");
       }];
       array01[5]();
       //如何清空数组
       array01.length=0;
       console.log(array01);
       
       var array02 = [100,200,300,400];
       for(var i  in array02){
    	   console.log("获取索引值:"+i);
    	   console.log(array02[i]);
       }
       var array03 = [];
       array03["wukong"]="悟空";
       array03["bajie"]="八戒";
       array03["tangseng"]="唐僧";
       console.log(array03.length)
       for(var i=0;i<array03.length;i++){//不好使
    	   console.log(i);
       }
       for(var key in array03){
    	   console.log(key);
    	   console.log(array03[key])
       }
       
       var array04=[100,200,300];
       array04[10]=400;
       array04.push(500);
       array04.push("wukong");
       array04.push(null);
       array04.unshift("八戒");
       console.log(array04)
       
</script>

11、对象说明

JavaScript当中没有类,但是有对象。

<script type="text/javascript">
        //2.推荐的声明方式
	   var obj = {
		  "name":"悟空",//obj的第一个属性
		  age:100//obj的第二个属性
	   };
	   obj.school="吉林大学";//obj的第三个属性
	   obj["shxt"]="四海兴唐";//obj的第四个属性
	   function test01(){
		   console.log(this);
	   }
	   obj.info = test01;//可以理解将test01方法的返回值赋给info
	   
	   test01();//输出Window
	   obj.info();//输出Object
	   
</script>

12、变量方面的问题

<script type="text/javascript">
	   var name = "谢霆锋";
	   var obj = {
		  "name":"李健",
		  getName:function(){
		  	console.log(this)
			  console.log(this.name);
		  }
	   };
	   var shxt = obj.getName;//这个只是将obj.getName借给Window用了用,然后输出的this也是Window自己的,name也是他自己的。
	   shxt();//谢霆锋 this==window
	   obj.getName();//李健 this==obj
</script>

我下面这段话很有意思:

var shxt = obj.getName;

这个只是将obj.getName借给了Window用了用,然后输出的this是Window自己的,name也是Window自己的。

就相当于做饭,去邻居借了个郭,菜和调料还是要用自己家的。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值