SlideShare a Scribd company logo
1 of 4
Download to read offline
การเขียน JavaScript ร่วมกับ html
        JavaScript เป็นภาษายุคใหม่สาหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ตที่กาลังได้รับความนิยม
อย่างสูง เราสามารถเขียน โปรแกรม JavaScript เพิ่มเข้าปในเว็บเพจเพื่อใช้ประโยชน์สาหรับงานด้านต่าง ๆ ทั้ง
การคานวณ การแสดงผล การรับ-ส่งข้อมูล และที่ สาคัญคือ สามารถโต้ตอบกับผู้ใช้ได้อย่างทันทีทันได นอกจากนี้
ยังมีความสามารถด้านอื่น ๆ อีกหลายประการที่ช่วยสร้างความน่าสนใจให้ กับเว็บเพจของเราได้อย่างมาก ภาษา
จาวาสคริปต์ถูกพัฒนาโดยเน็ตสเคปคอมมิวนิเคชันส์ (Netscape Communications Corporation) โดยใช้ชื่อว่า
Live Script ออกมาพร้อมกับ Netscape Navigator 2.0 เพื่อใช้สร้างเว็บเพจโดยติดต่อกับเซิร์ฟเวอร์แบบ
Live Wire ต่อมาเน็ตสเคปจึงได้ร่วมมือกับบริษัทซันไมโครซิสเต็มส์ปรับปรุงระบบของบราวเซอร์เพื่อให้สามารถ
ติดต่อใช้งานกับภาษาจาวาได้ และได้ปรับปรุง LiveScript ใหม่เมื่อ ปี 2538 แล้วตั้งชื่อใหม่ว่า JavaScript

        เราสามารถแทรก JavaScript ได้ 2 ส่วนด้วยกันคือ ใน <head >และ <body> ขึ้นอยู่กับความเหมาะสม
ของโค้ดนั้น ๆ โดย Javascripts นั้นจะแสดงผลได้ก็ต่อเมื่อมีการเรียกคาสั่งที่ว่า
<script language = “javascripts”>....................</script>

        ตัวอย่างการเขียนโปรแกรม JavaScript ร่วมกับ html

                        code                                                    output
<!DOCTYPE html>
                                                          My First Web Page
<html>
<body>                                                    My First JavaScript
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>My First JavaScript</p>");
</script>
</body>
</html>




