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

From Publication Station

Javascript (JS)

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.

JS = a language

Javascript is a programming language.

Like natural languages (English, Dutch, Mandarin, etc) it has rules, words, and special characters (like {,[,$), each with specific meanings withing the language, which we'll have to follow in order to talk in JS.

JS in a HTML page

<script> alert('Welcome to this page'); </script>

  • external Javascript file file

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.

Data types

JS has 4 essential data-types, that is types of information:

  • Numbers: both positive or negative, integer or floating. E.g. 1, 0.2, -10
    • Numbers' operations: Numbers can be added, subtracted, multiplied, and perform a number of other math operations. 1/3
  • Strings: essentially words or sentences. They are easy identified since they are inside quotation-marks (" or '). E.g. "I am a string", 'so am I', "900 - numbers inside quotations are also strings"
    • Strings can be added, "string " + "is added";
    • change to upper/lower case "string".toUpperCase();
    • asked it includes a given string "string".includes("ing");
    • asked how long is the string "string".length
  • Booleans: consists of simply two values: true or false
  • lists or arrays

List or arrays are simply collections of multiple "things", which can be numbers, strings or booleans. And are always surrounded by [ ] (square brackets). ["apples", "bananas", 14, 0, false] A list containing numbers, strings and booleans

    • lists can be: asked what it contains in each position ["apples", "bananas", 14, 0, false][0]
    • sorted (put in order) ["apples", "bananas", 14, 0, false].sort() or reversed ["apples", "bananas", 14, 0, false].reverse()
    • added a new item ["apples", "bananas", 14, 0, false].push('new item')
    • removed the last item ["apples", "bananas", 14, 0, false].pop(), or first item ["apples", "bananas", 14, 0, false].shift()
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q2/02&oldid=2235’