10 สิ่งที่คุณไม่รู้ว่า JavaScript ทำได้

ผู้เขียน: Randy Alexander
วันที่สร้าง: 2 เมษายน 2021
วันที่อัปเดต: 14 พฤษภาคม 2024
Anonim
6 things you can do with JavaScript in 2 Minutes
วิดีโอ: 6 things you can do with JavaScript in 2 Minutes

เนื้อหา

JavaScript ได้ก้าวไปไกลแล้วนับตั้งแต่ถือกำเนิดในปี 1995 วิธีที่ยากแน่นอนเต็มไปด้วยความเข้าใจผิดการใช้งานในทางที่ผิดและความไม่รู้ แต่เวลาได้เปลี่ยนไปตั้งแต่ห้าปีที่ผ่านมา JavaScript ได้รับความสนใจมากขึ้นเรื่อย ๆ ด้วยความสนใจที่มากขึ้นนักพัฒนาจำนวนมากจึงใช้ JavaScript จริงๆโดยใช้เพื่อวัตถุประสงค์ต่างๆมากมายและเพลิดเพลินกับความสวยงาม "ลูกเป็ดขี้เหร่" คลาสสิกถ้าคุณถามฉัน

ในบทความต่อไปนี้เราจะค้นพบ 10 กรณีการใช้งานสำหรับ JavaScript ที่แตกต่างจาก "ในเบราว์เซอร์" ทั่วไปที่คุณคุ้นเคย

01. ถึงเวลาแฮงเอาท์

คุณจำวิสัยทัศน์ยุค 80 ของการสื่อสารผ่านวิดีโอแบบ Facetime ได้หรือไม่?

ใช้เวลาเพียง 20 ปีก่อนที่สิ่งนี้จะกลายเป็นกระแสหลักเนื่องจากอินเทอร์เน็ตบรอดแบนด์ที่มีอยู่เกือบทุกที่และการใช้ซอฟต์แวร์ขนาดเล็กที่เรียกว่า Skype เป็นจำนวนมาก

ด้วยความสามารถของ Adobe Flash และความพยายามของ Google ในการสร้างเครือข่ายโซเชียลเราจึงมีความสามารถในการสื่อสารผ่านวิดีโอในเบราว์เซอร์ของเราอยู่แล้ว จะไม่เป็นการดีที่จะมีความสามารถเหล่านั้นโดยไม่ต้องใช้ปลั๊กอินของบุคคลที่สามเช่น Flash?


โชคดีที่ผู้จำหน่ายเบราว์เซอร์คิดเหมือนกันและนำ API "getUserMedia" มาใช้กับซอฟต์แวร์ของตน นี่เป็นขั้นตอนแรกในการเข้าถึงอุปกรณ์เช่นกล้องหรือไมโครโฟนโดยตรงจากเบราว์เซอร์ของคุณ

การใช้ Node.js เป็นเซิร์ฟเวอร์ที่ด้านหลังของแอปพลิเคชันดังกล่าวการส่งสัญญาณวิดีโอทางอากาศไปยังไคลเอนต์หนึ่งรายหรือมากกว่านั้นเป็นเรื่องง่ายอย่างน่าอัศจรรย์ โชคไม่ดีที่ตอนที่เขียนสิ่งนี้มีเพียง Chrome และ Opera เท่านั้นที่รองรับ API แต่คนอื่น ๆ จะตามทัน

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

เพื่อความสนุกสนานโปรดดูการติดตั้ง Photo Booth ของ Sindre Sorhus ในขนาด 121 ไบต์!

var video = document.getElementsByTagName ('วิดีโอ') [0],
navigator.getUserMedia ('วิดีโอ', successCallback, errorCallback);

function successCallback (สตรีม) {
video.src = สตรีม;
}

function errorCallback (ข้อผิดพลาด) {
console.log (ข้อผิดพลาด);
}


02. $ ('แสง'). fadeIn ();

