第5章 初探JavaScript
博客专区 > gtandsn 的博客 > 博客详情
第5章 初探JavaScript
gtandsn 发表于10个月前
第5章 初探JavaScript
  • 发表于 10个月前
  • 阅读 1
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

一、准备

    在HTML中定义脚本的两种方式:内嵌和外部脚本。

  document.writeln:在文档中插入一条语句

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span>222222222</span>
<script>
    document.writeln("1111111");
</script>
<span>3333333333</span>
</body>
<script>
    document.writeln("555");
</script>
</html>

二、定义和使用函数

如果像是 document.writeln("555");这样的语句,浏览器一遇到他们都会执行,可以把几条语句包在函数中,这样浏览器只有遇到一条调用函数的语句才会执行。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span>222222222</span>
<script>
    document.writeln("1111111");
</script>
<span>3333333333</span>
</body>
<script>
function test() {
   document.writeln("555");
    document.writeln("666");
}
   test();
</script>
</html>

 带参数的函数:js是弱类型的语言所以定义参数时不需要带类型,

   1、不能通过参数个数来区分函数

   2、没有提供值的参数是undefined

   3、后加载的函数会覆盖前面相同名的函数

<script>
function test(a,b) {
   document.writeln("555");
    document.writeln("666");
}

function test(a,b,c,d) {
   document.writeln(a);
    document.writeln(d);
}
   test(1,2,3);
</script>

有返回结果的函数:

<script>
function test(a,b) {
 return "hehe";
}
   document.writeln(test());
</script>

三、使用变量和类型

      定义变量用var

      局部变量:定义在函数中的变量

     全局变量:直接在script元素中定义的变量

<script>
var globlvar="orange"
function test() {
var localVar="apple"
return localVar;
}
   document.writeln(test());
</script>
<script>
   document.writeln(globlvar);
</script>

三种基本类型:string ,number,boolean

对象:有哪些方法可以创建对象?

        1)new 

        <script type="text/javascript">        
            var myData = new Object();
            myData.name = "Adam";
            myData.weather = "sunny";
            
            document.writeln("Hello " + myData.name + ". ");
            document.writeln("Today is " + myData.weather + ".");
        </script>       

        2) 字面量

       方法内部使用对象属性时要用到this关键字

      <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
                printMessages: function() {
                    document.writeln("Hello " + this.name + ". ");
                    document.writeln("Today is " + this.weather + ".");        
                }
            };
            
            myData.printMessages();            
            
        </script>  

 使用对象:

1、读取和修改

      <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.name = "Joe";
            myData["weather"] = "raining";
            
            document.writeln("Hello " + myData.name + ".");
            document.writeln("It is " + myData["weather"]);
            
        </script> 

myData["weather"]:这种方式可以用变量表明属性值

2.枚举对象属性

    <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
                printMessages: function() {
                    document.writeln("Hello " + this.name + ". ");
                    document.writeln("Today is " + this.weather + ".");        
                }
            };
            
            for (var prop in myData) {
                document.writeln("Name: " + prop + " Value: " + myData[prop]);
            }
                        
        </script>        

3.增删属性和方法

   增加属性

        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.dayOfWeek = "Monday";
        </script>  

    增加方法

   <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.sayHello = function() {
              document.writeln("Hello");  
            };
                    
        </script>        

   删除属性

       <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.sayHello = function() {
              document.writeln("Hello");  
            };


            delete myData.name;
            delete myData["weather"];
            delete myData.sayHello;  
        </script>    

   判断属性是否存在

        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };

            var hasName = "name" in myData;
            var hasDate = "date" in myData;
            
            document.writeln("HasName: " + hasName);
            document.writeln("HasDate: " + hasDate);
                    
        </script>    

四、使用JavaScript运算符

   ==和===的区别:===不会进行类型转换再比较

   <script type="text/javascript">
        
            var myData1 = 5;
            var myData2 = "5";
            var myData3 = myData2;
        
            var test1 = myData1 == myData2;
            var test2 = myData2 == myData3;
            var test3 = myData1 === myData2;
            var test4 = myData2 === myData3;
            
            document.writeln("Test 1: " + test1 + " Test 2: " + test2);
            document.writeln("Test 3: " + test3 + " Test 4: " + test4);
        </script>        

五、类型转换

      字符串(+)比加法运算符(+)优先级要高

   <script type="text/javascript">
        
            var myData1 = 5 + 5;
            var myData2 = 5 + "5";
            
            document.writeln("Result 1: " + myData1);
            document.writeln("Result 2: " + myData2);
            
        </script>        

     1.数字转换成字符串:Number.toString()

        toString(), toString(2), toString(8), toString(6);toFixed(n):以小数点后几位表示

     2.字符串转换成数字:Number,praseInt,parseFloat;

      Number比其它两个都要严格,后面两个会忽略数字面的字符串。

六、使用数组

      1、创建数组:

        <script type="text/javascript">        
     
            var myArray = new Array();
            myArray[0] = 100;
            myArray[1] = "Adam";
            myArray[2] = true;
    
        </script>     

  <script type="text/javascript">
        
          var myArray = [100, "Adam", true];
    
        </script>     

   2.读取和修改数组内容:

        <script type="text/javascript">
            var myArray = [100, "Adam", true];
            document.writeln("Index 0: " + myArray[0]);            
        </script>
          <script type="text/javascript">
            var myArray = [100, "Adam", true];
            myArray[0] = "Tuesday";
            document.writeln("Index 0: " + myArray[0]);            
        </script>     

     3、枚举数组内容

        <script type="text/javascript">
            var myArray = [100, "Adam", true];
            for (var i = 0; i < myArray.length; i++) {
                document.writeln("Index " + i + ": " + myArray[i]);                
            }                        
        </script>    

    4、数组的常用内置方法:join,pop,push,reverse,shift,slice,sort,unshift

七、 异常:

e的属性:message,name(错误名称),number

        <script type="text/javascript">
            try {
                var myArray;
                for (var i = 0; i < myArray.length; i++) {
                    document.writeln("Index " + i + ": " + myArray[i]);                
                }
            } catch (e) {
                document.writeln("Error: " + e);
            } finally {
                document.writeln("Statements here are always executed");
            }
        </script>    

八、比较undefined和null值

      undefined:当定义了一个值没有赋值的时候,和对象属性不存在的时候。表示"缺少值",就是此处应该有一个值,但是还没有定义

    <script type="text/javascript">
		var abc;
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            document.writeln("Prop: " + myData.doesntexist);
			document.writeln("11111: " + abc);
        </script>        

      null表示没有值,表示"没有对象",即该处不应该有值

    区分:

        <script type="text/javascript">
        
            var firstVal = null;
            var secondVal;
            
            var equality = firstVal == secondVal;
            var identity = firstVal === secondVal;
    
            document.writeln("Equality: " + equality);
            document.writeln("Identity: " + identity);
            
        </script>     

 

共有 人打赏支持
粉丝 0
博文 41
码字总数 26971
×
gtandsn
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: