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

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

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()