แพลตฟอร์มไมโครคอนโทรลเลอร์ Arduino เป็นตัวอย่างเกรด A สำหรับกรณีการใช้งาน JavaScript แบบ "นอกกรอบ" สำหรับพวกคุณที่ไม่คุ้นเคยกับแพลตฟอร์ม Arduino นี่คือคำพูดที่มีชื่อเสียงมากจากเว็บไซต์:

"Arduino เป็นแพลตฟอร์มการสร้างต้นแบบอุปกรณ์อิเล็กทรอนิกส์แบบโอเพนซอร์สที่ใช้ฮาร์ดแวร์และซอฟต์แวร์ที่ยืดหยุ่นและใช้งานง่ายมีไว้สำหรับศิลปินนักออกแบบมือสมัครเล่นและทุกคนที่สนใจในการสร้างวัตถุหรือสภาพแวดล้อมแบบโต้ตอบ"

Arduino เองรองรับเฉพาะโค้ดที่เขียนด้วย C ซึ่งยังไม่ใช่เรื่องใหญ่ ด้วย C เพียงไม่กี่บรรทัด (นอกเหนือจากที่คนอื่นทำงานให้คุณแล้ว) Arduino สามารถรับคำสั่งผ่านพอร์ต USB ผ่านโปรโตคอลพอร์ตอนุกรม

แต่คุณจะเข้าถึงพอร์ตอนุกรมผ่าน JavaScript ได้อย่างไร? เห็นได้ชัดว่าไม่ได้มาจากเบราว์เซอร์
Node.js เพื่อช่วยเหลือ!


เนื่องจากความพยายามของผู้สนับสนุนชุมชน Chris Williams เราจึงมีไลบรารีพอร์ตอนุกรมของโหนดซึ่งเราสามารถส่งข้อมูลผ่านโปรโตคอล SP แบบเก่าได้ นี่เป็นความก้าวหน้าครั้งแรกโดยอาศัยไลบรารีที่คนอื่น ๆ นำเสนอแนวทางที่เป็นนามธรรมมากขึ้นสำหรับความสามารถของ Arduino ตัวอย่างเช่น node-arduino และ duino libraries

ไลบรารีที่ร้อนแรงและเจ๋งที่สุดในบล็อกสำหรับการเขียนโปรแกรม Arduino ที่ขับเคลื่อนด้วย JS ตอนนี้คือ jonny-five ตรวจสอบบล็อกของ Bocoup เพื่อดูเรื่องน่าสนใจที่พวกเขาทำกับแพลตฟอร์ม Arduino และปลั๊กอินมากมาย นอกจากนี้วิดีโอ JSConf จาก Nicolai Onken และJörn Zaefferer อาจทำให้คุณได้เห็นสิ่งที่เป็นไปได้ในปัจจุบันโดยใช้โค้ดเพียงเล็กน้อย

03. มือของคุณถูกสร้างมาเพื่อเบราว์เซอร์

วิสัยทัศน์ในอนาคตของ Minority Report (สิ่งที่พวกเขาควบคุมคอมพิวเตอร์ด้วยมือไม่ใช่รถยนต์ที่น่าเกลียด) ใกล้เข้ามาทุกวัน ขั้นตอนใหญ่ในทิศทางนี้คือตัวควบคุมของ Microsoft พยายามเล่นน้อยลง Kinect การเล่นเกมที่น่าทึ่งคุณอาจคิดว่า แต่สิ่งนี้เกี่ยวข้องกับ JavaScript อย่างไร!

ด้วยการเปิดตัว Kinect SDK ของ Microsoft ผู้คนจำนวนมากข้ามสะพานการใช้เบราว์เซอร์สำหรับ Kinect ก่อนอื่นพวก ChildNodes ที่สร้างไลบรารี kinect.js ที่ใช้งานได้อย่างสมบูรณ์ซึ่งทำให้สามารถใช้ Kinect ของ Microsoft ในเบราว์เซอร์ของคุณได้

