สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com

Tutorial Web Programming

A01 JavaScript01 HelloWorld A02 JavaScript02 HelloWorld by Class A03 JavaScript03 Object A04 JavaScript04 Prototype A05 JavaScript05 Closure A06 NodeJS01 HelloWorld A07 npm01 Intro A08 React01 HelloWorld A09 AngularJS01 HelloWorld A10 VueJS01 HelloWorld A11 webpack01 Intro A12 ASPNET01 HelloWorld A13 Flask01 HelloWorld A14 Windows CommandLine A15 GoogleCloudPlatform Product A16 GoogleAppEngine01 HelloWorld A17 WhatIs01 WebServer A18 WhatIs02 API A19 WhatIs03 Linux A20 Linux CommandLine A21 Android01 HelloWorld A22 Android02 Gradle A23 Maven HelloWorld A24 Nancy HelloWorld A25 WhatIs04 Protocol A26 HowTo01 Install Ubuntu Desktop A27 HowTo02 Install WebServer on Ubuntu

JavaScript04_Prototype

ในบทความก่อนหน้านี้เราได้ลองเขียนโค้ดภาษา JavaScript เพื่อแสดงข้อความ Hello World บนหน้าเว็บอย่างง่ายๆกันไปและแบบใช้ Class ไปแล้ว คราวนี้เราจะมาลองเขียนโค้ดให้แสดงข้อความโดยใช้สิ่งที่เรียกว่า Prototype กัน แต่ก่อนจะอ่านบทความนี้ต้องมีความรู้เรื่อง JavaScript Object เสียก่อน โดยผู้อ่านสามารถอ่านได้จากบทความที่แล้วนะครับ (บทความ JavaScript03_Object) 

Prototype ในภาษา JavaScript 

ใน JavaScript ทุกๆ Object จะสืบทอด property และ method มาจาก Prototype เช่น

  • Date objects สืบทอดมาจาก Date.prototype
  • Array objects สืบทอดมาจาก Array.prototype
  • Student objects สืบทอดมาจาก Student.prototype

แต่สิ่งที่เป็นพ่อแม่ของทุกสิ่งก็คือ Object.prototype ดังนั้นเราสามารถกล่าวได้ว่าทั้ง Date objects, Array objects และ Student objects ล้วนสืบทอดมาจาก Object.prototype

ถ้าผู้อ่านยังงง ขอให้มองภาพว่า Prototype ก็คือ template ที่เล็กที่สุด ที่เราจะ copy มันมาใช้สร้าง Object ใหม่นั่นเอง

เรื่อง Prototype นี้ก็เช่นเดียวกับเรื่อง Class ที่ในกรณีโปรแกรมมีขนาดเล็กไม่กี่บรรทัดผู้อ่านอาจจะงงว่าทำไปทำไม แต่ถ้าโปรแกรมของเรามีขนาดใหญ่และซับซ้อนขึ้น ความรู้ในเรื่องนี้ก็จะมีประโยชน์อย่างมากเลยครับ เพราะฉะนั้นเรียนรู้ไว้เพื่อเพิ่มสกิลการเขียนโปรแกรมของเรากันนะครับ

ตัวอย่างการใช้งาน Prototype

ในบทความเรื่อง Object ก่อนหน้านี้เราได้ทดลองสร้าง Object ด้วยวิธีต่างๆ แต่ทุกวิธีล้วนแล้วแต่ต้องกำหนด Property ของ Object ตั้งแต่แรกและเราไม่สามารถเพิ่ม Property หรือ Method เข้าไปภายหลังได้ ดังตัวอย่างการสร้าง Object Student

function Student(first, age, school) {
    this.firstName = first;
    this.age = age;
    this.school = school;
}


ถ้าเราต้องการเพิ่ม Property lastName เพื่อใช้สำหรับเก็บนามสกุลเพิ่มเข้าไปใน Student จะไม่สามารถทำได้ เช่น

Student.lastName = "Surname";


หากต้องการเพิ่มเข้าไปจะต้องเพิ่มโดยเขียนใน Constructor ใหม่ตั้งแต่แรกเท่านั้น ดังตัวอย่าง

function Student(first, last, age, school) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.school = school;
}


