แนะนำ การเขียนภาษาจาวาสคริปต์ ( JavaScript Language)

1

แนะนำ�ก�รเขยนภ�ษ�จ�ว�สครปต(JavaScript Language)สญญ� เครอหงษภ�ควช�วทย�ก�รคอมพวเตอรและเทคโนโลยส�รสนเทศคณะวทย�ศ�สตร มห�วทย�ลยนเรศวร

บทท4

2

วตถประสงคก�รเรยนรประจำ�บท• เพอศกษ�หลกก�รทำ�ง�นของภ�ษ� Script ทประมวลผลฝ ง Client

• เพอใหหลกก�รเขยนโปรแกรมภ�ษ� Javascript

3

กจกรรมก�รเรยนก�รสอน•บรรย�ยโดยผสอนและใชเอกส�รประกอบก�รสอนของผสอน

•สอนโดยใชสอคอมพวเตอรผ�นเครองฉ�ย•อภปร�ยในชนเรยนรวมกน• ใหนสตคนคว�เพมเตมจ�กตำ�ร�และเอกส�รทเกยวของ

•ทำ�แบบฝกหดท�ยบท

4

ก�รประเมนผล•ประเมนผลจ�กก�รตอบคำ�ถ�มและอภปร�ยในชนเรยน

•ทำ�แบบฝกหดท�ยบท•ทำ�ร�ยง�นสง

5

JavaScript คออะไร

ภ�ษ�จ�ว�สครปตถกพฒน�โดย เนตสเคปคอมมวนเคชนส (Netscape Communications Corporation) โดยใชชอว� Live Script ออกม�พรอมกบ Netscape Navigator2.0 เพอใชสร�งเวบเพจโดยตดตอกบเซรฟเวอรแบบ Live Wire ตอม�เนตสเคปจงไดรวมมอกบ บรษทซนไมโครซสเตมสปรบปรงระบบของบร�วเซอรเพอใหส�ม�รถตดตอใชง�นกบภ�ษ�จ�ว�ได และไดปรบปรง LiveScript ใหมเมอ ป 2538 แลวตงชอใหมว� JavaScript

6

ลกษณะก�รทำ�ง�นของJavaScript

JavaScript เปนภ�ษ�สครปตเชงวตถ หรอเรยกว� ออบเจกโอเรยลเตด (Object Oriented Programming) เป�หม�ยในก�รออกแบบและพฒน�โปรแกรมในระบบอนเทอรเนต สำ�หรบผเขยนเอกส�รดวยภ�ษ� HTML และภ�ษ�จ�ว�ไดทงท�งฝ งไคลเอนต (Client) และ ท�งฝ งเซรฟเวอร (Server)

7

โดยมลกษณะก�รทำ�ง�นดงน1. Navigator JavaScript เปน Client-Side JavaScript ซงหม�ยถง JavaScript ทถกแปลท�งฝ งไคลเอนต (หม�ยถงฝ งเครอง คอมพวเตอรของผใช ไมว�จะเปนเครองพซ เครองแมคอนทอช หรอ อน ๆ) จงมคว�มเหม�ะสมตอก�รใชง�นของผใชทวไปเปนสวนใหญ 2. LiveWire JavaScript เปน Server-Side JavaScript ซงหม�ยถง JavaScript ทถกแปลท�งฝ งเซรฟเวอร (หม�ยถงฝ งเครอง คอมพวเตอรของผใหบรก�รเวบ โดยอ�จจะเปนเครองของซนซลคอมกร�ฟกส หรอ อน ๆ) ส�ม�รถใชไดเฉพ�ะกบ LiveWire ของเนตสเคป โดยตรง

Client-Side Script (บทท1)

Web Server

Client

1. Client Request Webpage

2. Web Server locate .html File

3. HTML stream (from .htm page)Returned to browser

5. Browser Processes HTMLAnd displays Pages

4. Browser Process Client-side script

9

JavaScript กบ HTML

ภ�ษ� JavaScript ส�ม�รถเขยนรวมอยในไฟลเดยวกนกบ HTML ไดโดยมก�รเขยน 2 วธ ดงน

• เขยนดวยชดคำ�สงและฟงกชนของ JavaScript เอง

• เขยนต�มเหตก�รณทเกดขนต�มก�รใชง�นจ�กชดคำ�สงของ HTML

10

JavaScript กบ HTML (ตอ)

เมอเรมใชง�น โปรแกรมบร�วเซอร จะอ�นขอมลจ�กสวนบนของเพจ HTML และทำ�ง�นไปต�มลำ�ดบจ�ก บนลงล�ง (top-down) โดยเรมทสวน <HEAD>...</HEAD> กอนจ�กนนจงทำ�ง�นในสวน <BODY>...</BODY> เปนลำ�ดบ

<HTML><head><script Language ="JavaScript">......................................</script></head><body> <script Language ="JavaScript">..................................................</script> </BODY></HTML>

11

ตวแปรตวแปร (Variable) หม�ยถง ชอหรอสญลกษณทตงขนสำ�หรบก�รเกบค�ใด ๆ ทไมคงท โดยก�รจองเนอทในหนวยคว�มจำ�ของระบบเครองทเกบขอมลซงส�ม�รถอ�งองได มขน�ดขนอยกบชนดของขอมลและค�ของขอมล ซงค�ในตวแปรนส�ม�รถเปลยนแปละไดต�มคำ�สงในก�รประมวลผล

12

ก�รตงชอ (Identifier, Name)

ก�รตงชอ (Identifier or Name) เปนชอทตงขนม�เพอกำ�หนดใหเปนชอของโปรแกรมหลก, ฟงกชน, ตวแปร, ค�คงท, คำ�สง และคำ�สงวน โดยมหลกก�รตงชอว�

• ขนตนดวยตวอกษรในภ�ษ�องกฤษ ต�มดวยตวอกษรหรอตวเลขใด ๆ กได • ห�มเวนชองว�ง • ห�มใชสญลกษณพเศษ ยกเวนขดล�ง (_) และดอลล�ร ($) • สำ�หรบคว�มย�วของชอใน JavaScript จะมคว�มย�วเท�ใดกได แตทนยมใช ไม

เกน 20 ตวอกษร • ก�รตงชอมขอพงระวงว� จะตองไมซำ�กบคำ�สงวน (Reserve word) และตว

อกษรของชอจะจำ�แนกแตกต�งกนระหว�งอกษรตวพมพเลกกบอกษรตวพมพใหญ

• ควรจะตงชอโดยใหชอนนมสอคว�มหม�ยใหเข�กบขอมล ส�ม�รถอ�นและเข�ใจได

13

คำ�สงวน(Reserve word)

คำ�สงวน (Reserve word) เปนคำ�ทมคว�มหม�ยเฉพ�ะตวในภ�ษ� JavaScript สงวนไมใหมก�รตงชอซำ�กบชอโปรแกรม, ฟงกชน, ตวแปร, ค�คงท และคำ�สง คำ�สงวน ส�ม�รถเรยกใชไดทนทโดยไมตองม�กำ�หนดคว�มหม�ยใหมแตอย�งใด