ฉันขอแนะนำให้ลองดูการสาธิตและวิดีโอของพวกเขามันเป็นเรื่องที่น่าตื่นเต้นมาก อย่างไรก็ตามข้อเสียเปรียบที่สำคัญอย่างหนึ่งของไลบรารี kinect.js คือต้องมีโปรแกรมเซิร์ฟเวอร์ WebSocket ที่ทำงานอยู่ด้านหลังของไคลเอ็นต์ (นั่นคือ Kinect -> C # -> กาว JS)

นักศึกษาที่มีชื่อเสียงของ MIT ไม่กี่คนกำลังหาทางแก้ปัญหาเพื่อทำลายกำแพงนี้ที่เรียกว่า DepthJS
ปลั๊กอินในเบราว์เซอร์ซึ่งเปิดใช้งาน Kinect สำหรับ Chrome และ Safari แม้กระทั่งสำหรับไซต์ที่ไม่ได้รับการปรับให้เหมาะกับการใช้งานบน Kinect ในทุกรูปแบบ ขณะนี้ DepthJS อยู่ในขั้นตอนการพัฒนาขั้นต้น แต่ก็คุ้มค่าที่จะติดตาม

04. เกม 3 มิติที่ควบคุมด้วยแป้นเกมของคุณ

คุณเคยลองเล่นเกมเบราว์เซอร์ที่ไม่ใช่ Flash แล้วหรือยัง? ความสามารถด้านกราฟิกนั้นยอดเยี่ยมมากโดยเฉพาะอย่างยิ่งเมื่อคุณเห็นเกมโคลนเช่น Quake

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

คงจะดีไม่น้อยถ้าคุณสามารถเสียบคอนโทรลเลอร์ Xbox เข้ากับพีซีและเริ่มเล่นเกมเบราว์เซอร์ที่คุณชื่นชอบได้หรือไม่? นี่ไม่ใช่วิสัยทัศน์ในอนาคตอีกต่อไปทักทาย Gamepad API!

หากคุณมีเกมแพดอยู่รอบ ๆ โต๊ะของคุณให้เสียบทันทีและสนุกกับเกมบางเกมที่ใช้ Gamepad API อยู่แล้ว การเขียนโปรแกรมตัวควบคุมการป้อนข้อมูลก็เป็นส่วนสำคัญเช่นกันตรวจสอบข้อมูลโค้ดนี้หรือดีกว่านั้นเรียกใช้ด้วยตัวคุณเอง:

div id = "gamepads"> / div>
สคริปต์>
function gamepadConnected (เหตุการณ์) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;

gamepads.innerHTML + = "เชื่อมต่อ Gamepad แล้ว (id =" + gamepadId + ")";
}

window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>

หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ 3 มิติของเบราว์เซอร์โปรดดู Three.js และเครื่องมือจำลอง 3 มิติแบบโอเพนซอร์สของ Jens Arps Ascent ที่สร้างขึ้นด้านบน Mark Hammil ระวังเราอาจต้องการคุณสำหรับภาคต่อของ Wing Commander อีก!

05. เรียกใช้ Flash บน iPad ของคุณ

ในฐานะคนรักมาตรฐานเปิดและแฟนบอยของ Apple ฉันต้องยอมรับว่าฉันอยากจะขอบคุณ Apple จริงๆที่ไม่ใส่ Flash บน iPad และ iPod สิ่งนี้เริ่มต้นการเคลื่อนไหวของการใช้เทคโนโลยีแบบเปิดเช่น HTML5, CSS3 และ JavaScript

ในฐานะพนักงานเอเจนซี่ฉันต้องบอกว่านี่เป็นสถานการณ์ที่แย่มากสำหรับลูกค้าของเรา
พวกเขาส่วนใหญ่ต้องจ่ายเงินสองเท่าสำหรับโฆษณาหรือแคมเปญง่ายๆที่พวกเขากำลังเปิดตัวเพื่อให้มีเนื้อหาเชิงโต้ตอบที่ทำงานใน IE7 หรือ IE8 รุ่นเก่าผ่าน Flash และบนเบราว์เซอร์ที่ทันสมัยตลอดจน iDevices ผ่าน HTML5

