Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/02"

From Publication Station
 
(21 intermediate revisions by the same user not shown)
Line 1: Line 1:
= Javascript (JS) =
= Javascript (JS) =
==Resources ==
* Code Academy JS basic course: https://www.codecademy.com/learn/javascript
* JS reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
* '''Code Academy''' jQuery basic course: https://www.codecademy.com/en/tracks/jquery
* '''Try jQuery''' http://try.jquery.com/


== what is JS?==
== what is JS?==
Line 9: Line 18:
* Javascript - (artificial) intelligence.
* Javascript - (artificial) intelligence.


== JS <nowiki>=</nowiki> a language==
==You can use JS to==
Javascript is a programming language.
* change HTML content
* change element attributes
* change an element style
* retrieve the window size
* make a timer
* validate data


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==
== JS in a HTML page==
Javascript appears '''inside''' the html page inside the <code><script></code> tag  
Javascript appears '''inside''' the html page inside the <code><script></code> tag  
Line 24: Line 36:
   <body>
   <body>
     <h1>starting javascript-ing</h1>
     <h1>starting javascript-ing</h1>
     <p>within the script tag</p>
     <p id='greetings' >within the script tag</p>


     <script>
     <script>
      alert("hello world! Greetings from javascript");
 
    alert('Hello Javascript!');
                     
     </script>
     </script>


Line 72: Line 86:
Essential to prototype, and debug your JS code.
Essential to prototype, and debug your JS code.


<noinclude>
==Data types==
==Data types==
JS has essential data-types, that is types of information: numbers, strings, booleans and lists
JS has essential data-types, that is types of information: numbers, strings, booleans and lists
Line 94: Line 112:
===lists or arrays===
===lists or arrays===
List or arrays are simply collections of multiple "things", which can be numbers, strings or booleans. And are always surrounded by <nowiki>[ ]</nowiki> (square brackets).
List or arrays are simply collections of multiple "things", which can be numbers, strings or booleans. And are always surrounded by <nowiki>[ ]</nowiki> (square brackets).
<code>["apples", "bananas", 14, 0, false]<code> A list containing numbers, strings and booleans
 
** lists can be: asked what it contains in each position <code>["apples", "bananas", 14, 0, false][0]<code>
<code>["apples", "bananas", 14, 0, false]</code> A list containing numbers, strings and booleans
** sorted (put in order) <code>["apples", "bananas", 14, 0, false].sort()<code> or reversed <code>["apples", "bananas", 14, 0, false].reverse()<code>
 
** added a new item <code>["apples", "bananas", 14, 0, false].push('new item')<code>
lists can be:  
** removed the last item <code>["apples", "bananas", 14, 0, false].pop()<code>, or first item <code>["apples", "bananas", 14, 0, false].shift()<code>
* asked what it contains in each position <code>["apples", "bananas", 14, 0, false][0]</code>
* sorted (put in order) <code>["apples", "bananas", 14, 0, false].sort()</code> or reversed <code>["apples", "bananas", 14, 0, false].reverse()</code>
* added a new item <code>["apples", "bananas", 14, 0, false].push('new item')</code>
* removed the last item <code>["apples", "bananas", 14, 0, false].pop()</code>, or first item <code>["apples", "bananas", 14, 0, false].shift()</code>
 
 
== 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.
 
<source lang="javascript">
var a = 10;
var b = 2;
var c = a * b;
 
var mylist = ["bananas", "apples", a];
mylist.push(c);
 
var bananas = mylist[0]+a;
</source>
 
==Example==
A Javascript clock
 
<source lang="html4strict">
<!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>
 
</source>
 
 
==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 ==
 
<source lang="html4strict">
<!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>
</source>
</noinclude>

Latest revision as of 07:42, 28 November 2017

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.



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

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>
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q2/02&oldid=6787’