14

ชนดขอมลของตวแปร(Data Type)

ชนดของขอมลของตวแปร (Data Type) เปนก�รกำ�หนดประเภทค�ของขอมลใหกบตวแปร เพอใหเหม�ะสมกบก�รอ�งองขอมลจ�กตวแปรในก�รใชง�น ม4 ชนด ไดแก• number ขอมลชนดตวเลข ประกอบดวย เลขจำ�นวนเตม (Integer) และเลขจำ�นวนจรง (Floating)

• logical ขอมลท�งตรรกะ ม 2 สถ�นะ คอ จรง (True) และเทจ (False)

• string ขอมลทเปนขอคว�ม ซงจะตองกำ�หนดไวในเครองหม�ยคำ�พด ("...")

• null ไมมค�ขอมลใดๆ ซงค� null ใชสำ�หรบก�รยกเลกพนทเกบค�ของตวแปรออกจ�กหนวยคว�มจำ�

15

ก�รประก�ศตวแปร (Declarations)

ก�รประก�ศตวแปร (Declarations) เปนก�รกำ�หนดชอและชนดขอมลใหกบตวแปรเพอนำ�ไปใชในโปรแกรม โดยก�รตงชอจะตองคำ�นงถงค�ของขอมลและ ชนดของขอมลทอ�งอง นอกจ�กนก�รตงชอควรใหสอคว�มหม�ยของขอมล และอกษรของชอจะจำ�แนกแตกต�งกนระหว�งอกษรตวพมพเลกกบอกษรตวพมพ

Var ชอตวแปร; เปนรปแบบการประกาศตวแปรปกตหรอ Var ชอตวแปร = ขอมล;

เปนรปแบบการกำาหนดคาเรมตน

16

ก�รกำ�หนดค�ใหกบตวแปรรปแบบ ชอตวแปร = ค�ของขอมล

โดยท...ค�ของขอมล ไดแก1. ขอมลทเปนตวเลข โดยกำ�หนดตวเลขไปไดเลย เชน num = 5002. ขอมลในท�งตรรกะ ไดแก จรง (True) หรอ เทจ (False) เชน test = True; 3. ขอมลสตรง ใหกำ�หนดอยในเครองหม�ยคำ�พด ("...") เชน name = “Sanya";

17

ก�รกำ�หนดค�ใหกบตวแปร(ตอ)

ตวแปรม 2 จำ�พวก1. ตวแปรแบบโกลบล (Global) ตวแปรจำ�พวกนจะม

ค�คงอยในหนวยคว�มจำ�ตลอดก�รทำ�ง�นของโปรแกรม ทำ�ใหส�ม�รถเรยกใชไดจ�กทก ๆ สวนของโปรแกรม รวมถงภ�ยในฟงกชนต�ง ๆ ดวย ซงเปนก�รกำ�หนดชอตวแปรไวทโปรแกรมหลกโดยไมไดอยภ�ยในขอบเขตฟงกชนใด ๆ

2.ตวแปรแบบโลคล (Local) เปนก�รกำ�หนดตวแปรไวภ�ยในขอบเขตฟงกชนใด ๆ เปนตวแปรทมค�คงอย และส�ม�รถเรยกใชไดเฉพ�ะ ภ�ยในขอบเขตของฟงกชนนน ๆ เท�นน

18

ค�คงท (Literal,Constant)

ค�คงท (Literal หรอ Constant) หม�ยถง ค�ของขอมลทเมอกำ�หนดแลวจะทำ�ก�รเปลยนแปลงค�เปนอย�งอนไมได ชนดขอมลของค�คงทไดแก

• เลขจำ�นวนเตม (Integer) เปนตวเลขทไมมเศษทศนยม ส�ม�รถเขยนใหอยในแบบ เลขฐ�นสบ (0-9), เลขฐ�นสบหก (0-9, A-F) หรอ เลขฐ�นแปด (0-7) โดยก�รเขยนเลขฐ�นแปดให นำ�หน�ดวย O (Octenary)สวนก�รเขยนเลขฐ�นสบหกใหนำ�หน�ดวย Ox หรอ OX (Hexadenary)

19

ค�คงท (ตอ)• เลขจำ�นวนจรง (Floating) ใชรปแบบก�รเขยนโดยประกอบไปดวย

ตวเลข จดทศนยมและตวเลขยกกำ�ลง E (Exponential) เชน 5.00E2 จะหม�ยถงค� 5.00 คณดวย 10 ยกกำ�ลง 2 จะมค�เปน 500 3.141E5 จะหม�ยถงค� 3.141 คณดวย 10 ยกกำ�ลง 5 จะมค�เปน314,1000 • ค�บลน (Boolean) เปนค�คงทเชงตรรกะ คอมค�เปน

จรง(True) และ เทจ(False) เท�นน • ขอคว�มสตรง (String) เปนค�คงทแบบขอคว�มทอยภ�ยใน

เครองหม�ยคำ�พด ("..." หรอ '...') เชน "บรษท เอกซทรม จำ�กด", 'น�งนฤมล เวชตระกล'

20

รหสคำ�สงพเศษ รหสคำ�สงพเศษ (Character escape code) เปนก�รกำ�หนดรหสเพอควบคมง�นพมพสตรงโดยใชเครองหม�ย \ (Backslash) นำ�หน�ตวอกษรทตองก�รกำ�หนดเปนรหส เพอใหกล�ยเปนรหสคำ�สงพเศษ \b หม�ยถง ลบไปท�งซ�ย (Back Space) \f หม�ยถง เลอนกระด�ษไปอก 1 หน� (Form Feed) \n หม�ยถง ขนบรรทดใหม (New Line) \r หม�ยถง ตรวจสอบก�รกด Enter (Return) และก�รเลอนขนบรรทดใหมของหน�ระด�ษ \t หม�ยถง เลอนตำ�แหนงไปท�งขว� 1 ชวงแทบ (Tab) \\ หม�ยถง เตมเครองหม�ย \ (Backslash) \" หม�ยถง เตมเครองหม�ยคำ�พด

21

ขอคำ�สง (Statement) ขอคำ�สง (Statement) คอ ถอยแถลงหรอขอคว�มคำ�สงทสงใหจ�ว�สครปต ดำ�เนนง�นต�มลำ�ดบทไดสงไว ก�รเขยนขอคำ�สงจะสนสดหรอจบขอคำ�สงดวยเครองหม�ย เซมโคลอน (;)ตวอย�งก�รกำ�หนดขอคำ�สง 2 คำ�สงกำ�หนดใหตวแปร name เกบชอ Sanyaใหพมพประโยคขอคว�มว� My name is Sanya จะกำ�หนดไดดงน name = “Sanya"; document.write("My name is "+name);

22