การเติมเต็มคุณสมบัติของเบราว์เซอร์รุ่นเก่ามีขอบซึ่งส่วนใหญ่มีชื่อว่าประสิทธิภาพ จึงไม่มีความสามารถในการเรียกใช้ Flash บน iDevices Flashless เหล่านั้น?

แน่นอนว่ามีอย่างใดอย่างหนึ่งและแน่นอนว่ามันสร้างขึ้นใน JavaScript

ส่วนหนึ่งของประวัติศาสตร์: ในปี 2010 Tobias Schneider ได้เปิดตัวห้องสมุดเล็ก ๆ ชื่อ Gordon
ซึ่งอนุญาตให้ไฟล์ SWF ทำงานได้โดยตรงในเบราว์เซอร์ วิธีนี้ใช้ได้ดีกับไฟล์ Flash ขนาดเล็กเช่นโฆษณาที่ใช้ฟังก์ชันได้ถึง Flash เวอร์ชัน 2 เท่านั้น แต่ไม่รวมฟังก์ชันการทำงานระดับสูงขึ้นเลย

เมื่อโทเบียสเข้าร่วมกับ บริษัท UXEBU ของ ueberJS พวกเขาก็เกิดความคิดใหม่
ดังนั้น Bikeshed จึงถือกำเนิดขึ้น Bikeshed นั้นเป็นเฟรมเวิร์กภาพเคลื่อนไหว JavaScript ชนิดหนึ่ง แต่ยังเป็น JavaScript to Flash สำหรับทุกสิ่งที่คุณต้องการให้เป็นคอมไพเลอร์ (ใช้อะแดปเตอร์เพื่อให้คุณสามารถเขียนอะแดปเตอร์สำหรับทุกสิ่งที่คุณต้องการแม้ว่าพฤติกรรมมาตรฐานจะรวบรวม Flash เป็น JavaScript) . มันเข้ากันได้กับ Flash 10 และ ActionScript 3 ดูที่หน้าเว็บเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติมากมายนอกเหนือจากคอมไพเลอร์

06. การเขียนแอพสำหรับสมาร์ทโฟนของคุณ

การเขียนแอปพลิเคชันเนทีฟสำหรับสภาพแวดล้อมโทรศัพท์มือถือเป็นถนนหิน เริ่มต้นด้วยการตัดสินใจว่าคุณต้องการสนับสนุนแพลตฟอร์มใด หากแอปพลิเคชันของคุณทำงานบน iPhone และ iPad อุปกรณ์เคลื่อนที่ที่ใช้ระบบ Android Windows Mobile อุปกรณ์ Blackberry pla ที่ใช้ webOS ... และอื่น ๆ

แต่ละแพลตฟอร์มนี้มี API ของตัวเองและส่วนใหญ่ใช้ภาษาโปรแกรมที่แตกต่างกัน
หากคุณเคยรอดชีวิตจากสงครามเบราว์เซอร์ขอบอกเลยว่านี่เป็นวิธีที่ยากกว่าที่จะเข้ามาได้นักพัฒนาซอฟต์แวร์แทบจะเป็นไปไม่ได้เลยที่จะสร้างแอปพลิเคชันสำหรับแพลตฟอร์มเหล่านี้ทั้งหมดในเวลาและงบประมาณ

แล้วจะทำยังไง? จ้างนักพัฒนาเพิ่มเติมไหม ชาร์จแอพเพิ่มไหม หรือหาแนวทางที่ดีกว่าเพื่อให้แน่ใจว่าฐานรหัสของคุณทำงานบนทุกอุปกรณ์? ในฐานะที่เป็นคุณส่วนใหญ่ฉันต้องการแนวทางสุดท้ายมากกว่า

