文档章节

第5章 初探JavaScript

gtandsn
 gtandsn
发布于 2016/12/08 19:48
字数 1082
阅读 2
收藏 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>     

 

© 著作权归作者所有

共有 人打赏支持
gtandsn
粉丝 0
博文 43
码字总数 27504
作品 0
成都
《JavaScript入门经典》注意点笔记摘录1

第1章 开启Javascript开发之门 1.一般情况下,计算机的最低配置往往不能满足复杂的JavaScript程序的处理需要,如果增大内存,可以明显地提高程序在浏览器中运行的速度。 2.<script>标记可以放...

ChenReason
2014/04/08
0
2
开源书籍-JavaScript 编程精解

《JavaScript 编程精解》(Eloquent JavaScript)第三版,是由马尔奇·哈弗贝克(Marlin Haverbeke)JavaScript程序员编写的JS入门书籍,Marlin Haverbeke通晓多种编程语言,在Web开发方面积累...

marsdream
06/04
0
0
使用scrapy的定制爬虫-第二章-概

但在堆代码之前,先预研一下,然后想想下面几个问题. 1,你定制爬虫的目标 2,预计的规模 3,是否需要js支持 4,是单次爬取还是周期性爬取 5,其他 6,突破网站的防爬取策略 如上几个问题也并非完全独...

斑ban
2013/04/03
0
3
JavaScript 编程精解 中文第三版 零、前言

零、前言 原文:Introduction 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 We think we are creating the system for our own purp...

ApacheCN_飞龙
06/01
0
0
小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载五(使用PhoneGap

除了能够将HTML页面打包成可以直接安装运行的APP外,PhoneGap的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息,从而实现一些原本只有依靠原生SDK才能够达到的目的。范例...

woiwoi
2014/11/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HTTPS is easy

HTTPS is easy https://www.troyhunt.com/https-is-easy/ HTTPS is easy! In fact, it's so easy I decided to create 4 short videos around 5 minutes each to show people how to enable ......

openthings
17分钟前
0
0
bugList 2

用户端: 1. 上传文件时,当选择:彩色-A3-双面时,第二个图片有bug 应改为 和第一个图片的类型相同 2. 确认打印时,三个下拉选目前有bug 应改为:根据后台配置的商家,group by计算出不同城...

勇恒
20分钟前
2
0
keras cnn 网咯 mnist 分类

搭建貌似比tf是简单很多。。。。。 from keras.datasets import mnistfrom keras.utils import np_utilsfrom keras.models import Sequentialfrom keras.layers import Dense, Activat......

阿豪boy
23分钟前
0
0
解决 /var/run/nginx.pid failed

nginx: [error] open() "/var/run/nginx.pid" failed (2: No such file or directory) sudo nginx -c /etc/nginx/nginx.conf nginx -s reload...

驛路梨花醉美
24分钟前
0
0
nginx负载均衡-ssl原理-生成ssl密钥对-nginx配置ssl

nginx负载均衡: 1.创建配置文件 vim /usr/local/nginx/conf/vhost/load.conf #添加以下内容: upstream qq_com #名字自定义,借助此模块定义多个IP,后面...

ZHENG-JY
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部