นพจน (Expression)นพจน (Expression) เปนขอคำ�สงทใชกำ�หนดค�ของขอมล เชน ก�รบวกตวเลข ก�รเปรยบเทยบขอมล โดยก�รกำ�หนดชอของตวแปร ต�มดวยเครองหม�ยทตองก�รกระทำ� (Operations) ตอขอมลเปนผลใหเกดค�ขอมลใหมค�หนงใหกบตวแปรเพอนำ�ไปใชง�นนพจน JavaScript มดวยกน 3 ชนดดงน1. นพจนคณตศ�สตร (Arithmetic) เชน ใหตวแปร num เกบตวเลข 5000 จะเขยนไดดงน num = 5000;2. นพจนตรรกะ (Logical) เปนนพจนในก�รเปรยบเทยบขอมล เชน กำ�หนดให a = 50;3. นพจนขอคว�ม (String) เชน ใหตวแปร name เกบชอ Sanya จะเขยนไดดงนname = “Sanya";

23

ตวดำ�เนนก�ร (Operator) ตวดำ�เนนก�ร (Operator) หม�ยถง เครองหม�ยกำ�หนดกรรมวธท�งคณตศ�สตร, พชคณต, บลน, ก�รเปรยบเทยบ ระหว�งขอมล 2 ตว ซงเรยกว� โอประแรนด(Operand) โดยอ�จมค�เปนตวเลข ขอคว�ม ค�คงท หรอตวแปรต�ง ๆ

24

ชนดของตวดำ�เนนก�รตวดำ�เนนก�รคณตศ�สตร

ใชสำ�หรบคำ�นวณโอประแรนดทเปนค�คงทหรอตวแปรกได โดยใหค�ผลลพธเปนตวเลขค�เดยว โอประเรเตอร เชงคณตศ�สตรทคนสวนใหญรจกคนเคยกนม�กทสดไดแก + หม�ยถง เครองหม�ยก�รบวก - หม�ยถง เครองหม�ยก�รลบ * หม�ยถง เครองหม�ยก�รคณ / หม�ยถง เครองหม�ยก�รห�ร % หม�ยถง เครองหม�ยห�เศษทไดจ�กก�รห�รทเรยกว� โมดลส(Modulus) ++ หม�ยถง เครองหม�ยก�รเพมค�ทเรยกว� อนครเมนต(increment) โดยจะเพมค�ครงละ 1 -- หม�ยถง เครองหม�ยก�รลดค�ทเรยกว� ดครเมนต(decrement) โดยจะลดค�ครงละ 1 (-) หม�ยถง เครองหม�ยแปลงค�ใหกล�ยเปนค�ตรงกนข�มกบค�เดมทเรยกว� ยน�รนเกชน (unary negation)

25

ชนดของตวดำ�เนนก�ร (ตอ)ตวดำ�เนนก�รเชงเปรยบเทยบ (Comparison operator) หม�ยถง เครองหม�ยในก�รเปรยบเทยบขอมล ผลลพธทไดจะมค�ตรรกบลลนเปน จรง (True) และ เทจ (False) ไดแก == หม�ยถง เครองหม�ยเท�กบ != หม�ยถง เครองหม�ยไมเท�กบ > หม�ยถง เครองหม�ยม�กกว� >= หม�ยถง เครองหม�ยม�กกว�หรอเท�กบ < หม�ยถง เครองหม�ยนอยกว� <= หม�ยถง เครองหม�ยนอยกว�หรอเท�กบ

26

ชนดของตวดำ�เนนก�ร (ตอ)ตวดำ�เนนก�รกำ�หนดค� (Assignment operator)

หม�ยถง เครองหม�ยในก�รกำ�หนดใหตวแปรทอยท�งฝงซ�ย มค�เท�กบค�เดมในตวแปรนน "กระทำ�" (บวก, ลบ, คณ, ห�ร) กบอกตวแปรหนงทอยท�งฝงขว� ไดแก x = y หม�ยถง กำ�หนดค� y ใหกบตวแปร x x += y หม�ยถง เพมค� y ใหกบตวแปร x (x = x + y) x -= y หม�ยถง ลบค� y ออกจ�กตวแปร x (x = x - y) x *= y หม�ยถง กำ�หนดค� x คณกบค� y ใหกบตวแปร x (x = x * y) x /= y หม�ยถง กำ�หนดค� x ห�รกบค� y ใหกบตวแปร x (x = x / y) x %= y หม�ยถง กำ�หนดเศษทไดจ�กก�รห�รค� x ดวยค� y ใหกบตวแปร x (x = x % y)

27

ชนดของตวดำ�เนนก�ร (ตอ)ตวดำ�เนนก�รกำ�หนดค� (ตอ)

x <<= y หม�ยถง เลอนบตในตวแปร x ไปท�งซ�ย y บต (x = x << y)x >>= y หม�ยถง เลอนบตในตวแปร x ไปท�งขว� y บต (x = x >> y)x >>>= y หม�ยถง เลอนบตแบบซโรฟลลในตวแปร x ไปท�งขว� y บต (x = x >>> y)x &= y หม�ยถง เกบค� x AND y ในตวแปร x (x = x & y)x ^= y หม�ยถง เกบค� x XOR y ในตวแปร x (x = x ^ y)x |= y หม�ยถง เกบค� x OR y ในตวแปร x (x = x | y)

28

ชนดของตวดำ�เนนก�ร (ตอ) ตวดำ�เนนก�รเชงตรรกะ (Logical operator)

เปนเครองหม�ยทใหค�จรง (True) และ เทจ (False) ในก�รเปรยบเทยบ ประกอบดวยเครองหม�ย && หม�ยถง และ(AND) จะเปนจรงเมอค�ทใชเปรยบเทยบทง 2 ค�เปนจรงทงค || หม�ยถง หรอ(OR) จะเปนจรงเมอค�ทใชเปรยบเทยบทง 2 ค�เปนจรงทงคหรอจรงเพยงค�ใด ค�หนง ! หม�ยถง ปฎเสธ(NOT) เปนก�รแปลงค�ตรงกนข�ม จ�กจรงจะเปนเทจ และ จ�กเทจจะเปนจร

29

ชนดของตวดำ�เนนก�ร (ตอ)

ตวดำ�เนนก�รเชงขอคว�ม (String operator)

เปนก�รเชอมประโยคขอคว�มเข�ดวยกน (concatenation) โดยใชเครองหม�ยบวก (+) เปนตวกระทำ� เชน Name = “Alex"; Say = "Hey "+Name;ผลลพธทได Say จะมขอคว�มเปน Hey Alex

30

ชนดของตวดำ�เนนก�ร (ตอ) ตวดำ�เนนก�รระดบบต (Bitwise operator)

เปนก�รดำ�เนนก�รเชงตรรกะในระดบบต โดยจะใชมมมองในแบบเลขฐ�น 2 ม�จดก�รกบขอมล มร�ยละเอยดดงน x & y หม�ยถง ใหผลลพธก�รเทยบบตแบบ AND ระหว�ง x กบ y x | y หม�ยถง ใหผลลพธก�รเทยบบตแบบ OR ระหว�ง x กบ y x ^ y หม�ยถง ใหผลลพธก�รเทยบบตแบบ XOR ระหว�ง x กบ y ~x หม�ยถง เพมค�บตให 1 จ�กนนจะใหผลลพธของบตมค�ตรงข�ม x << y หม�ยถง เลอนบตในตวแปร x ไปท�งซ�ย y บต x >> y หม�ยถง เลอนบตในตวแปร x ไปท�งขว� y บต x >>> y หม�ยถง เลอนบตแบบซโรฟลลในตวแปร x ไปท�งขว� y บต

