เรียน Javascript ด้วยตัวเอง ตอนที่ 2 เตรียมเครื่องมือ

เรียน Javascript ด้วยตัวเอง ตอนที่ 2 เตรียมเครื่องมือ

notepad++-logo

จะเขียนโปรแกรมก็ต้องพิมพ์โค้ด จริง ๆ แล้วโปรแกรมพิมพ์งานส่วนใหญ่ก็ใช้งานเป็นตัวเขียนโปรแกรมได้นะ เพราะว่าการเขียนโปรแกรมก็เป็นเพียงการพิมพ์ตัวหนังสือลงไปในไฟล์แล้วจึงนำไปแปลงเป็นโปรแกรมคอมพิวเตอร์ แค่ notepad ก็ใช้งานได้เพียงพอแล้ว แต่โปรแกรมที่ผมจะใช้ในการหัดเขียน JS นี้ผมเลือก Notepad++ เป็นโปรแกรมฟรีไม่ต้องเสียเงินซื้อและมีเครื่องมืออำนวยความสะดวกในการทำงานได้พอสมควร ที่ทำงานใช้งานภาษาไทยได้โดยที่ไม่มีปัญหาเรื่อง Font ต่าง ๆ สระไม่ลอยด้วย ไปโหลดได้ที่นี่ครับ https://notepad-plus-plus.org/download/v6.8.8.html

ต่อไปก็คือเว็บเซิร์ฟเวอร์เพื่อแสดงผลการทำงานของ JS ที่เราเขียนเอาไว้ ตัวเลือกนั้นมีหลากหลายไม่ว่าจะเป็น apache IIS nginx แต่ที่ผมเลือกใช้ก็คือ nginx เพราะรู้สึกว่าใช้งานสะดวกที่สุดแล้วสำหรับผม เว็บเซิร์ฟเวอร์เหล่านี้จะทำให้เครื่องคอมพิวเตอร์ทำงานเหมือนเว็บเซิร์ฟเวอร์คือทำให้เรารันเว็บต่าง ๆ ได้เหมือนเว็บที่ออนไลน์อยู่ ความจริงแล้วไฟล์ HTML ที่มีโค้ด JS สามารถเรียกดูผ่านเว็บเบราวเซอร์อย่างเช่นโครมหรือไฟร์ฟอกซ์ได้โดยตรง แต่ด้วยข้อจำกัดเกี่ยวกับความปลอดภัยทำให้การเรียกไฟล์ผ่านเบราวเซอร์โดยตรงมีข้อจำกัดหลายอย่าง ถ้าเรียกใช้งานเว็บผ่านเซิร์ฟเวอร์โดยตรงจะสะดวกกับการพัฒนาเว็บมากกว่า

nginx สามารถโหลดได้ที่นี่ครับ http://nginx.org/en/download.html

เลือกโหลดเวอร์ชันวินโดวส์นะครับ ตอนที่ผมเขียนบทความนี้เวอร์ชันล่าสุดคือ 1.9.9 ไฟล์ชื่อ nginx-1.9.9.zip แตกไฟล์ออกมาแล้วจะได้โฟลเดอร์ชื่อ nginx-1.9.9 ในโฟลเดอร์จะมีไฟล์เซิร์ฟเวอร์ชื่อ nginx.exe เราจะต้องรันไฟล์นี้เพื่อให้เซิร์ฟเวอร์ทำงาน แต่ต้องรันผ่านหน้าต่างคำสั่งหรือ command window เราสามารถเปิดหน้าต่างคำสั่งของวินโดวส์ได้ด้วยการกด ctrl+shift+Rightclick (คอนโทรล ชิฟท์ คลิกขวา) แล้วเลือกคำสั่ง Open command window here

ก็หน้าต่างดำ ๆ มีขีดกระพริบ ๆ ให้พิมพ์ตัวหนังสือนั่นแหละครับ command window แต่ก่อนที่จะรันเซิร์ฟเวอร์เราต้องจัดการตั้งค่าก่อนว่าจะให้ไฟล์ HTML ของเราทำงานที่ไหน คือบอกให้ nginx ทราบว่าจะเรียกไฟล์จากที่ใดขึ้นมาแสดง โดยให้เข้าโฟลเดอร์ conf แล้วใช้ notepad หรือ notepad++ หรือโปรแกรมพิมพ์เอกสารที่ใช้อยู่เปิดไฟล์ nginx.conf ขึ้นมา ประมาณบรรทัดที่ 40-50 จะมีข้อความนี้

        location / {
            root   html;
            index  index.html index.htm;
        }

ให้แก้ไขค่า root เป็นค่าที่เราต้อง คือโฟลเดอร์ที่เราจะวางไฟล์ HTML สำหรับผม ผมใช้ไดรว์ E: โดยมีโฟลเดอร์ชื่อ www ผมจึงตั้งค่าเป็นเช่นนี้

        location / {
            root   e:/www;
            index  index.html index.htm;
        }

ตัวเซิร์ฟเวอร์จะเรียกไฟล์ index.html ในโฟลเดอร์ที่เราระบุไว้ขึ้นมาแสดงบนหน้าเว็บ ในรูปแบบเดียวกันกับการเปิดเว็บในอินเทอร์เน็ต แต่เรามีเซิร์ฟเวอร์เป็นของตัวเองซึ่งสะดวกกับการพัฒนาเว็บก่อนนำไปใช้งานจริงมาก วิธีเข้าใช้งานก็เพียงเรียกใช้งานเซิร์เวอร์ก่อน โดยพิมพ์ nginx บนหน้าต่าง command window อย่างที่ผมบอกไว้ก่อนหน้านี้ เมื่อตัวเซิร์ฟเวอร์ทำงานแล้วจึงเข้าเซิร์ฟเวอร์ของเราด้วยการพิมพ์ 127.0.0.1 ในช่องกรอกที่อยู่เว็บของเว็บเบราวเซอร์ ตัวเบราวเซอร์ก็จะติดต่อไปที่เซิร์ฟว์เวอร์ของเราแล้วเรียกไฟล์ index.html ขึ้นมาแสดงเป็นหน้าแรก

แค่นี้ก็ถือว่าเพียงพอแล้วสำหรับการเตรียมการในการเรียน Javascript พบกันใหม่พรุ่งนี้หรือมะรืนนี้ครับ

Comments are closed.