แต่แอพเหล่านี้ควรสร้างขึ้นในลักษณะใด? แพลตฟอร์มเหล่านี้มีอะไรเหมือนกัน? คุณอาจรู้คำตอบมันคือเว็บเบราว์เซอร์และเป็นเครื่องมือ JavaScript

นั่นคือแนวคิดเบื้องหลัง Apache Cordova ซึ่งรู้จักกันดีภายใต้ชื่อเดิม PhoneGap
Cordova เป็นเฟรมเวิร์ก JavaScript ที่สรุป API ของสภาพแวดล้อมมือถือแต่ละรายการและเปิดเผย JavaScript API ที่เป็นระเบียบเพื่อควบคุมทั้งหมด สิ่งนี้ช่วยให้คุณสามารถรักษาฐานรหัสเดียวซึ่งคุณจะสร้างและปรับใช้บนอุปกรณ์มือถือต่างๆ

ดูแหล่งข้อมูลที่นี่เพื่อดูวิธีใช้ Cordova เพื่อสร้างแอพมือถือเตะตูดที่คุณสร้างครั้งเดียวและจะทำงานได้ทุกที่

07. เรียกใช้ Ruby และ Python ในเบราว์เซอร์ของคุณ

Mozilla ซึ่งเป็น บริษัท ที่อยู่เบื้องหลังเบราว์เซอร์ Firefox ที่มีชื่อเสียงมีพนักงานจำนวนมากซึ่งแน่นอน หนึ่งในนั้นคือ Alon Zakai วิศวกรของทีมวิจัย Mozilla ซึ่งสร้างเครื่องมือประหลาดที่เรียกว่า Emscripten

Emscripten ช่วยให้คุณสามารถใช้ bitcode LLVM ซึ่งสามารถสร้างจากไลบรารีที่ใช้ C / C ++ ไปยัง JavaScript ทำได้โดยการรวบรวมไลบรารีเป็นรหัสบิตจากนั้นรับโค้ดบิตนั้นและแปลงเป็น JavaScript เรียบร้อย แต่ฉันจะทำอย่างไรกับสิ่งนี้คุณอาจถามตัวเอง?

ฉันมีคำถามโต้แย้งสำหรับคุณ: คุณเคยได้ยินวลี "การใช้ CoffeeScript และ Prototype ใกล้เคียงที่สุดที่คุณจะได้รับจากการเรียกใช้ Ruby ในเบราว์เซอร์" หรือไม่? ไม่? ไม่ต้องกังวลเพราะนี่ไม่เป็นความจริงอีกต่อไป

ด้วย Emscripten คุณสามารถใช้แหล่งที่มาของ Ruby แปลงเป็น JavaScript และvoilàให้ Ruby ตัวจริงทำงานในเบราว์เซอร์ของคุณได้! แต่สิ่งนี้ใช้ไม่ได้กับ Ruby เท่านั้นตัวอย่างเช่น Python ก็ถูกใส่รหัสด้วยเช่นกัน

หรือตรวจสอบตัวถอดรหัสบรอดเวย์ในเบราว์เซอร์ h.264 นั่นคือไลบรารี C ++ แบบ emscriptened!

ไปที่ repl.it เพื่อดูภาษาโปรแกรมสองสามภาษา (รวมถึง Ruby และ Python) ที่ทำงานในเบราว์เซอร์ของคุณ!

08. การเขียนโปรแกรมเดสก์ท็อป OS ที่เป็นอิสระ

เราได้พูดคุยเกี่ยวกับการกำหนดเป้าหมายแพลตฟอร์มมือถือหลายแพลตฟอร์มด้วยความช่วยเหลือของ Apache Cordova มาก่อน ไม่น่าแปลกใจที่ JavaScript ไม่เพียง แต่ใช้เพื่อกำหนดเป้าหมายแพลตฟอร์มมือถือเท่านั้นเพื่อนเก่าของเราคอมพิวเตอร์เดสก์ท็อปก็สามารถจัดการได้เช่นกัน