31

ลำ�ดบคว�มสำ�คญของตวดำ�เนนก�ร

ลำ�ดบท 1 ( ) ลำ�ดบท 2 ++ -- ! ~ลำ�ดบท 3 * / % ลำ�ดบท 4 + -ลำ�ดบท 5 << >> >> ลำ�ดบท 6 < <= > >=ลำ�ดบท 7 == != ลำ�ดบท 8 &ลำ�ดบท 9 ^ ลำ�ดบท 10 |ลำ�ดบท 11 && ลำ�ดบท 12 ||ลำ�ดบท 13 = += -= *= /= %= <<= >>= >>>= &= ^= !=

32

• ตวอย�ง <HTML><head><script Language ="JavaScript"> document.write("hello1");</script></head><body> <script Language ="JavaScript"> document.write("hello2");</script> </BODY></HTML>

33

คำ�สงควบคมก�รทำ�ง�น•ก�รกำ�หนดเงอนไข ไดแก IF, IF ELSE, IF ELSE IF, SWITCH CASE, WITH, EXPRESSION เปนตน

•คำ�สงควบคมก�รทำ�ง�นวนซำ� ไดแก FOR, While, Do While, คำ�สง break และ continue ของประโยควนซำ�

34

คำ�สงควบคมก�รทำ�ง�น IF

•คำ�สง if คอ ใชตรวจสอบเงอนไข ถ�ห�กว�เงอนไขเปนจรง กจะทำ�ต�มคำ�สงทกำ�หนด

•syntax : If(condition){ structure; }

<script Language ="JavaScript">var num = 100; if (num>=100) { alert("The winner"); document.write("more than 100 Baht");}</script>

35

คำ�สงควบคมก�รทำ�ง�น IF ELSE

• คำ�สง if คอ ใชตรวจสอบเงอนไข ถ�ห�กว�เงอนไขเปนจรง กจะทำ�ต�มคำ�สงทกำ�หนด สวน else จะหม�ยถง ถ�ไมตรงต�มเงอนไขใดๆ ใหทำ�ต�มคำ�สงทกำ�หนดใน else

•syntax: if ( condition ) { structure; }else{ structure; }

<script Language ="JavaScript">var num = 50; if (num>=100) { document.write("more than 100 Baht");}else{ document.write("less than 100 Baht");}</script>

36

คำ�สงควบคมก�รทำ�ง�น IF ELSE IF

• คำ�สง if คอ ใชตรวจสอบเงอนไข ถ�ห�กว�เงอนไขเปนจรง กจะทำ�ต�มคำ�สงทกำ�หนด สวน else จะหม�ยถง ถ�ไมตรงต�มเงอนไขใดๆ ใหทำ�ต�มคำ�สงทกำ�หนดใน else

syntax: if(condition){

structure; }else if(condition){

structure;}else{ structure; }

<script Language ="JavaScript">var num = 60; if(num>=100) { document.write("get 100 Baht");}else if(num>=50) { document.write("get 50 Baht");}else{ document.write("get 0 Baht");}</script>

37

คำ�สงควบคมก�รทำ�ง�นSWITCH CASE

• คำ�สง switch case คอ จะตรวจสอบค�ของตวแปร ถ�ตรงต�มเงอนไขใดกจะทำ�ต�มคำ�สงนนๆ จนกว�จะเจอ คำ�สง break

•syntax:switch(variable) { case value_1 : structure; break; case value_2 : structure; break; default : structure; break; }

<script Language ="JavaScript">var num = 70; switch(num){ case 100 : document.write("get 100 Baht"); break; case 50 : document.write("get 50 Baht"); break; default : document.write("get 0 Baht"); break; }</script>

38

คำ�สงควบคมก�รทำ�ง�น FOR• คำ�สง for คอ จะทำ�ง�นเมอเงอนไขเปนจรง และจะจบก�รทำ�ง�นเมอเงอนไขเปนเทจ โดยแตละรอบของก�รวนลป จะมก�รเพมค�ต�มทกำ�หนด

syntax: For( คาเรมตน; เงอนไข; การเพมคา ) { structure; }

<script Language ="JavaScript">for(var i=1; i<20; i++ ) { document.write( i + " get 100 Baht<br>");}</script>

39

คำ�สงควบคมก�รทำ�ง�น WHILE

•คำ�สง while คอ จะทำ�ง�นเมอเงอนไขเปนจรง และจะจบก�รทำ�ง�นเมอเงอนไขเปนเทจ

•syntax: <script Language ="JavaScript">var num = 10; while ( num > 0 ) { document.write( num + " get 100 Baht<br>"); num--; }</script>

while(เงอนไข) { structure; }

40

คำ�สงควบคมก�รทำ�ง�น DO WHILE

•คำ�สง do while คอ จะทำ�ง�นกอน 1 ครง แลวหลงจ�กนนจะทำ�ง�นกตอเมอเงอนไขยงเปนจรงอย และจะจบก�รทำ�ง�นเมอเงอนไขเปนเทจsyntax:

do{ structure; }while( เงอนไข );

<script Language ="JavaScript">var num = 10; do{ document.write( num + " get 100 Baht<br>"); num--; }while(num>0);</script>

41

ก�รใช Break และ Continue

•Break; เพอหยดและออกจ�กก�รทำ�ง�นวนลป

•Continue; เพอหยดก�รทำ�ง�นวนลปรอบปจจบน และไปทำ�ง�นในรอบตอไป

42

คำ�สงควบคมก�รทำ�ง�น EXPRESSION

•คำ�สง expression คอ ใชกำ�หนดคำ�สงแบบมเงอนไข

•syntax:variable = condition ? value_when_true : value_when_false ;

<script Language ="JavaScript">var num=100; var str = (num==100) ? alert("many") : alert( "little") ;</script>

43

คำ�สงควบคมก�รทำ�ง�น WITH•คำ�สง with ใชเพอทจะระบ object เพยงครงเดยว แลวเรยกใช property หรอ method ต�งของ object นนๆ ไดเลย ( ส�ม�รถชวยลดเวล�ก�รทำ�ง�นของโปรแกรมได )

•syntax:with(object) { property; method; }

<script Language ="JavaScript">with(Math){ alert(E); alert(PI); }</script>

44

Object Class• toString()

• ใชแปลงชนดขอมล ของชอตวแปรทกำ�หนด ใหเปน stringvar num = 25; alert ( num.toString() );

• toString(base)• ใชแปลงเลขฐ�น จ�กฐ�น 10 ไปเปนฐ�น 2, 8, 16

var num = 25; alert(num.toString(2));alert(num.toString(8)); alert(num.toString(16));