Nunnaphat chadajit computer_saohai
code                                           output
<html>
<head>
<title>ตัวอย่าง javascipt ให้แสดงข้อความ
</title>
</head>
<body>
<script language = javascript>
document.write("hello");
</script>
</body>
</html>
<html>
<head>
<title>ตัวอย่าง javascipt ให้แสดง pop up
window</title>
<script type="text/javascript">
<!--
alert('Hello, remember to tell your
friends about Javascripts and html!');     จะเกิดหน้าต่าง pop up windows ขึ้นมาก่อน
-->                                        เมื่อกดปุ่ม ok จะเข้าหน้าเว็บเพจปกติ
</script>
</head>
<body>
<script language = javascript>
document.write("hello");
</script>
</body>
</html>



Nunnaphat chadajit computer_saohai
ชื่อ – นามสกุล                                                     ชั้น            เลขที่



ชิ้นงาน
   1. ให้นักเรียนเขียนประวัติส่วนตัวของตัวเอง อย่างน้อย 5- 10 บรรทัด โดยใช้ JavaScript ร่วมกับ html




  Nunnaphat chadajit computer_saohai
ชื่อ – นามสกุล                                                        ชั้น             เลขที่



ชิ้นงาน
   2. ให้นักเรียนเขียนแสดง pop up window ขึ้นข้อความว่า ยินดีต้อนรับสู่เว็บไซต์ ใส่ชื่อนักเรียน




  Nunnaphat chadajit computer_saohai

More Related Content

Viewers also liked

Ohranjanje in povečevanje biotske pestrosti v slovenskih gozdovih (Conservati...
Ohranjanje in povečevanje biotske pestrosti v slovenskih gozdovih (Conservati...Ohranjanje in povečevanje biotske pestrosti v slovenskih gozdovih (Conservati...
Ohranjanje in povečevanje biotske pestrosti v slovenskih gozdovih (Conservati...Franc Ferlin
 
Ekoizziv 2010/11 OŠ Lovrenc na Pohorju
Ekoizziv 2010/11 OŠ Lovrenc na PohorjuEkoizziv 2010/11 OŠ Lovrenc na Pohorju
Ekoizziv 2010/11 OŠ Lovrenc na PohorjuEkokviz
 
Metodologija priprave proračuna
Metodologija priprave proračunaMetodologija priprave proračuna
Metodologija priprave proračunaTomaž Dežman
 
Ogroženi projekti v primeru nesprejetja proračuna 2014
Ogroženi projekti v primeru nesprejetja proračuna 2014Ogroženi projekti v primeru nesprejetja proračuna 2014
Ogroženi projekti v primeru nesprejetja proračuna 2014olgakarba
 
Povrat poreza
Povrat porezaPovrat poreza
Povrat porezatzombix
 
Intb powerpoint 2
Intb powerpoint 2Intb powerpoint 2
Intb powerpoint 2Zoë Bergin
 
Curenje sa naprednjacke volonterske mreze via @SNSleaks
Curenje sa naprednjacke volonterske mreze via @SNSleaksCurenje sa naprednjacke volonterske mreze via @SNSleaks
Curenje sa naprednjacke volonterske mreze via @SNSleaksDragana Djermanovic
 
Davčno ugodnejša območja
Davčno ugodnejša območjaDavčno ugodnejša območja
Davčno ugodnejša območjaJan Sibincic
 
Toward a More Innovative Curriculum
Toward a More Innovative CurriculumToward a More Innovative Curriculum
Toward a More Innovative CurriculumCindy Royal
 
Regionalni #nohatespeech trening - Internet kampanja, alati i primeri
Regionalni #nohatespeech trening - Internet kampanja, alati i primeriRegionalni #nohatespeech trening - Internet kampanja, alati i primeri
Regionalni #nohatespeech trening - Internet kampanja, alati i primeriIvan Živković
 
E.3 presentation
E.3 presentationE.3 presentation
E.3 presentationpaprescott
 
Audiweb in Action 2010: intervento di Enrico Gasperini
Audiweb in Action 2010:  intervento di Enrico GasperiniAudiweb in Action 2010:  intervento di Enrico Gasperini
Audiweb in Action 2010: intervento di Enrico GasperiniAudiweb
 

Viewers also liked (20)

Ohranjanje in povečevanje biotske pestrosti v slovenskih gozdovih (Conservati...
Ohranjanje in povečevanje biotske pestrosti v slovenskih gozdovih (Conservati...Ohranjanje in povečevanje biotske pestrosti v slovenskih gozdovih (Conservati...
Ohranjanje in povečevanje biotske pestrosti v slovenskih gozdovih (Conservati...
 
Ekoizziv 2010/11 OŠ Lovrenc na Pohorju
Ekoizziv 2010/11 OŠ Lovrenc na PohorjuEkoizziv 2010/11 OŠ Lovrenc na Pohorju
Ekoizziv 2010/11 OŠ Lovrenc na Pohorju
 
Metodologija priprave proračuna
Metodologija priprave proračunaMetodologija priprave proračuna
Metodologija priprave proračuna
 
Ogroženi projekti v primeru nesprejetja proračuna 2014
Ogroženi projekti v primeru nesprejetja proračuna 2014Ogroženi projekti v primeru nesprejetja proračuna 2014
Ogroženi projekti v primeru nesprejetja proračuna 2014
 
Jurčič Josip
Jurčič JosipJurčič Josip
Jurčič Josip
 
Povrat poreza
Povrat porezaPovrat poreza
Povrat poreza
 
Intb powerpoint 2
Intb powerpoint 2Intb powerpoint 2
Intb powerpoint 2
 
Curenje sa naprednjacke volonterske mreze via @SNSleaks
Curenje sa naprednjacke volonterske mreze via @SNSleaksCurenje sa naprednjacke volonterske mreze via @SNSleaks
Curenje sa naprednjacke volonterske mreze via @SNSleaks
 
Combinatorial chemistry and HTS
Combinatorial chemistry and HTSCombinatorial chemistry and HTS
Combinatorial chemistry and HTS
 
Davčno ugodnejša območja
Davčno ugodnejša območjaDavčno ugodnejša območja
Davčno ugodnejša območja
 
plc_portfolio
plc_portfolioplc_portfolio
plc_portfolio
 
Cex slo teas-kr3
Cex slo   teas-kr3Cex slo   teas-kr3
Cex slo teas-kr3
 
Toward a More Innovative Curriculum
Toward a More Innovative CurriculumToward a More Innovative Curriculum
Toward a More Innovative Curriculum
 
Janez Menart
Janez MenartJanez Menart
Janez Menart
 
Nekoliko tviter saveta za nastavu
Nekoliko tviter saveta za nastavuNekoliko tviter saveta za nastavu
Nekoliko tviter saveta za nastavu
 
Proiect
ProiectProiect
Proiect
 
Regionalni #nohatespeech trening - Internet kampanja, alati i primeri
Regionalni #nohatespeech trening - Internet kampanja, alati i primeriRegionalni #nohatespeech trening - Internet kampanja, alati i primeri
Regionalni #nohatespeech trening - Internet kampanja, alati i primeri
 
E.3 presentation
E.3 presentationE.3 presentation
E.3 presentation
 
Trženjski monitor DMS - jesen 2012 - povzetek
Trženjski monitor DMS - jesen 2012 - povzetekTrženjski monitor DMS - jesen 2012 - povzetek
Trženjski monitor DMS - jesen 2012 - povzetek
 
Audiweb in Action 2010: intervento di Enrico Gasperini
Audiweb in Action 2010:  intervento di Enrico GasperiniAudiweb in Action 2010:  intervento di Enrico Gasperini
Audiweb in Action 2010: intervento di Enrico Gasperini
 

Similar to การเขียน Java script ร่วมกับ html

แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละแนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละWithoon Wangsa-Nguankit
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊กsirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
ดรีม
ดรีมดรีม
ดรีมsirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
หวิว
หวิวหวิว
หวิวViewMik
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์sirinet
 
Lab#12 java script
Lab#12 java scriptLab#12 java script
Lab#12 java scriptpalm2816
 
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQLเอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQLPhranakornsoft
 
ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์Nichakorn Sengsui
 
คู่มือJavascript and Python
คู่มือJavascript and Pythonคู่มือJavascript and Python
คู่มือJavascript and PythonBongkotporn Jachernram
 
การเขียน Edit plus และ Python
การเขียน Edit plus และ Pythonการเขียน Edit plus และ Python
การเขียน Edit plus และ PythonChintana Phinkul
 
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301Nawarat Sornchai
 
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301Milk Naja
 
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301Nawarat Sornchai
 

Similar to การเขียน Java script ร่วมกับ html (20)

แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละแนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊ก
 
โบ
โบโบ
โบ
 
Best
BestBest
Best
 
หมวย
หมวยหมวย
หมวย
 
ดรีม
ดรีมดรีม
ดรีม
 
หมวย
หมวยหมวย
หมวย
 
หวิว
หวิวหวิว
หวิว
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์
 
Lab#12 java script
Lab#12 java scriptLab#12 java script
Lab#12 java script
 
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQLเอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
 
ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์
 
Yuu
YuuYuu
Yuu
 
Ten
TenTen
Ten
 
New
NewNew
New
 
คู่มือJavascript and Python
คู่มือJavascript and Pythonคู่มือJavascript and Python
คู่มือJavascript and Python
 
การเขียน Edit plus และ Python
การเขียน Edit plus และ Pythonการเขียน Edit plus และ Python
การเขียน Edit plus และ Python
 
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
 
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
 
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
 

การเขียน Java script ร่วมกับ html

  • 1. การเขียน JavaScript ร่วมกับ html JavaScript เป็นภาษายุคใหม่สาหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ตที่กาลังได้รับความนิยม อย่างสูง เราสามารถเขียน โปรแกรม JavaScript เพิ่มเข้าปในเว็บเพจเพื่อใช้ประโยชน์สาหรับงานด้านต่าง ๆ ทั้ง การคานวณ การแสดงผล การรับ-ส่งข้อมูล และที่ สาคัญคือ สามารถโต้ตอบกับผู้ใช้ได้อย่างทันทีทันได นอกจากนี้ ยังมีความสามารถด้านอื่น ๆ อีกหลายประการที่ช่วยสร้างความน่าสนใจให้ กับเว็บเพจของเราได้อย่างมาก ภาษา จาวาสคริปต์ถูกพัฒนาโดยเน็ตสเคปคอมมิวนิเคชันส์ (Netscape Communications Corporation) โดยใช้ชื่อว่า Live Script ออกมาพร้อมกับ Netscape Navigator 2.0 เพื่อใช้สร้างเว็บเพจโดยติดต่อกับเซิร์ฟเวอร์แบบ Live Wire ต่อมาเน็ตสเคปจึงได้ร่วมมือกับบริษัทซันไมโครซิสเต็มส์ปรับปรุงระบบของบราวเซอร์เพื่อให้สามารถ ติดต่อใช้งานกับภาษาจาวาได้ และได้ปรับปรุง LiveScript ใหม่เมื่อ ปี 2538 แล้วตั้งชื่อใหม่ว่า JavaScript เราสามารถแทรก JavaScript ได้ 2 ส่วนด้วยกันคือ ใน <head >และ <body> ขึ้นอยู่กับความเหมาะสม ของโค้ดนั้น ๆ โดย Javascripts นั้นจะแสดงผลได้ก็ต่อเมื่อมีการเรียกคาสั่งที่ว่า <script language = “javascripts”>....................</script> ตัวอย่างการเขียนโปรแกรม JavaScript ร่วมกับ html code output <!DOCTYPE html> My First Web Page <html> <body> My First JavaScript <h1>My First Web Page</h1> <script type="text/javascript"> document.write("<p>My First JavaScript</p>"); </script> </body> </html> Nunnaphat chadajit computer_saohai
  • 2. code output <html> <head> <title>ตัวอย่าง javascipt ให้แสดงข้อความ </title> </head> <body> <script language = javascript> document.write("hello"); </script> </body> </html> <html> <head> <title>ตัวอย่าง javascipt ให้แสดง pop up window</title> <script type="text/javascript"> <!-- alert('Hello, remember to tell your friends about Javascripts and html!'); จะเกิดหน้าต่าง pop up windows ขึ้นมาก่อน --> เมื่อกดปุ่ม ok จะเข้าหน้าเว็บเพจปกติ </script> </head> <body> <script language = javascript> document.write("hello"); </script> </body> </html> Nunnaphat chadajit computer_saohai
  • 3. ชื่อ – นามสกุล ชั้น เลขที่ ชิ้นงาน 1. ให้นักเรียนเขียนประวัติส่วนตัวของตัวเอง อย่างน้อย 5- 10 บรรทัด โดยใช้ JavaScript ร่วมกับ html Nunnaphat chadajit computer_saohai
  • 4. ชื่อ – นามสกุล ชั้น เลขที่ ชิ้นงาน 2. ให้นักเรียนเขียนแสดง pop up window ขึ้นข้อความว่า ยินดีต้อนรับสู่เว็บไซต์ ใส่ชื่อนักเรียน Nunnaphat chadajit computer_saohai