โซลูชันแรกมาจากพวกของ Appcelerator ที่มี Titanium Desktop Suite และจาก Adobe ซึ่งเป็นแพลตฟอร์ม Air ที่ใช้กันอย่างแพร่หลาย

แต่ในฐานะผู้ชื่นชอบโอเพ่นซอร์สที่เราทุกคนต่างก็เป็นเทคโนโลยีที่ใช้ Node.js ที่เปิดกว้างมากขึ้นคือสิ่งที่เรากำลังมองหา พบกับ app.js! app.js เป็นโปรแกรมสร้างเว็บเทคโนโลยีแบบเปิดและโปรแกรมสร้างเดสก์ท็อปที่ใช้ Node.js ซึ่งช่วยให้เราเขียนโปรแกรมเดสก์ท็อปจริงด้วยการเข้าถึงระบบไฟล์การควบคุมหน้าต่างและอื่น ๆ เราสามารถใช้ API ของ Node ข้ามแพลตฟอร์มที่เสถียรและสร้าง UI ของซอฟต์แวร์ด้วย HTML และ CSS เช่นเดียวกับสิ่งใหม่ที่ร้อนแรงที่สุดในรายการนี้ที่นี่

app.js เป็นโปรเจ็กต์ที่ค่อนข้างใหม่ดังนั้นในตอนนี้จึงรองรับเฉพาะ Windows และ Linux เท่านั้น แต่ตามรายชื่อส่งเมลการสนับสนุน Mac กำลังมาถึง

09. เรียกใช้เว็บเซิร์ฟเวอร์

ทุกวันนี้คุณจะไม่ทำให้ใครตกใจเมื่อบอกพวกเขาว่าเว็บไซต์ของคุณกำลังให้บริการโดยเว็บเซิร์ฟเวอร์ที่ใช้ JavaScript หากคุณนึกย้อนกลับไปเมื่อสองหรือสามปีที่แล้วและบอกกับนักพัฒนาเว็บในลักษณะเดียวกันพวกเขาอาจจะหัวเราะเยาะคุณหรือแย่กว่านั้น

แต่ด้วยความสำเร็จอย่างไม่น่าเชื่อของ Node.js นี่เป็นโชคดีที่ยังห่างไกลจากตอนนี้ ไม่เพียง แต่ไม่สร้างความประหลาดใจให้กับผู้คนอีกต่อไปเนื่องจาก Node.js เป็นแบบอะซิงโครนัสนั้นมีประสิทธิภาพในการทำงานโดยเฉพาะอย่างยิ่งเมื่อต้องเผชิญกับปัญหาของการเชื่อมต่อแบบขนานจำนวนมาก ไม่เพียง แต่ประสิทธิภาพของมันเท่านั้นที่จะระเบิด แต่ API ที่เรียบง่ายอย่างแท้จริงยังดึงดูดนักพัฒนาจำนวนมากอีกด้วย ลองดูตัวอย่าง "Hello World" จาก Node world ไม่ใช่แค่การพิมพ์ "Hello World" บนหน้าจอเท่านั้น แต่ยังเป็นเว็บเซิร์ฟเวอร์ http!

var http = ต้องใช้ ('http');
http.createServer (ฟังก์ชัน (req, res) {
res.writeHead (200, {'Content-Type': 'text / plain'});
res.end ('สวัสดีชาวโลก n');
}). ฟัง (1337, ’127.0.0.1’);

หากคุณไม่หลงไปกับความเรียบง่ายนี้ฉันก็ช่วยคุณไม่ได้เช่นกัน

หนึ่งในส่วนที่ดีที่สุดของความนิยม Node (หรือโฆษณา) คือ บริษัท ใหญ่ ๆ เช่น Microsoft ให้การสนับสนุนจริง ๆ เช่นใน Azure Cloud Services!