<script Language ="JavaScript">var num = 25; alert(num.toString(2));alert(num.toString(8)); alert(num.toString(16));

</script>

45

Object Class (ตอ)•toString(10)• ใชแปลงเลขฐ�น จ�กฐ�น 2, 8, 16 ไปเปนฐ�น 10

var octnum = 0702; var hexnum = 0xAF; alert ( octnum.toString(10) ); alert ( hexnum.toString(10) );

หม�ยเหต ก�รกำ�หนดค�ของเลขฐ�น 8 ตองม 0 นำ�หน� ก�รกำ�หนดค�ของเลขฐ�น 16 ตองม 0x นำ�หน�

46

Object Class (ตอ)• constructor;• ใชคนค� constructor ทสร�ง object นขนม� ( ชอคล�ส

นนเอง )var str = new String(“iamsanya"); alert(str.constructor);

• prototype;ใชสร�ง Property หรอ Method ใหมใหกบ object

var str = new String ( "iamsanya1" ); str.propotype.getName = function () { return "iamsanya2"; } alert(str.getName() );

47

Object Class (ตอ)• valueOf()

ใชคนค� ค�ขอมล ของ objectvar str = new String (“iamsanya" ); alert (str.valueOf () );

• hasOwnProperty( property );ใชกำ�หนด Property ใหกบ objectvar str = new String ( "BambooLabCode" ); str.hasOwnProperty ( "name" ) alert ( str.name );

• isPrototypeOf ( parent_object );ใชกำ�หนดให object สบทอดม�จ�ก parent_objectvar str = new STring ( "BambooLabcode" ); var name; name.isPrototypeOf ( str );

48

กำ�หนด Event, Action• Event คอเหตก�รณต�งๆทเกดขน เชน ผใชคลกเม�ส

ผใชกดปมบนคยบอรด ก�รพมพขอมลลงในฟอรม เปนตน

• Action คอก�รกระทำ�ใดๆเมอมเหตก�รณเกดขน เชน เมอเกดเหตก�รณทผใชคลกเม�ส ก�รกระทำ� ( action ) คอจะกำ�หนดใหปร�กฏ Message Box เปนตน

• Event Bubble เปนก�รตรวจจบ Event จ�กโคดภ�ยในสด ( tag ในสด ) แลวทำ�ง�นต�มลำ�ดบออกม�ข�งนอกสด ( tag นอกสด ) เชน browser IE

• Event Propagation เปนก�รตรวจจบ Event จ�กโคดภ�ยนอกสด ( tag นอกสด ) แลวทำ�ง�นต�มลำ�ดบเข�ไปข�งในสด ( tag ในสด ) เชน browser Netscape

49

Event ใน JavaScript• content:onLoad จะทำ�ง�นเมอ มก�รโหลด window หรอ frame ขนม� • onUnLoad จะทำ�ง�นเมอ มก�รกดปด web page • onError จะทำ�ง�นเมอ มคว�มผดพล�ดเกดขนบน web page • onAbort จะทำ�ง�นเมอ มก�รยกเลกก�รทำ�ง�น เชน ก�รหยด download • onMove จะทำ�ง�นเมอ มก�รย�ย window หรอ frame • onResize จะทำ�ง�นเมอ มก�รปรบขน�ดของ window หรอ frame • onScroll จะทำ�ง�นเมอ มก�รเลอน scrollbar • onFocus จะทำ�ง�นเมอ object นนๆไดรบ focus • onBlur จะทำ�ง�นเมอ object นนๆสญเสย focus • onDblClick จะทำ�ง�นเมอ มก�ร double click ท Object นนๆ • onClick จะทำ�ง�นเมอ มก�ร click ท object นนๆ • onSubmit จะทำ�ง�นเมอ มก�รกด submit ใน form • onReset จะทำ�ง�นเมอ มก�รกด reset ใน form

50

Event ใน JavaScript (ตอ)• onMouseMove จะทำ�ง�นเมอ มก�รเลอนเม�สอยบน object • onMouseOver จะทำ�ง�นเมอ มก�รเลอนเม�สอยบน object นนๆครงแรก• onMouseOut จะทำ�ง�นเมอ มก�รเลอนเม�สออกจ�ก object นนๆครงแรก• onMouseDown จะทำ�ง�นเมอ มก�รคลกเม�สลงบน object นนๆ• onMouseUp จะทำ�ง�นเมอ มก�รปลอยเม�สทคลกลงบน object นน• onKeyPress จะทำ�ง�นเมอ มก�รกดปมใดๆบน keyboard บน object นนๆ• onKeyDown จะทำ�ง�นเมอ มก�รกดปมใดๆบน Keyboard บน object นนๆ• onKeyUp จะทำ�ง�นเมอ มก�รปลอยปมทกดบน Keyboard บน object นน• onSelect จะทำ�ง�นเมอ มก�รล�แถบสคลมขอคว�มในชองรบขอมล • onChange จะทำ�ง�นเมอ ขอมลในชองรบขอมลมก�รเปลยนแปลง

51

Object ทใชง�นกบ Event ต�งๆ

• Window ไดแก onLoad, onUnLoad, onError, onResize, onFocus, onBlur, onMove

• Document ไดแก onLoad, onUnLoad, onResize, onFocus, onBlur, onDblClick, onClick, onMouseMove, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyPress, onKeyDown, onKeyUp

• HyperTextLink ไดแก onLoad, onFocus, onClick, onMouseOver

52

Object ทใชง�นกบ Event ต�งๆ (ตอ)

•Form ไดแก onSubmit, onReset •TextElement ไดแก onFocus, onBlur, onClick, onKeyPress, onKeyDown, onKeyUp, onSelect, onChange, onSelectStart

•Submit Button ไดแก onFocus, onBlur, onClick, onSelect, onSelectStart

• Reset Button ไดแก onFocus, onBlur, onClick, onSelect, onSelectStart

53

Object ทใชง�นกบ Event ต�งๆ (ตอ)

•Button Element ไดแก onFocus, onBlur, onClick, onMouseDown, onMouseUp

•CheckBox ไดแก onFocus, onBlur, onClick, onMouseDown, onMouseUp

•RadioButton ไดแก onFocus, onBlur, onClick, onSelect, onSelectStart

•SelectionList ไดแก onFocus, onBlur, onClick, onChange

54

ตวแปรแบบอ�รเรย (Array) ตวแปรแบบอ�รเรย (Array) หม�ยถงตวแปรซงมค�ไดหล�ยค�โดยใชชออ�งองเพยงชอเดยว ดวยก�รใชหม�ยเลขลำ�ดบเปนตวจำ�แนกคว�มแตกต�งของค�ตงแปรแตละตว ถ�เร�จะเรยกตวแปรชนดนว� "ตวแปรชด" กไมผดนก

55

ตวแปรแบบอ�รเรย (ตอ)ในตวแปรแบบอ�รเรยมดชนเปน 0 สวนตวแปรตอ ๆ ไปกจะมดชนเปน 1,2,3,... ไปต�มลำ�ดบ เมอตองก�รระบชอตวแปรแบบอ�รเรยแตละตว กจะใชรปแบบ name[0], name[1],... เรยงตอกนไปเรอยๆ ส�ม�รถสร�งตวแปรอ�รเรยใหมดวยArray ( int ); มตวอย�งดงน

var myArray = new Array ( 3 ); myArray[0] = 20;

myArray[1] = “Alex"; myArray[2] = "Stop";

56

ก�รสร�งตวแปรอ�รเรย(Array)

ก�รประก�ศตวแปรเปนก�รกำ�หนดขน�ดของพนทในหนวยคว�มจำ�สำ�หรบเกบค�ของขอมล ร�ยละเอยดของก�รประก�ศสร�งตวแปรอ�รเรย มดงตอไปน

57

ก�รสร�งตวแปรอ�รเรย (ตอ)

ก�รประก�ศตวแปรอ�รเรยชอตวแปรอ�รเรย = new Array

(จำ�นวนสม�ชก);ก�รกำ�หนดค�ใหกบตวแปรอ�รเรย

ตวแปร [Index] = ขอมล;

58

ก�รรบขอมลใหกบตวแปรอ�รเรย

ก�รรบขอมลใหกบตวแปรอ�รเรย เปนวธก�รในก�รกำ�หนดค�ใหกบตวแปรอ�รเรย โดยปอนขอมลทตองก�รผ�นแปนพมพโดยใชคำ�สง PROMPT( ... ) ในก�รรบขอมลมร�ยละเอยดดงน

ตวแปร [Index] = prompt("ขอคว�มนำ�", "ค�เรมตน");

59

ก�รกำ�หนดค�เรมตนใหกบอ�รเรย

ก�รกำ�หนดค�เรมตนใหกบอ�รเรย (Initial value) เปนก�รกำ�หนดค�โดยตรงใหกบตวแปรอ�รเรย ในขณะทมก�รประก�ศเรมใชตวแปรอ�รเรย ค�ทกำ�หนดนถอว�เปนค�เรมตนในก�รกำ�หนดค�ใด ๆ ใหกบตวแปรอ�รเรย มรปแบบก�รกำ�หนดดงน

รปแบบ ชอตวแปรอ�รเรย = new Array (ขอมล1, ขอมล2, ... );

var arr = new Array(“a1”, “a3”, “a5”, “a7”);หรอ var arr = [ “a1", “a3", “a5", “a7" ];

60

ฟงกชนและเมธอด (Function, Method)

ชนดของฟงกชนฟงกชนใน ภ�ษ�JavaScript มอยดวยกน 2 แบบ คอ

• ฟงกชนม�ตรฐ�น (Standard Function) เปนแบบชอของฟงกชนทมอยแลวในภ�ษ� JavaScript ส�ม�รถนำ�เอ�ไปใชง�นไดทนท

• ฟงกชนสร�งขนเอง (User-defined Function) เปนแบบชอของฟงกชนทผใชสร�งขนม�ใชเอง เพอกำ�หนดใหทำ�ง�นใดง�นหนงจนสำ�เรจ

61

ก�รเรยกใชฟงกชน เปนก�รกำ�หนดทศท�งก�รทำ�ง�นของคำ�สง หรอ กำ�หนดสวนของโปรแกรมใหทำ�ง�นใดง�นหนงจนสำ�เรจ เมอตองก�รใชง�นกใหพมพชอฟงกชนนลงไปตรง ๆ แตจะตองจำ�ใหแมนว�ตองพมพใหเหมอนทงชอและตวอกษรตวพมพใหญ-เลก มรปแบบก�รเรยกใชดงน

รปแบบ ตวแปร = ชอฟงกชน();

62

ก�รสร�งฟงกชนขนใชเองก�รสร�งฟงกชนขนใชเอง (User-defined Function) เปนแบบชอของฟงกชนทผใชสร�งขนม�เพอกำ�หนดใหทำ�ง�นใดง�นหนงจนสำ�เรจ ก�รสร�งฟงกชนนนจะขนตนดวยคำ�ว� function ต�มดวยชอของฟงกชนทตองก�ร มร�ยละเอยดดงนfunction ชอฟงกชน (พารามเตอร1, พารามเตอร2, ...)

{ ขอคำาสง ............ ............ }

63

ก�รว�งตำ�แหนงฟงกชนก�รว�งตำ�แหนงฟงกชนมลกษณะเชนเดยวกบก�รว�งตำ�แหนงสครปต นนคอจะว�งไวในสวนของ <HEAD> หรอว�งไวในสวนของ <BODY>อย�งไรกขนอยกบว�ตองก�รใหฟงกชนนนนถกโหลดใชง�นกอนหรอหลง ต�มลำ�ดบก�รเรยกใชง�น

64

ก�รว�งตำ�แหนงฟงกชน (ตอ)<html><head><tiltle> ขอความแถบเรอง </title><script Language = "JavaScript"></SCRIPT></HEAD>

ชดคำ�สงทสอง ใสไวใน Body Section<BODY onLoad="start()">

70

ปมควบคมเดนหน� ถอยกลบ

<FORM> <INPUT TYPE="button" VALUE=" BACK " onClick="history.go(-1)"> <INPUT TYPE="button" VALUE="FORWARD" onCLick="history.go(1)"></FORM>

71

ปฏทนแบบท 1

<SCRIPT LANGUAGE="JavaScript">monthnames = new Array("January","Februrary","March","April","May","June","July","August","September","October","November","Decemeber");var linkcount=0;function addlink(month, day, href) {var entry = new Array(3);entry[0] = month;entry[1] = day;entry[2] = href;this[linkcount++] = entry;}Array.prototype.addlink = addlink;linkdays = new Array();monthdays = new Array(12);monthdays[0]=31;monthdays[1]=28;monthdays[2]=31;monthdays[3]=30;monthdays[4]=31;monthdays[5]=30;monthdays[6]=31;monthdays[7]=31;monthdays[8]=30;monthdays[9]=31;monthdays[10]=30;monthdays[11]=31;todayDate=new Date();thisday=todayDate.getDay();thismonth=todayDate.getMonth();thisdate=todayDate.getDate();thisyear=todayDate.getYear();thisyear = thisyear % 100;thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));if (((thisyear % 4 == 0) && !(thisyear % 100 == 0))||(thisyear % 400 == 0)) monthdays[1]++;startspaces=thisdate;while (startspaces > 7) startspaces-=7;startspaces = thisday - startspaces + 1;if (startspaces < 0) startspaces+=7;document.write("<table border=2 bgcolor=white ");document.write("bordercolor=black><font color=black>");document.write("<tr><td colspan=7><center><strong>" + monthnames[thismonth] + " " + thisyear + "</strong></center></font></td></tr>");document.write("<tr>");document.write("<td align=center>Su</td>");document.write("<td align=center>M</td>");document.write("<td align=center>Tu</td>");document.write("<td align=center>W</td>");document.write("<td align=center>Th</td>");document.write("<td align=center>F</td>");document.write("<td align=center>Sa</td>"); document.write("</tr>");document.write("<tr>");for (s=0;s<startspaces;s++) {document.write("<td> </td>");}count=1;while (count <= monthdays[thismonth]) {for (b = startspaces;b<7;b++) {linktrue=false;document.write("<td>");for (c=0;c<linkdays.length;c++) {if (linkdays[c] != null) {if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {document.write("<a href=\"" + linkdays[c][2] + "\">");linktrue=true;}}}if (count==thisdate) {document.write("<font color='FF0000'><strong>");}if (count <= monthdays[thismonth]) {document.write(count);}else {document.write(" ");}if (count==thisdate) {document.write("</strong></font>");}if (linktrue)document.write("</a>");document.write("</td>");count++;}document.write("</tr>");document.write("<tr>");startspaces=0;}document.write("</table></p>");// End --></SCRIPT>