แต่ๆๆๆ มีวิธีหนึ่งที่ JavaScript อนุญาตให้เราเพิ่ม property เข้าไปได้ คือ การเพิ่มผ่าน Prototype ดังตัวอย่างต่อไปนี้ 

function Student(first, age, school) {
    this.firstName = first;
    this.age = age;
    this.school = school;
}
Student.prototype.lastName = "Surname";


นอกจากนี้เรายังสามารถเพิ่ม method เข้าไปใน object constructor ผ่านทาง Prototype ได้อีกด้วย เช่น

Student.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};


ข้อควรระวัง: เรื่อง Prototype นี้ผู้อ่านควรใช้เปลี่ยนแปลงแต่ prototype ที่ผู้อ่านสร้างขึ้นเองนะครับ กรุณาอย่าไปเปลี่ยนบรรดา prototype ของ standard JavaScript objects นะครับ เดี๋ยวจะพินาศกันหมด!

Project Hello world ด้วย Prototype

คราวนี้เราจะมาลองเขียน method ชื่อ message เพิ่มเข้าไปใน object Student ผ่านทาง Prototype เพื่อให้แสดงข้อความต้อนรับนักเรียนคนนั้นๆกันครับ

1. เริ่มจากสร้างไฟล์ที่เราจะใช้เขียนโค้ดขึ้นมาก่อน โดยการคลิกขวาในโฟลเดอร์ที่เราต้องการแล้วเลือก New > Text Document เหมือนบทความก่อนหน้านี้ จากนั้นเปลี่ยนชื่อและนามสกุลไฟล์ ในที่นี้ตั้งชื่อว่า javascript03.html

2. เปิดไฟล์ด้วยโปรแกรมทีี่สามารถแก้ไขข้อความในไฟล์ได้ เช่น Notepad หรือ Notepad++ จากนั้นพิมพ์โค้ดต่อไปนี้ลงไป แล้วกด Save

อธิบายโค้ดส่วน JavaScript:
บรรทัดที่ 4 - 8 เป็นการสร้าง Object ชื่อ Student โดยมี property คือ firstName, age, school
บรรทัดที่ 9 - 11 เป็นการเพิ่ม method message() เข้าไปใน constructor ของ Student โดยใช้ prototype ซึ่งเป็น method ที่จะแสดงข้อความ “Hello World, ” ตามด้วยค่าของตัวแปร firstName ออกทางหน้าจอเมื่อ method นี้ถูกเรียก
บรรทัดที่ 13 - 14 เป็นการสร้างตัวแปรชื่อ mary และ bobby จาก Object Student
บรรทัดที่ 16 - 21 เป็นฟังก์ชันที่จะไปเรียก method message() ของตัวแปร mary และ bobby

3. ดับเบิ้ลคลิกที่ไฟล์ javascript03.html ที่เราเขียนโค้ดไว้แล้วในขั้นตอนที่ 2 จะเห็นหน้าต่างเว็บปรากฏขึ้นมา ให้ทดลองกดปุ่ม Click me, Mary จะเห็นว่ามีข้อความ Hello World, Mary ปรากฏขึ้นมา และเมื่อกดปุ่ม Click me, Bobby จะเห็นว่ามีข้อความ Hello World, Bobby ปรากฏขึ้นมาเช่นเดียวกัน

เท่านี้เราก็จะสามารถเขียนโค้ด JavaScript เพื่อแสดงข้อความ Hello World ด้วย Prototype ได้แล้ว ไม่ยากใช่ไหมครับ? ถ้าอยากรู้เรื่องของ Prototype เพิ่มเติมก็อ่านได้จาก [1] และถ้าอยากรู้เรื่อง JavaScript หรือ Tutorial เพิ่มเติมก็อ่านได้จาก [2] และ [3] นะครับ 

สุดท้ายนี้ถ้าผู้อ่านอยากเรียนรู้เรื่อง JavaScript และเรื่องเกี่ยวกับ Web Programming อย่างลึกซึ้งก็ขอแนะนำคอร์ส Web Programming ของทาง EPT ครับ สามารถดูรายละเอียดคอร์สได้โดยคลิกที่นี่หรือติดต่อได้ที่ 085-350-7540

แล้วพบกันใหม่บทความหน้านะครับ

 

ที่มาและเว็บไซต์อ้างอิง

