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

From Publication Station
Line 15: Line 15:
   
   
== JS in a HTML page==
== JS in a HTML page==
Javascript appears '''inside''' the html page inside the <code><script></code> tag
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>starting javascript-ing</h1>
    <p>within the script tag</p>


<script>
    <script>
alert('Welcome to this page');
      alert("hello world! Greetings from javascript");
</script>
    </script>


* external Javascript file file
  </body>
</html>
</source>
 
==JS in a separate file==
The JS is imported from another file.
 
'''HTML file:'''
<source lang="html4strict">
<!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>
</source>
 
'''JavaScript file: hello.js'''
 
<source lang="javascript">
alert("hello world! Greetings from javascript");
</source>


== making statements ==
== making statements ==

Revision as of 13:34, 16 November 2015

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

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>within the script tag</p>

    <script>
      alert("hello world! Greetings from 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 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 "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()
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q2/02&oldid=2237’