72

ปฏทนแบบท 1• แกปฏทนใหเปนภ�ษ�ไทย• <script language="JavaScript">

monthnames = new Array("มกร�คม","กมภ�พนธ","มน�คม","เมษ�ยน","พฤษภ�คม","มถน�ยน","กรกฎ�คม","สงห�คม","กนย�ยน","ตล�คม","พฤศจก�ยน","ธนว�คม");

document.write("<tr>");document.write("<td align=center>อา</td>");document.write("<td align=center>จ</td>");document.write("<td align=center>อ</td>");document.write("<td align=center>พ</td>");document.write("<td align=center>พฤ</td>");document.write("<td align=center>ศ</td>");document.write("<td align=center>ส</td>");

73

ตวเลขแบบสม• ก�รสมตวเลข กเปนฟงกชนม�ตรฐ�นทมกมก�รนำ�ไปประยกตใชกนหล�ยรปแบบ

• ขนตอนท 1 สร�งรหส JavaScript ไวใน Head Section

• ขนตอนท 2 สร�งรหส JavaScript สำ�หรบก�รแสดงผลไวใน Body Section

<SCRIPT language="JavaScript"></SCRIPT>

<SCRIPT language="JavaScript">document.write(randomNumber);//--></SCRIPT>

74

แสดงผลหน�เวบแบบ Fade ส•สร�งรหส JavaScript ไวใน Head Section

