Courses/Design & Technique-Essential Web Design/Q2/03

From Publication Station
Jump to navigation Jump to search


Javascript (JS)

Resources

what is JS?

JS is a simple programming language that runs inside webpages when the pages are loaded in the users' browser.

In the complex organism that can be a web-page, you have:

  • HTML - content & structure
  • CSS - look
  • Javascript - (artificial) intelligence.

You can use JS to

  • change HTML content
  • change element attributes
  • change an element style
  • retrieve the window size
  • make a timer
  • validate data

JS in a HTML page

Javascript appears inside the html page inside the <script> tag

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>starting javascript-ing</h1>
    <p id='greetings' >within the script tag</p>

    <script>
   
    alert('Hello Javascript!');
                       
    </script>

  </body>
</html>

JS in a separate file

The JS is imported from another file.

HTML file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <script src="hello.js"></script>

  </head>
  <body>
    <h1>starting javascript-ing</h1>
    <p>within the script tag</p>
  </body>
</html>

JavaScript file: hello.js

alert("hello world! Greetings from javascript");

making statements

JS statements are like phrases, that do very specific tasks.

Each statement has to be terminated with ";"

Like the above alert('Welcome to this page');

the browser console

JS-console.png

Essential to prototype, and debug your JS code.




JQuery