JavaScript Window Object : สอน method และ property ของ Window Object, เรียน method และ property ของ Window Object
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • alert() ใช้ในการสร้าง message dialog
    confirm() ใช้ในการสร้าง question box
    prompt() ใช้ในการสร้าง input box โดยจะคืนค่าข้อมูลที่กรอกกลับมา
    open() ใช้ในการเปิดหน้าต่างขึ้นมาใหม่
    close() ใช้ในการปิดหน้าต่าง
    navigate() ใช้ในการโหลด url เข้ามาในหน้าต่าง
    print() ใช้พิมพ์เนื้อหาของหน้าต่างออกทางเครื่องพิมพ์
    focus() ใช้กำหนดให้หน้าต่างได้รับ focus และในกรณีที่มีหลายหน้าต่าง หน้าต่างที่ได้รับ focus นี้จะมาอยู่ด้านหน้าสุด
    blur() ใช้กำหนดให้หน้าต่างสูญเสีย focus และในกรณีที่มีหลายหน้าต่าง
    moveTo() ใช้เลื่อนหน้าต่างไปยังตำแหน่งพิกัด x, y ตามที่กำหนด
    moveBy() ใช้เลื่อนหน้าต่าง โดยจะนำค่า x, y ที่กำหนด ไปบวกลบกับตำแหน่งพิกัด x, y เดิม
    resizeTo() ใช้ปรับขนาดของหน้าต่าง โดยจะมีขนาดตามที่กำหนด
    resizeBy() ใช้ปรับขนาดของหน้าต่าง โดยจะนำค่า widht, height ที่กำหนด ไปบวกลบกับขนาดเดิม
    scrollTo() ใช้เลื่อนแถบเลื่อนไปยังพิกัด x, y ตามที่กำหนด
    scrollBy() ใช้เลื่อนแถบเลื่อน โดยจะนำค่า x, y ที่กำหนด ไปบวกลบกับพิกัดเดิม
    setTimeout() ใช้ตั้งเวลาให้พังก์ชันทำงาน โดยจะทำงานเพียงครั้งเดียวเมื่อถึงเวลาที่กำหนด
    clearTimeout() ใช้ยกเลิกการตั้งเวลาทำงานของฟังก์ชัน ของ method setTimeout()
    setInterval() ใช้ตั้งเวลาให้พังก์ชันทำงาน โดยจะทำงานวนซ้ำไปเรื่อยๆเมื่อถึงเวลาที่กำหนด
    clearInterval() ใช้ยกเลิกการตั้งเวลาทำงานของฟังก์ชัน ของ method setInterval()
    self ใช้อ้างถึง window ปัจจุบัน
    opener ใช้อ้างถึง window ที่เปิด window ปัจจุบันขึ้นมา
    top ใช้อ้างถึง frame ที่เป็น root parent
    parent ใช้อ้างถึง frame ที่เป็น parent
    event ใช้อ้างถึง Event Object
    document ใช้อ้างถึง Document Object
    history ใช้อ้างถึง History Object
    location ใช้อ้างถึง Location Object หรือ กำหนดค่า หรือคืนค่า url ของหน้าต่าง
    navigator ใช้อ้างถึง Navigator Object
    frames ใช้อ้างถึง Frame Object
    length ใช้คืนค่า จำนวนทั้งหมดของ frame
    name ใช้กำหนดค่า หรือคืนค่า ชื่อของ window
    defaultStatus ใช้กำหนดค่า หรือคืนค่า ข้อความของ default status bar
    status ใช้กำหนดค่า หรือคืนค่า ข้อความของ status bar
    offscreenBuffering ใช้ตรวจสอบว่า ตำแหน่งพิกัด x, y ของหน้าต่าง อยู่นอกหน้าจอหรือไม่
    screenLeft ใช้คืนค่าตำแหน่งพิกัดแกน x ของ browser โดยเทียบกับจอภาพ
    screenTop ใช้คืนค่าตำแหน่งพิกัดแกน y ของ browser โดยเทียบกับจอภาพ
    closed ใช้ตรวจสอบว่าหน้าต่างถูกปิดแล้วหรือไม่
  • method :
    alert ( string );

    return type :
    void

    content :
    ใช้ในการสร้าง message dialog

    example :
    window.alert ( "Welcome To BambooLabcode" );

  • method :
    confirm ( string );

    return type :
    boolean

    content :
    ใช้ในการสร้าง question box ( มีปุ่ม ok กับ cancel )
    โดยถ้ากดปุ่ม ok จะคืนค่า true กลับมา แต่ถ้ากดปุ่ม cancel จะคืนค่า false กลับมา

    example :
    if ( window.confirm ( "Are you sure ?" ) )
    {
         window.alert ( "you confirm" );
    }

  • method :
    prompt ( label, default );

    return type :
    string

    content :
    ใช้ในการสร้าง input box โดยจะคืนค่าข้อมูลที่กรอกกลับมา

    example :
    var data = window.prompt ( "What your name ?", "" );

  • method :
    open ( url, window_name, option );

    return type :
    window

    content :
    ใช้ในการเปิดหน้าต่างขึ้นมาใหม่

    example :
    var win1 = window.open ( "http://www.bamboolabcode.com", "labcode", " height=100,
         width=200, scrollbars=no" );

    comment :
    url คือ site ที่ต้องการเปิด
    window_name คือ ชื่อของหน้าต่างใช้สำหรับอ้างอิงในเอกสารของ html
    
    option คือกำหนดคุณสมบัติของหน้าต่างที่จะเปิดขึ้นมา ดังนี้
    คุณสมบัติที่สามารถกำหนดค่าได้เพียง yes ( 1 ) หรือ no ( 0 )
    คือ toolbars, location, directories, statusbars, menubars, scrollbars, resizable
    คุณสมบัตที่สามารถกำหนดค่าได้เดียงตัวเลข ( หน่วย pixel )
    คือ width, height, outerwidth, outerheight, left, right

  • method :
    close ();

    return type :
    void

    content :
    ใช้ในการปิดหน้าต่าง

    example :
    var win1 = window.open ( "http://www.bamboolabcode.com", "labcode", " height=100,
         width=200, scrollbars=no" );
    win1.close();

  • method :
    navigate ( url );

    return type :
    void

    content :
    ใช้ในการโหลด url เข้ามาในหน้าต่าง

    example :
    window.navigte ( "http://www.bamboolabcode.com" );

  • method :
    print ();

    return type :
    void

    content :
    ใช้พิมพ์เนื้อหาของหน้าต่างออกทางเครื่องพิมพ์

    example :
    window.print ();

  • method :
    focus ();

    return type :
    void

    content :
    ใช้กำหนดให้หน้าต่างได้รับ focus และในกรณีที่มีหลายหน้าต่าง หน้าต่างที่ได้รับ focus นี้จะมาอยู่ด้านหน้าสุด

    example :
    var win1 = window.open ( "http://www.bamboolabcode.com", "labcode", " height=100,
         width=200, scrollbars=no" );
    win1.focus();

  • method :
    blur ();

    return type :
    void

    content :
    ใช้กำหนดให้หน้าต่างสูญเสีย focus และในกรณีที่มีหลายหน้าต่าง หน้าต่างที่สูญเสีย focus นี้จะมาไปด้านหลังสุด

    example :
    var win1 = window.open ( "http://www.bamboolabcode.com", "labcode", " height=100,
         width=200, scrollbars=no" );
    win1.focus();

  • method :
    moveTo ( x, y );

    return type :
    void

    content :
    ใช้เลื่อนหน้าต่างไปยังตำแหน่งพิกัด x, y ตามที่กำหนด

    example :
    window.moveTo ( 120, 120 );

  • method :
    moveBy ( x, y );

    return type :
    void

    content :
    ใช้เลื่อนหน้าต่าง โดยจะนำค่า x, y ที่กำหนด ไปบวกลบกับตำแหน่งพิกัด x, y เดิม

    example :
    window.moveBy ( 0, 10 );
    window.moveBy ( 10, -10 );
    window.moveBy ( -10, -10 );
    window.moveBy ( -10, 0 );

  • method :
    resizeTo ( width, height );

    return type :
    void

    content :
    ใช้ปรับขนาดของหน้าต่าง โดยจะมีขนาดตามที่กำหนด

    example :
    window.resizeTo ( 400, 500 );

  • method :
    resizeBy ( widht, height );

    return type :
    void

    content :
    ใช้ปรับขนาดของหน้าต่าง โดยจะนำค่า widht, height ที่กำหนด ไปบวกลบกับขนาดเดิม

    example :
    windown.resizeBy ( -50, 50 );

  • method :
    scrollTo ( x, y );

    return type :
    void

    content :
    ใช้เลื่อนแถบเลื่อนไปยังพิกัด x, y ตามที่กำหนด

    example :
    window.scrollTo ( 50, 100 );

  • method :
    scrollBy ( x, y );

    return type :
    void

    content :
    ใช้เลื่อนแถบเลื่อน โดยจะนำค่า x, y ที่กำหนด ไปบวกลบกับพิกัดเดิม

    example :
    window.scrollBy ( 0, -10 );

  • method :
    setTimeout ( function_name, timestamp );

    return type :
    void

    content :
    ใช้ตั้งเวลาให้พังก์ชันทำงาน โดยจะทำงานเพียงครั้งเดียวเมื่อถึงเวลาที่กำหนด 
    ( หน่วยของเวลาคือ มิลลิวินาที โดย 1 นาที = 1000 มิลลิวินาที )

    example :
    function showSum ()
    {
         alert ( "500" );
    }
    var catchtime = window.setTimeout ( "showSum()", 3000 );

  • method :
    clearTimeout ( var_catch_time );

    return type :
    void

    content :
    ใช้ยกเลิกการตั้งเวลาทำงานของฟังก์ชัน ของ method setTimeout()

    example :
    function showSum ()
    {
         alert ( "500" );
    }
    var catchtime = window.setTimeout ( "showSum()", 3000 );
    window.clearTimeout ( catchtime );

  • method :
    setInterval ( function_name, timestamp );

    return type :
    void

    content :
    ใช้ตั้งเวลาให้พังก์ชันทำงาน โดยจะทำงานวนซ้ำไปเรื่อยๆเมื่อถึงเวลาที่กำหนด
    ( หน่วยของเวลาคือ มิลลิวินาที โดย 1 วินาที = 1000 มิลลิวินาที )

    example :
    function showSum ()
    {
         alert ( "500" );
    }
    var catchtime = window.setInterval ( "showSum()", 3000 );

  • method :
    clearInterval ( var_catch_time );

    return type :
    void

    content :
    ใช้ยกเลิกการตั้งเวลาทำงานของฟังก์ชัน ของ method setInterval()

    example :
    function showSum ()
    {
         alert ( "500" );
    }
    var catchtime = window.setInterval ( "showSum()", 3000 );
    window.clearInterval ( catchtime );

  • property :
    self;

    return type :
    window

    content :
    ใช้อ้างถึง window ปัจจุบัน

    example :
    var temp_win = window.self;
    temp_win.resizeBy ( -50, 50 );

  • property :
    opener;

    return type :
    window

    content :
    ใช้อ้างถึง window ที่เปิด window ปัจจุบันขึ้นมา

    example :
    var win1 = window.open ( "http://www.bamboolabcode.com", "labcode", " height=100,
         width=200, scrollbars=no" );
    var win_opener = win1.opener;
    win_opener.close();

  • property :
    top;

    return type :
    window

    content :
    ใช้อ้างถึง frame ที่เป็น root parent

    example :
    window.top.focus();

  • property :
    parent;

    return type :
    window

    content :
    ใช้อ้างถึง frame ที่เป็น parent

    example :
    window.parent.focus();

  • property :
    event;

    return type :
    event

    content :
    ใช้อ้างถึง Event Object

    example :
    alert ( window.event.screenX );

  • property :
    document;

    return type :
    document

    content :
    ใช้อ้างถึง Document Object

    example :
    window.document.write ( "website bamboolabcode" );

  • property :
    history;

    return type :
    history

    content :
    ใช้อ้างถึง History Object

    example :
    window.history.back();

  • property :
    location;

    return type :
    location, string, void

    content :
    ใช้อ้างถึง Location Object หรือ กำหนดค่า หรือคืนค่า url ของหน้าต่าง

    example :
    window.location.reload();

  • property :
    navigator;

    return type :
    navigator

    content :
    ใช้อ้างถึง Navigator Object

    example :
    alert ( window.navigator.appName ); 

  • property :
    frames

    return type :
    frame

    content :
    ใช้อ้างถึง Frame Object

    example :
    alert ( window.frames[0].name ); 

  • property :
    length;

    return type :
    number

    content :
    ใช้คืนค่า จำนวนทั้งหมดของ frame

    example :
    alert ( window.length );

  • property :
    name;

    return type :
    string

    content :
    ใช้กำหนดค่า หรือคืนค่า ชื่อของ window

    example :
    alert ( window.name );

  • property :
    defaultStatus;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า ข้อความของ default status bar

    example :
    alert ( window.defaultStatus );

  • property :
    status;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า ข้อความของ status bar

    example :
    alert ( window.status );

  • property :
    offscreenBuffering;

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า ตำแหน่งพิกัด x, y ของหน้าต่าง อยู่นอกหน้าจอหรือไม่ ( ถ้าอยู่นอกหน้าจอแล้ว
    แกน x, y จะติดลบ ) โดยจะตรวจสอบก่อนที่หน้าต่างจะแสดงให้เห็น

    example :
    if ( window.offscreenBuffering )
    {
         window.scrollTo ( 0, 0 );
    }

  • property :
    screenLeft;

    return type :
    number

    content :
    ใช้คืนค่าตำแหน่งพิกัดแกน x ของ browser โดยเทียบกับจอภาพ

    example :
    alert ( window.screenLeft );

  • property :
    screenTop;

    return type :
    number

    content :
    ใช้คืนค่าตำแหน่งพิกัดแกน y ของ browser โดยเทียบกับจอภาพ

    example :
    alert ( window.screenTop );

  • property :
    closed;

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่าหน้าต่างถูกปิดแล้วหรือไม่

    example :
    if ( ! window.closed )
    {
         window.close();
    }

 
Share This Chapter Login with Facebook