รายการสแดง คอคาสและความหนวงทตอง กำาหนดเอง เชน

fade(0,0,0,255,255,255,100);

var sr,sg,sb,er,eg,eb,step,at;function setBg() {setbgColor(Math.floor(sr * ((step-at)/step) + er * (at/step)),Math.floor(sg * ((step-at)/step) + eg * (at/step)),Math.floor(sb * ((step-at)/step) + eb * (at/step)));at++;if (at<=step) setTimeout("setBg()",5);}function fade(a,b,c,d,e,f,g) {sr=a;sg=b;sb=c;er=d;eg=e;eb=f;step=g;at=1;setBg();}function swtStart() {fade( คาส R1, คาส G1, คาส B1, คาสR2, คาส G2, คาส B2, ตวเลขความหนวง);}window.onload=swtStart;// --></SCRIPT>

<SCRIPT LANGUAGE="JavaScript"></SCRIPT>

จากนนเพม Attribute ใหกบ Body Tag ดงน<BODY onLoad="scrollmessage(100)">

<SCRIPT language="JavaScript">

HTML Redirect / Refresh Webpage(ตอ)

• Sample <html><head><title>iamsanya.com Tutorial</title><META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.iamsanya.com">

</head><body>Please visit at www.iamsanya.com</body></html>

JavaScript alert & confirm• JavaScript alert & confirm ตวอย�งนจะเปนก�รใช JavaScript ในสวนของ alert และ confirm

JavaScript alert & confirm(ตอ)

• Sample1 ก�รใช alert ใชกรณทตองก�รแสดงขอคว�มเตอนหรอแจงใหผใชทร�บ

<html><head><title>iamsanya.com Tutorial</title></head><body><script language="javascript">function fncAlert(){

alert('Hello iamsanya.com');}</script><script language="javascript">

alert('Hello Weerachai Nukitram');</script>

<input name="btnButton1" type="button" value="Hello 1" OnClick="JavaScript:alert('Hello iamsanya.com');">

<input name="btnButton2" type="button" value="Hello 2" OnClick="JavaScript:fncAlert();">

</body></html>



• Sample2 ก�รใช confirm เพอยนยนจ�กผใช<html><head><title>iamsanya.com Tutorial</title></head><body><script language="javascript">function fncConfirm1(){

if(confirm('Goto 1')==true){

window.location = 'page1.cgi';}

}

function fncConfirm2(){


if(confirm('Goto 2')==true){

window.location = 'page2.cgi';}

}

function fncClose(){

if(confirm('Close Browser')==true){

window.close();}

}

function fncSubmit(){

if(confirm('Submit Form')==true){

document.form1.submit();}


}</script><form action="page.cgi" method="post" name="form1">Please input <input name="txtName" type="txt"

id="txtName"><br><input name="btnButton1" type="button" value="Goto 1"

OnClick="JavaScript:fncConfirm1();"><input name="btnButton2" type="button" value="Goto 2"

OnClick="JavaScript:fncConfirm2();"><input name="btnButton3" type="button" value="Submit

Form" OnClick="JavaScript:fncSubmit();"><input name="btnButton4" type="button" value="Close"

OnClick="JavaScript:fncClose();">

</body></html>


JavaScript HTML Multiple Action Form

• JavaScript HTML Multi-Change Action Form ตวอย�งนจะเปนก�รใช JavaScript ควบคม Action ก�ร Submit Form

JavaScript HTML Multiple Action Form(ตอ)

• Sample1 ก�รใช JavaScript ในก�รก�รควบคมทศท�งของ Action <html><head><title>iamsanya.com Tutorial</title></head><body><script language="javascript">function fncSubmit(strPage){

if(strPage == "page1"){

document.form1.action="page1.cgi";}


if(strPage == "page2"){

document.form1.action="page2.cgi";}

document.form1.submit();}</script><form action="page.cgi" method="post" name="form1"> <input name="txtName" type="text" id="txtName"><input name="btnButton1" type="button" value="Button"

onClick="JavaScript:fncSubmit('page1')"><input name="btnButton2" type="button" value="Button"

onClick="JavaScript:fncSubmit('page2')"></form></body></html>


JavaScript HTML Check Checkbox

•JavaScript HTML Check Checkbox ตวอย�งนจะเปนก�รใช JavaScript ควบคม ก�รตรวจสอบค�ว�งของ Checkbox

JavaScript HTML Check Checkbox(ตอ)