[1] https://www.w3schools.com/js/js_object_prototypes.asp
[2] ขอแนะนำให้ผู้อ่านเริ่มศึกษาจากเว็บ w3schools.com ซึ่งเป็นเว็บที่มี Tutorial เกี่ยวกับเรื่องต่างๆที่จำเป็นต้องรู้ในภาษา JavaScript มากมาย
https://www.w3schools.com/js/default.asp
[3] นอกจากนี้ก็ยังมีประวัติ turorial และ document จากเว็บของ Mozilla Foundation อีกด้วย
https://developer.mozilla.org/en-US/docs/Web/JavaScript



ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM

แผนที่ ที่ตั้งของอาคารของเรา

Python

L16 PYTHON SIMPLE ARITHMETIC
L40 PYTHON TUTORIAL INTRO
L41 PYTHON GETTING STARTED
L42 PYTHON SYNTAX
L43 PYTHON COMMENTS
L44 PYTHON VARIABLES
L45 PYTHON DATATYPE
L46 PYTHON NUMBERS
L47 PYTHON CASING
L48 PYTHON STRINGS
L49 PYTHON BOOLEANS
L50 PYTHON OPARETORS
L51 PYTHON LISTS
L52 PYTHON TUPELS
L53 PYTHON SETS
L54 PYTHON DICTIONARY
L55 PYTHON IF ELSE
L56 PYTHON WHILE LOOP
L57 PYTHON FOR LOOP
L58 PYTHON FUNCTION
L59 PYTHON LAMBDA
L60 PYTHON ARRAYS
L61 PYTHON CLASSSES OBJECTS
L62 PYTHON INHERITANCE
L63 PYTHON ITERATORS
L63 PYTHON SCOPE
L64 PYTHON MODULES
L65 PYTHON DATETIME
L66 PYTHON JSON
L67 PYTHON REGEX
L68 PYTHON PIP
L69 PYTHON TRY EXCAPE
L70 PYTHON USER INPUT
L71 PYTHON FILE OPEN
L73 PYTHON STRING FORMATTING
L74 PYTHON READ FILE
L75 PYTHON WRILE CREATE FILE
L76 PYTHON DELETE FILE
L90 PYTHON POISSON DISTRIBUTION
L90 PYTHON RANDOM INTRODUCTION
L91 PYTHON CHI SQUARE DISTRIBUTION
L91 PYTHON EXPONENTIAL DISTRIBUTION
L92 PYTHON RAYLEIGH DISTRIBUTION
L93 PYTHON PARETO DISTRIBUTION
L94 PYTHON ZIPF DISTRIBUTION
L96 PYTHON RANDOM PERMUTATIONS
L97 PYTHON SEABORN
L98 PYTHON NORMAL DISTRIBUTION
L99 PYTHON DISTRIBUTION
L99 PYTHON LOGISTIC DISTRIBUTION
L99 PYTHON MULTINOMIAL DISTRIBUTION
L99 PYTHON NUMPY SPLITTING ARRAY
L99 PYTHON NUMPY UFUNCS
L99 PYTHON UNIFORM DISTRIBUTION
LM60PYTHON BUILT IN FUNCTIONS
LM61PYTHON STRING METHODS
LM62PYTHON LIST ARRAY METHODS
LM63PYTHON DICTIONARY METHODS
LM64PYTHON TUPLE METHODS
LM65PYTHON SET METHODS
LM66PYTHON FILE METHODS
LM67PYTHON KEYWORD
LM68PYTHON BUILT IN EXCAPTION
LM69PYTHON RANDOM MODULE
LM70PYTHON MATH MODULE
LM70PYTHON REQUSTS MODULE
LM72PYTHON CMATH MODULE
LM73PYTHON HOWTO REMOVE DUPLICATES FROM A PYTHON LIST
LM74PYTHON HOW TO REVERSE A STRING IN PYTHON
LM75PYTHON HOW TO ADD TWO NUMBERS IN PYTHON
LM95PYTHON RANDOM DATA DISTRIBUTION


แผนผังการเรียนเขียนโปรแกรม

Link อื่นๆ

Allow sites to save and read cookie data.
Cookies are small pieces of data created by sites you visit. They make your online experience easier by saving browsing information. We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.

Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com

ติดต่อเราได้ที่

085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
แผนที่ ที่ตั้งของอาคารของเรา