প্রিয় বন্ধুরা, আশা করি ভালো আছেন। আজ থেকে শুরু করলাম "Javascript Tutorial"। প্রথমেই জেনে নিন জাভাস্ক্রিপ্ট কি? জাভাস্ক্রিপ্ট একটা জনপ্রিয় স্ক্রিপ্টিং ল্যাঙ্গুয়েজ, যা ওয়েব পেজের ইন্ট্রকটিভিটি ও ফাংশনালিটি বৃদ্ধি, ফরম ভেলিডেশন, ব্রাউজার নির্দেশ, সময় ও তারিখ নির্দেশ ইত্যাদি কাজে ব্যবহৃত হয়। জাভাস্ক্রিপ্ট ক্লায়েন্ট এবং সার্ভার উভয় দিকেই কাজ করতে পারে। তাই ইহা ইউজারের নিকট থেকে ডাটা নিয়ে প্রয়োজনীয় প্রসেস সম্পন্ন করে সার্ভারে প্রেড়ণ করতে সক্ষম। জাভাস্ক্রিপ্ট ECMA ইন্টারন্যশনাল অর্গানাইজেশন কতৃক উদ্ভাবিত এবং তৈরি করেছিলেন ব্রান্ডন এইচ (Brendan Eich)। জাভাস্ক্রিপ্ট এর অফিসিয়াল নাম ছিল ECMAScript। জাভাস্ক্রিপ্ট দেখতেঃ
<html> <head> <title>Avro Abir</title> <style> body{background: #FFF} </style> <script type="text/javascript"> </script> </head> <body> <form> <input type ="button" value ="Click Now" onClick="alert('♪Welecome Friend')"> </form> </body> </html>
কিভাবে offline এ রান করবেন? প্রথমে নোটপ্যাড ++ ওপেন করুন। তারপর উপরে কোডগুলো পেস্ট করুন। File name: index.html, Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে ওপেন করুন। অথবা online এ রান করবেন? অনলাইন এ রান করার অনেক উপায় আসে। আপনি ওয়াপকাতে রান করতে পারবেন। ওয়াপকা মোবাইল সাইট এবং রান করা সহজ। লাইট জাভাস্ক্রিপ্টঃ
<!DOCTYPE html> <html> <body> <h1> এটা মুলত চেন্স ইমেজ জাভাস্ক্রিপ্ট</h1> <img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"> <p>Click the light bulb to turn on/off the light.</p> <script> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { image.src="http://www.w3schools.com/js/pic_bulboff.gif"; } else { image.src="http://www.w3schools.com/js/pic_bulbon.gif"; } } </script> </body> </html>
Front & CSS জাভাস্ক্রিপ্টঃ
<!DOCTYPE html> <html> <body> <h1>Text </h1> <p id="demo">JavaScript can change the style of an HTML element.</p> <script> function myFunction() { var x = document.getElementById("demo"); x.style.fontSize = "25px"; x.style.color = "red"; } </script> <button type="button" onclick="myFunction()">Click Me!</button> </body> </html>
<!DOCTYPE html> <html> <body> <h1>জাভাস্ক্রিপ্ট Validate ইনপুট</h1> <p>Please input a number between 1 and 10:</p> <input id="numb" type="number"> <button type="button" onclick="myFunction()">Submit</button> <p id="demo"></p> <script> function myFunction() { var x, text; // Get the value of the input field with id="numb" x = document.getElementById("numb").value; // If x is Not a Number or less than one or greater than 10 if (isNaN(x) || x < 1 || x > 10) { text = "Input not valid"; } else { text = "Input OK"; } document.getElementById("demo").innerHTML = text; } </script> </body> </html>
আমাদের ফেসবুক পেজ এ লাইক দিতে পারেন। আজ আর নয়।
আমি অভ্র আবির। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 9 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 3 টি টিউন ও 10 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
এই টিউটরিয়াল পরে নতুন রা কিছুই বুজবেনা । বিস্তারিত লিখলে ভাল হত।