10. การทำเว็บไซต์และการสกรีนช็อต

สุดท้ายนี้ แต่ไม่ท้ายสุดเรามาดูโปรเจ็กต์ที่ฉันชอบเป็นการส่วนตัวที่ปล่อยให้ฉันรันการทดสอบ QUnit แบบไร้หัวในบรรทัดคำสั่ง PhantomJS เป็นเบราว์เซอร์ที่ใช้ WebKit แบบไม่มีหัวพร้อมด้วย API ที่ใช้ JavaScript (หรือ CoffeScript) ที่เป็นระเบียบ

แต่การทดสอบ JavaScript และ DOM ไม่ใช่กรณีการใช้งานเพียงอย่างเดียวสำหรับ Phantom สิ่งที่ทำให้ฉันทึ่งจริงๆคือความสามารถในการขูดเว็บไซต์และให้คุณจับภาพหน้าจอได้!
ใช่คุณอ่านถูกต้องด้วย Phantom คุณสามารถส่งออกหน้าเว็บในรูปแบบกราฟิกที่แตกต่างกันและแน่นอนว่ามันง่ายพอ ๆ กับการขโมยขนมจากเด็กทารก

ลองมาดูสคริปต์ที่ทำสิ่งนี้:

var page = หน้าเว็บใหม่ ();
page.open ("http://google.com", ฟังก์ชัน (สถานะ) {
page.render ('google.png');
phantom.exit ();
});

นั่นคือทั้งหมดที่คุณต้องสร้างภาพหน้าจอและเนื่องจากเป็น JavaScript คุณจึงสามารถใช้ jQuery และจัดการเนื้อหาของหน้าก่อนที่จะจับภาพหน้าจอได้!

รอ! ยังมีอีก...

ดังนั้นฉันหวังว่าคุณจะประหลาดใจอย่างที่ฉันเป็นเมื่อฉันค้นพบเครื่องมือเหล่านี้ทั้งหมด บทความนี้เพิ่งขีดข่วนพื้นผิวของสิ่งที่เป็นไปได้ด้วย JavaScript ในปัจจุบัน มีอะไรอีกมากมายเช่น IDE ที่เขียนด้วย JS Cloud9 หรือสิ่งที่มีความปลอดภัยสูงที่ทำด้วย (บัตรเครดิตของคุณสร้างขึ้นด้วย JavaScript)

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

บทความสำหรับคุณ
ความลับในการออกแบบ Infographic: 10 เคล็ดลับสำหรับการแสดงข้อมูลแบบไดนามิก
อ่าน

ความลับในการออกแบบ Infographic: 10 เคล็ดลับสำหรับการแสดงข้อมูลแบบไดนามิก

กุญแจสำคัญในการสร้างอินโฟกราฟิกที่น่าจดจำคือการเข้าใจวัตถุประสงค์ คุณพยายามทำอะไรเพื่อให้บรรลุ? ดังที่ Matthew charpnick ผู้ร่วมก่อตั้ง Elefint De ign ชี้ให้เห็นว่า: "ใช้เวลาพอสมควรในการค้นหาผู้ช...
ศิลปะแห่งปกนิตยสาร: 20 ตัวอย่างที่น่าทึ่งจากปี 2012
อ่าน

ศิลปะแห่งปกนิตยสาร: 20 ตัวอย่างที่น่าทึ่งจากปี 2012

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

หกวิธีในการทำให้ผู้คนจ่ายเงินสำหรับเนื้อหาของคุณ

บทความนี้ปรากฏครั้งแรกในนิตยสาร. net ฉบับที่ 230 ซึ่งเป็นนิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบและพัฒนาเว็บไซต์มนต์ "เนื้อหาควรจะฟรี" ได้แสดงถึงอุปสรรคสำคัญในอุตสาหกรรมเนื้อหาดิจิทัล อย่า...