Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/02"
Line 1: | Line 1: | ||
<includeonly> | |||
= Javascript (JS) = | = Javascript (JS) = | ||
Line 78: | Line 80: | ||
Essential to prototype, and debug your JS code. | Essential to prototype, and debug your JS code. | ||
</includeonly> | |||
==Data types== | ==Data types== |
Revision as of 06:36, 27 November 2017
Data types
JS has essential data-types, that is types of information: numbers, strings, booleans and lists
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 "I am a string".includes("I am");
isFinite(10/0)
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()
Variables
So far we have been using these various types of data, yet we cannot do much with them, we cannot manipulate them or reuse them, without storing them.
For that we have variables, like little memory cells, that hold the information with give it to it.
var a = 10;
var b = 2;
var c = a * b;
var mylist = ["bananas", "apples", a];
mylist.push(c);
var bananas = mylist[0]+a;
Example
A Javascript clock
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Time is</h1>
<h2 id="time"></h2>
<script>
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
console.log(hours, minutes, seconds);
<!-- add date to page -->
var h2 = document.getElementById('time');
h2.innerHTML=( hours.toString() + ":" + minutes.toString() + ":" + seconds.toString());
</script>
</body>
</html>
Resources
- Code Academy JS basic course: https://www.codecademy.com/learn/javascript
- JS reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Javascript cocktail example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>starting javascript-ing</h1>
<p id="content">within the script tag</p>
<script>
var min = 0;
var max = 2;
var random = Math.floor(Math.random()*(max - min + 1)) + min;
var bottle=["rum","gin","vodka"][random];
var herb=["mint","coriander","lime"][random];
var powder="sugar";
var cool="ice blocks";
var d = new Date();
var hour = d.getHours();
var min = d.getMinutes();
var content = document.getElementById("content");
content.innerHTML = bottle + " with " + herb +
"<br/>At "+hour+" : "+min+"?" ;
</script>
</body>
</html>