• Sample1 ก�รใช JavaScript ในก�รตรวจสอบค�ว�งของ Checkbox <html><head><title>iamsanya.com Tutorial</title></head><body><script language="javascript">function fncSubmit(){

if(document.form1.chk1.checked == false){

alert('Please Click Checkbox 1 ');return false;

}


if(document.form1.chk2.checked == false){

alert('Please Click Checkbox 2 ');return false;


}</script><form action="page.cgi" method="post" name="form1"

onSubmit="JavaScript:return fncSubmit();">Checkbox 1 <input name="chk1" type="checkbox" id="chk1" value="Y"> <br>Checkbox 2 <input name="chk2" type="checkbox" id="chk2" value="Y"><br><input name="btnSubmit" type="submit" value="Submit" ></form></body></html>


JavaScript HTML Back/Next/Close/Print

•JavaScript HTML Back/Next/Close/Print ตวอย�งนจะเปนก�รใช JavaScript ควบคม Event ต�ง ๆ

JavaScript HTML Back/Next/Close/Print(ตอ)

Sample ก�รใช JavaScript ควบคม Event ต�ง ๆ

ปม Back<input name="btnButton" type="button" value="Back" onClick="JavaScript:history.back();"><input name="btnButton" type="button" value="Back" onClick="JavaScript:history.go(-1);">

ปม Next<input name="btnButton" type="button" value="Next" onClick="JavaScript:history.go(1);">

ปม Close ปด Window Browser<input name="btnButton" type="button" value="Close" onClick="JavaScript:window.close();">

JavaScript HTML Back/Next/Close/Print(ตอ)

• ปม Print<input name="btnButton" type="button" value="Print" onClick="JavaScript:window.print();">//*** Print Method ***//window.print();parent.framename.print();document.frames('iFrameName').print();window.self.print();print();

JavaScript HTML Show/Hide Html Element

• JavaScript HTML Show/Hide Html Element ตวอย�งนจะเปนก�รใช JavaScript ควบคมก�ร ซอน/แสดง ในสวนของ Html Element

JavaScript HTML Show/Hide Html Element(ตอ)• Sample

<html><head><title>iamsanya.com Tutorial</title></head><body><form action="page.cgi" method="post" name="form1"

onSubmit="JavaScript:return fncSubmit();"><input name="txt1" type="text" id="txt1" value="Value"><input name="rdo1" type="radio" value="Y" checked

onClick="javaScript:if(this.checked){document.all.txt1.style.display='';}">

Show <input name="rdo1" type="radio" value="N"

onClick="javaScript:if(this.checked){document.all.txt1.style.display='none';}">

Hide<br><br>

JavaScript HTML Show/Hide Html Element(ตอ)

<input name="chk1" type="checkbox" id="chk1" value="Y" checked>Checkbox<input name="rdo2" type="radio" value="Y" checked

onClick="javaScript:if(this.checked){document.all.chk1.style.display='';}">

Show<input name="rdo2" type="radio" value="N"

onClick="javaScript:if(this.checked){document.all.chk1.style.display='none';}">

Hide<br><br><table width="196" border="1" id="tbName"> <tr> <td> </td> </tr></table><input name="rdo3" type="radio" value="Y" checked

onClick="javaScript:if(this.checked){document.all.tbName.style.display='';}">


onClick="javaScript:if(this.checked){document.all.tbName.style.display='none';}">

Hide<br><br>

JavaScript HTML Show/Hide Html Element(ตอ)<span id="spName">Text www.iamsanya.com</span>

<input name="rdo4" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.spName.style.display='';}">


onClick="javaScript:if(this.checked){document.all.spName.style.display='none';}">

Hide<br><br><input name="btnSubmit" type="submit" value="Submit"

onClick="JavaScript:this.disabled=true;"></form></body></html>

JavaScript HTML Show/Hide Html Element(ตอ)

JavaScript Reload/Refresh Webpage

• JavaScript Reload/Refresh Webpage เปนตวอย�งก�รใช JavaScript ในก�ร สง Reload หรอ Refresh Webpage

Syntaxwindow.location.reload()

JavaScript Reload/Refresh Webpage(ตอ)

• Sample <html><head><title>iamsanya.com Tutorial</title></head><body><script langauge="JavaScript">window.location.reload();</script></body></html>

JavaScript Timers Delay setTimeOut

• JavaScript Timers Delay setTimeOut เปนฟงกชนของ JavaScript ทเข�ม�จดก�รเกยวกบในสวนของ Timer หรอ Time Delay เพอนบถอยหลงก�รทำ�ง�น หรอ รอระยะเวล�ทกำ�หนด

SyntaxsetTimeOut("alert('iamsanya.com');",5000);

setTimeOut("call function();",5000);

// หนวย 1000 = 1 วน�ท

JavaScript Timers Delay setTimeOut(ตอ)

• Sample <html><head><title>iamsanya.com Tutorial</title></head><body Onload="JavaScript:bodyOnload()";><script language="JavaScript">

function bodyOnload(){setTimeOut("alert('Welcome to www.iamsanya.com');",5000);setTimeOut("alertWelcome();",5000);}

function alertWelcome(){alert('Welcome to www.iamsanya.com');}</script></body></html>

JavaScript Click Check All and Un Check All

•JavaScript Click Check All and Un Check All ก�รทำ�ปม Checkbox แบบ Check All และ Un Check All เพอ เลอก/ไมเลอก ขอมลทงหมด

JavaScript Click Check All and Un Check All(ตอ)

• Sample <html><head><title>iamsanya.com Tutorial</title><meta http-equiv="Content-Type" content="text/html; charset=utf-

8"></head><body><script language="JavaScript">

function ClickCheckAll(vol){

var i=1;for(i=1;i<=document.frmMain.hdnCount.value;i++){if(vol.checked == true)


{

eval("document.frmMain.Chk"+i+".checked=true");}else{

eval("document.frmMain.Chk"+i+".checked=false");}

}}

</script><form action="" method="post" name="frmMain" id="frmMain"> <table width="531" border="1"> <tr> <td width="34"><div align="center"> <input name="CheckAll" type="checkbox" id="CheckAll" value="Y"

onClick="ClickCheckAll(this);"> </div></td> <td width="117"><div align="center">Customer ID </div></td> <td width="134"><div align="center">Name</div></td> <td width="218"><div align="center">Surname</div></td> </tr>


<tr> <td><div align="center"> <input name="Chk1" type="checkbox" id="Chk1" value="C001"> </div></td> <td> <div align="center">C001 </div></td> <td> Alex Sanya </td> <td> [email protected] </td> </tr> <tr> <td><div align="center"> <input name="Chk2" type="checkbox" id="Chk2" value="C002"> </div></td> <td> <div align="center">C002</div></td> <td> John Smith </td> <td> [email protected] </td> </tr> <tr> <td><div align="center"> <input name="Chk3" type="checkbox" id="Chk3" value="C003"> </div></td>


<td> <div align="center">C003</div></td> <td> Jame Born </td> <td> [email protected] </td> </tr> <tr> <td><div align="center"> <input name="Chk4" type="checkbox" id="Chk4"

value="C004"> </div></td> <td> <div align="center">C004</div></td> <td> Chalee Angel </td> <td> [email protected] </td> </tr> </table> <input type="hidden" name="hdnCount" value="4"></form></body></html>


Screenshot

206

Thank You

Documents

แนะนำ การเขียนภาษาจาวาสคริปต์ ( JavaScript Language)