AWF - Introduction to JavaScript [LESSON]
Introduction to JavaScript
If you want to be a web developer, then you must learn JavaScript. In this course we are not going in depth with JavaScript, but it is important to web development, and you do need to know some of it at least. Websites layer the 3 parts like this: the HTML is the structure of the site; the CSS is the design and JavaScript is the dynamic behavior.
The 3 Parts of Web Development
What is JavaScript?
JavaScript is a scripting language that you can use on the front-end and back-end of a website to create dynamic websites. It can update content, control multimedia, animate images, do math problems, and a whole lot more. You can easily add JS to make workable buttons on your page, allow users to enter data, or modify your HTML and CSS. There are a lot of ways to learn JavaScript, including using Code.org, Replit, Codecademy, W3Schools, and other online courses. JavaScript is free, you don't have to download anything to use it, you create it in your text editor. JavaScript is the default scripting language in HTML.
JavaScript is a programming language, the programmer writes algorithms, which are basically instructions, in statements. Those statements are entered using the <script></script> tag. Script tags can be placed in the <head> or in the <body> sections of your HTML page. You can also have a separate page that is linked on your HTML page. This would be a JavaScript page and you could call it something like "script.js". It must have the .js file extension so the browser will know it is JavaScript. Then you'd replace the <script> element with <script src="script.js" defer></script>. This tells the browser to defer to the JS page.
JavaScript uses functions, which are JavaScript codes that are "called" for with events, like when you click a button, and something happens. Here is some script that could be used for making a clickable button that can change the paragraph when you click the button.
|
JavaScript Example in Head of HTML Document |
|---|
|
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("js_demo").innerHTML = "You clicked the button!"} </script> </head> <body> <h2>Demo JavaScript in Head</h2> <p id="js_demo">This is a sentence you can change by clicking a button.</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html> |
The Java Script Video below demonstrates to the student how the JavaScript is entered and how it works.
In this code, you have a function that is saying when you click the button a new paragraph will be called for stating "You clicked the button!". Obviously, you wouldn't want code just to say something like that, but you could have it do anything. It could change the wording in an element, it can change the appearance of an element, such as going from one picture to another picture or changing the font and color.
You can put your JS coding in a text editor on your HTML page or as an external page. To add JavaScript to a site using a website builder (GUI editor) you'll need to determine how to add code. Most builders have a section to allow you to customize your code, this is where you can customize your CSS and add JS.
[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION