JavaScript. Jef De Smedt Beta VZW

Size: px

Start display at page:

Download "JavaScript. Jef De Smedt Beta VZW"

Leo Collins
6 years ago
Views:

1 JavaScript Jef De Smedt Beta VZW

2 Getting to know Beta VZW: Association founded in 1993 Computer courses for the unemployed and for employees Cevora VZW/Cefora ASBL 09:00u-12:30u 13:00u-16:30u

3 Getting to know you Name Role/Function in your organisation Experience with HTML/CSS Programming languages JavaScript Expectations

4 Overview Introduction Basic elements of JavaScript Arrays Window object Document Object Model Forms Events Objects Introduction to TypeScript

5 Introduction: what is JavaScript Scripting language, 1995, Brendan Eich (Netscape Communications Corporation) Ease integration between Java applets and HTML page <html> Java applet Java applet: Java program in browser Richer user interface Compare with Flash, Silverlight Can only be used when Java is installed locally </html>

6 Introduction: what is JavaScript? Scripting language, 1995, Brendan Eich (Netscape Communications Corporation) Ease integration between Java applets and HTML page Dynamic HMTL pages

7 Introduction: what is JavaScript? Scripting language, 1995, Brendan Eich (Netscape Communications Corporation) Ease integration between Java applets and HTML page Dynamic HMTL pages AJAX (Asynchronous JavaScript and XML) XML/JSON Web page Server

8 Introduction: history Same year(1995): Microsoft, own version (Jscript) Compatibility problems 1997: standard, European Computer Manufacturers Association EcmaScript = JavaScript language without browser support Implementations of EcmaScript: JavaScript, JScript, ActionScript, Most browsers implement the most important features of EcmaScript 6

9 Introduction: JavaScript = bad programming? Not a real programming language Incompatibilities between different browsers Gained popularity because of new libraries and frameworks (JQuery, Modernizr, AngularJS, React, Backbone, ) Also more popular on the server side: node.js

10 JavaScript vs Java JavaScript Case sensitive { } => blocks End statement with semicolon; Declaration of variables: var i = 42; var name = John ; var isvalid = true; Dynamically typed var i = 42; i = John ; Java Case sensitive { } => blocks End statement with semicolon; Declaration of variables: int i = 42; String name = John ; boolean isvalid= true; Statically typed int i = 42; i = John ; The difference between Java and JavaScript is as big as the difference between ham and hamster

11 Write JavaScript code (in a browser) JavaScript code between <script> tags Attribute type= text/javascript is not necessary anymore (default in HTML5) <!DOCTYPE html> <html> <head> <title>javascript</title> </head> <body> </body> </html> <script> console.log( Hi world ); </script>

12 Write JavaScript code (in a browser) Index.html <!DOCTYPE html> <html> <head> <title>javascript</title> <script src= index.js ></script> </head> <body> </body> </html> Index.js console.log( hi world ); Closing script tag is mandatory in HTML5

13 Write JavaScript code (in a browser) Press F12 (developer tools) Choose Console tab => output of console.log.

14 Noscript element The contents of the <noscript>-element is shown when the browser does not support JavaScript <script> and <noscript> are mutually exclusive <html> <head> </head> <body> <noscript>use a browser that supports JavaScript</noscript> </body> </html>

15 Noscript element <noscript> can be used in <head> and <body> When used in <head> it should only contain <link>, <meta> and <style>elements <noscript> can be used in graceful degradation => when taking away JavaScript possibilities the page should still function(more or less) Nowadays: progressive enhancement => start with a page that works without JavaScript and add functionality that makes the page work better.

16 JavaScript types var i = 42; // number (integer, floating point) var name = John ; //string var isvalid = true; // boolean var value; //undefined var empty = null; //null var list = [ John, Paul, Ringo, George ]; //object (array) var person = {name: John, address: 9 Newcastle road }; //object (EcmaScript 6) var s = new Symbol( key ); //symbol

17 Working with types JavaScript uses dynamic typing: var i = 7; i = John ; JavaScript uses type coercion var number = ; console.log(number); //42 See the result of coercion: Number( 4 ); //4 Boolean(1); //true Boolean(null); // false String(4); // 4 The number 4 is coerced into a string: The plusoperator for strings means: concatenate

18 Prompting and alerting <!DOCTYPE html> <html> <head> <title>prompting and alerting</title> <script> var number1 = prompt("give first number"); var number2 = prompt("give second number"); var sum = number1 + number2; alert(sum); </script> </head> <body> </body> </html> Prompt-function returns a string

19 Converting to integer <!DOCTYPE html> <html> <head> <title>prompting and alerting (int)</title> <script> var number1 = prompt("give first number"); number1 = parseint(number1); var number2 = prompt("give second number"); number2 = parseint(number2); var sum = number1 + number2; alert(sum); </script> </head> <body> </body> </html> parseint converts a string into a number. (faster than Number() in IE and Firefox. See The fastest way to convert a String into a number in Chrome: number1 = +number1;

20 Document.write <!DOCTYPE html> <html> <head> <title>prompting and alerting (document.write)</title> </head> <body> </body> </html> <script> var number1 = prompt("give first number"); number1 = parseint(number1); var number2 = prompt("give second number"); number2 = parseint(number2); var sum = number1 + number2; document.write(number number2 + = +sum); </script> document.write writes the argument in de body of the HTML document

21 JavaScript arithmetic/string operators Operator Description Example + Adds two numbers var n = 6 + 5; //11 + Concatenates two strings var n = ; // 65 - Subtracts two numbers var n = 6 5; // 1 * Multiplies two numbers var n = 6 * 5; // 30 / Divides two numbers var n = 6 / 5; // 1.2 % Takes the modulo (remainder of division) var n = 6 % 5; // 1 ++ Increment operator var n = 6; ++n; //7 -- Decrement operator var n = 6; n--;// 5

22 JavaScript assignment operators Operator Description Example = Assigns a value to another value var a=6, b=8; // a is equal to 6, b is equal to 8 += Adds a value to a variable var a=6; var a += 3;//9 (a=a+3) -= Subtracts a value from a variable var a=6; var a -= 3; //4 (a=a-3) *= Multiply a value and a variable var a=6; var a*= 3; //18 (a=a*3) /= Divides a variable by a value var a=6; var a/=3; // 2 (a=a/3)

23 Greetings

24 Age

25 People

26 If statement if (test_that_evaluates_to_true_or_false) { code_that_will_be_executed_when_test_is_true } if (test_that_evaluates_to_true_or_false) { code_that_will_be_executed_when_test_is_true } else { } code_that_will_be_executed_when_test_is_false

27 If statement example var now= new Date(); var hour = now.gethours(); if (hour < 12){ alert( Good morning"); }else{ alert( Good afternoon"); }

28 If statement example var now = new Date(); var hour = now.gethours(); if (hour == 9){ document.write( Around nine: coffee time"); }else if (hour==12) { document.write( Between twelve and one: everyone is gone"); }else if (hour == 17){ document.write( Seventeen?: bring in the caffeine"); }else{ document.write( Time to work"); }

29 JavaScript equality operators Operator Description Example == Compares two values for equality var a=7, b= 7 ; var test = a == b; //true === Compares two values and their types for equality var a=7, b= 7 ; var test = a === b;//false!= Compares two values for inequality var a=7, b= 7 ; var test = a!= b; //false!== Compares two values and their types for inequality var a=7, b= 7 ; var test = a!== b; //true

30 JavaScript comparison operators Operator Description Example < Less than var a=7, b=8; var test = a < b; //true > Greater than var a=7, b=6; var test = a > b;//true <= Less than or equal var a=7, b=7; var test = a <= b; //true >= Greater than or equal var a=7, b=7; var test = a>= b; //true Instanceof Is Object of certain type var d = new Date(); var test = d instanceof Date; // true

31 JavaScript logical operators Operator Description Example && And (both must be true in order for the result to be true) Or (At least one must be true in order for the result to be true)! Not (true becomes false and false becomes true) var a=true, b=false; var test = a && b; //false var a=true, b=false; var test = a b;//true var a=true; var test =!a; //false

32 Profit/loss What do you do when income equals expenses?

33 What is your name? An empty string in JavaScript: or (two single quotes)

34 Old enough to visit website(at least 18) Can you write it in such a way that it will still work correctly next year (i.e. not only in 2017?)

35 Switch statement switch(value) { case n: code_to_execute_when_value_equals_n break; case m: code_to_execute_when_value_equals_m break; default: code_to_execute_in_all_other_cases }

36 Switch statement example var now = new Date(); var hour = now.gethours(); switch(hour){ } case 9: case 12: case 18: default: document.write( Around nine: coffee time"); break; document.write( Between twelve and one: everyone is gone"); break; document.write( Seventeen?: bring in the caffeine"); break; document.write( Time to work"); Just an extra question: does a switch use == or === for equality? Try it out.

37 Calculator This should also work for operators: -, / and *. When the user chooses a non existing operator the program should show:

38 While statement while(test_that_evaluates_to_true_or_false) { code_to_execute_as_long_as_test_is true //do not forget to change the outcome of the test }

39 While statement example var sum = 0; var n = parseint(prompt( Give number (<0 to stop ); while (n >= 0) { sum = sum + n; n = parseint(prompt( Give number (<0 to stop"); } document.write( The sum equals " + sum);

40 Name is required

41 For statement for(initial;test;change) { code_to_execute } Is the same as Initial while(test) { code_to_execute change }

42 For statement example The following while: var i = 0; while (i < 3){ } console.log(i); i++; Is the same as this for for(var i=0;i<3;i++) { console.log(i); }

43 Arrays Arrays are lists of items var list = [ John, Paul, George, Ringo ]; An item in an array can be accessed by using the index (zero-based): var item = list[0];// John Number of elements: length var n = list.length;//4 Using a for-loop: for (var i=0; i<list.length;i++){ console.log(list[i]); }

44 Simple Array functions Function Description Example indexof(element) join(separator) lastindexof(element) pop() push(element) Returns the position of the first occurence of an element in an Array (not found: -1) Joins the elements into a string. Default separator is comma Returns the position of the last occurence of an element in an Array (not found: -1) Removes the last element of the array and returns it Adds an element to the end of an array and returns the length var l = [ John, Paul, Ringo, George ]; var n = l.indexof( John );//0 var l = [ John, Paul ]; var n=l.join();// John,Paul var l = [ John, Paul, Ringo, George ]; var n = l.lastindexof( John );//0 var l = [ John, Paul ]; var n=l.pop();//n= Paul, l=[ John ]; var l=[ John ]; var n=l.push( Paul );//n=2, l=[ John, Paul ] reverse() Reverse the order of the elements var l=[ John, Paul ]; l.reverse(); //[ Paul, John ] sort() Sorts the element of an array var l=[ Paul, John ]; l.sort();//[ John, Paul ]

45 Example of for and array function <!DOCTYPE html> <html> <head> <title>for+array example</title> <script> var list = []; for (var i=0;i<3;i++) { var name = prompt("give name " + (i+1)); list.push(name); } document.write(list.join(", ")); </script> </head> <body> </body> </html>

46 Create an ordered(ol) list

47 Licence plates What to do when the licence plate was not found?

48 Working with strings Let us start with an example var text = prompt("give some text"); var counter = 0; for (var i=0;i<text.length;i++){ } if (text.charat(i) == 'i') counter ++; document.write( The text contains the character \"i\" " + counter + " times");

49 String functions Function Description Example length charat(position) Returns the number of characters (length is not a function) Returns the character at the specified position(zero based) var text= John ; var n = text.length; //4 var text= John ; var c = text.charat(1): // o includes(text) Returns true when text is part of the string var text= John; var t = text.includes( oh );//true indexof(text) lastindexof(text) slice(start, end) split(separator) Returns the first position of text. (or -1 if text is not found) Returns the last position of text. (or -1 if text is not found) Returns the part of the string that starts at start and ends at end (not included) Splits the string on the separator and returns an array with the substrings var text= Joohn ; var i = text.indexof( o );//1 var text= Joohn ; var i = text.lastindexof( o );//2 var text= John ; var n = text.slice(1, 2);// o var text= John,Paul ; var l = text.split(, );//[ John, Paul ]

50 Draw square (sort of)

51 Functions Blocks of JavaScript code that can be used ( called ) in a script There are existing functions (e.g. document.write(), prompt()) but we can also declare them ourselves function name_of_the_function(arguments_of_the_function) { code_for_the_function } Example function sum(number1, number2) { return number1 + number2; }

52 Calling functions To use a function, we have to call it: alert( Hi all ); To use our sum-function: var result = sum(1,2); function sum(number1, number2) { 3 <= return number1 + number2; } 1 2

53 Example of a function <script> Valid contains </script> var text = prompt("give "); if (isvalid (text)){ document.write(text + " is a valid address."); } else { } document.write(text + " is not a valid address."); function isvalid (mail) { } if (mail.indexof("@") == -1){ } return false; return true; The function returns a boolean => it can be used in if(), while(),

54 Using callback functions A function can take simple types as arguments: number, string, boolean, object But it can also take another function as argument ex.: array function findindex takes as argument a function The function is called for each element of the argument When the function returns true, the iteration stops and the index of that element is returned by findindex

55 Using callback functions E.g. an array var ages = [3, 10, 18, 20]; A callback function: function checkadult(age) { return age >= 18; } ages.findindex(checkadult) will return return 2 (the index of the first element that is greater than or equal to 18)

56 Using callback functions Writing document.write(ages.findindex(checkadult)); is the same as: for(var i=0;i<ages.length;i++){ } if (checkadult(ages[i])){ } document.write(i); break;

57 More elaborate test Continue with the previous example A valid address should only contain John@street@liverpool.ac.uk is not a valid address It must contain text is not a valid address It should also contain at least one dot (.) after Paul@liverpool is also not a valid address Tip: add the tests one at the time

58 Is it a palindrome (e.g. level) <!DOCTYPE html> <html> <head> <title>square</title> <script> var text = prompt("give text"); if (ispalindrome(text)){ document.write(text + " is a palindrome."); } else { document.write(text + " is not a palindrome."); } //write the function here </script> </head> <body> </body> </html> A palindrome is a word that reads the same backward or forward. Add a function to test whether a word is a palindrome.

59 Is it a valid IBAN number There are some calculations involved when we want to check an IBAN number (bank account). We just want to check the form BExx-xxxx-xxxx-xxxx Total length: 19 characters Start with BE 5th, 10th and 15th character must be - Extra: all x s should be digits Write a function in JavaScript to test the form of an IBAN number and use that function in an HTML page.

Filter: starting with capital Create a file exfuncfilter.js so that the HTML page shows a comma separated list of all names that start with a capital <!

60 Filter: starting with capital Create a file exfuncfilter.js so that the HTML page shows a comma separated list of all names that start with a capital <!DOCTYPE html> <html> <head> <script> var list = ["John", "paul", "Ringo", "George"]; </script> <script src="exfuncfilter.js"></script> </head> <body> </body> </html>

61 Variable scope A variable that is declared in a function is local var value = 42; dosomething(); console.log(value); // value is still 42 function dosomething() { var value = 2016; }

62 Intermezzo: variable hoisting V2 is undefined because v1 got its value on the next line. Error because v1 does not exist <script> console.dir(window); var v2 = v1; var v1=42; </script> Is there a difference? <script> console.dir(window); var v2 = v1; //var v1 = 42; </script>

63 Intermezzo: variable hoisting Functions will be hoisted before variables => when a function and a variable have the same name (don t ever do this), the function will win because it is declared first. var x; function x(){ console.log("h"); } console.log(typeof x); //function

64 Intermezzo: variable hoisting However, when we initialize the variable, this initialisation will occur after the hoisting and it will overwrite the function var x = 5; function x(){ console.log("h"); } console.log(typeof x); //number

65 Intermezzo: variable hoisting <script> The declaration of a variable is hoisted to the top console.dir(window); var v2 = v1; var v1=42; </script>

66 Intermezzo: variable hoisting <script> var v1; console.dir(window); var v2 = v1; v1=42; </script> On this line v1 is declared but undefined. The declaration of a variable is hoisted to the top

67 Variable scope (EcmaScript 6) Starting with EcmaScript 6 we can have variables in block scope by using let instead of var for declarations. if(true){ let i=7; } console.log(i); // undefined

68 use strict In the past JavaScript was a flexibel (=messy) language We can make it behave more strict using use strict => puts the engine in strict-mode use strict uses quotation marks so that older scripts do not see it as an unknown keyword. use strict works per file or per <script>-element

69 Some consequences of use strict Variables must be declared: x = 42; //not allowed Deleting a variable is not allowed var x = 42; delete x; // not allowed Duplicate argument names are not allowed function DoSomething(arg1, arg1) { // not allowed Writing to a read only property is not allowed var name = John ; name[0] = j ; //not allowed

70 The document object Access the HTML elements in JavaScript => Document Object Model (DOM) <html><head></head><body><ol><li>one</li><li>two</li></ol></body></html> html head Child element Parent element body ol li one Text element li one The DOM-tree

71 The document object Link between DOM-tree (in memory) and JavaScript: the document object <!DOCTYPE html> <html> <head> <title>the document object</title> <script> console.dir(document); </script> </head> <body> </body> </html>

72 Intermezzo: Document Object Model Standard not only used for HTML, also for XML ( Not only used in JavaScript, but also in other languages: Java, PHP, C#, Different levels: level-0 (html soup), level-1, level-2, level-3, level- 4(work in progress) What is the difference between childnodes and children?(both DOM level-1)

73 The document object In HTML every element can have a unique id. JavaScript can get an element based on its id: document.getelementbyid( theid ); ID s are unique => only one element will be returned BUT the element must be available in the DOM-tree

74 The document object <!DOCTYPE html> <html> <head> <title>the document object</title> <script> var elh1 = document.getelementbyid("heading"); console.dir(elh1); </script> </head> <body> <h1 id="heading">title</h1> </body> </html> html head script? Because the h1-element does not exist yet when the JavaScript code is executed, the result of getelementbyid is null (empty)

75 The document object <!DOCTYPE html> <html> <head> <title>the document object</title> </head> <body> <h1 id="heading">title</h1> <script> var elh1 = document.getelementbyid("heading"); console.dir(elh1); </script> </body> </html> html head body h1#heading script Title The h1-element does exist when the JavaScript code is executed, so getelementbyid returns a result

76 The text of an element A text is a childnode But there are also special attributes with which to get the text: textcontent: not supported in IE8, not CSS aware in Firefox (will show hidden text) innertext: CSS aware in Firefox (will not show hidden tekst) innerhtml: all browsers, will include HTML as HTML Solution: jquery text() (cross browser)

77 The text of an element <!DOCTYPE html> <html> <head> <title>copy values</title> </head> <body> <h1 id="heading">title</h1> <div id="body"></div> <script> var elh1 = document.getelementbyid("heading"); var elbody = document.getelementbyid("body"); elbody.textcontent = elh1.textcontent; </script> </body> </html>

78 The value attribute (some) Elements have textnode children The text of an <input>-element is not a textnode <input type= text id= name name= name value= John /> <!DOCTYPE html> <html> <head> <title>value attribute</title> </head> <body> <h1 id="heading">john</h1> <input type="text" id="name" name="name" value="nobody"/> <script> var elh1 = document.getelementbyid("heading"); var elname = document.getelementbyid("name"); elname.value = elh1.textcontent; </script> </body> </html> Quite often attributes can be accessed as properties A more generic way is using setattribute and getattribute. elname.setattribute("value", elh1.textcontent);

79 Buttons <!DOCTYPE html> <html> <head> <title>value attribute</title> </head> <body> <h1 id="heading">john</h1> <input type="submit" id="btn1" /> <button id="btn2"></button> </body> </html> Give both buttons the text of the H1-element

80 Clicking on a button The onclick attribute of a button => execute piece of JavaScript code To define a piece of JavaScript code we use functions function DoSomething(){ alert( Hi all ); } General form: function name(arguments) { code } To execute a function: DoSomething()

81 Clicking on a button <!DOCTYPE html> <html> <head> <title>onclick attribute</title> <script> function SayHi() { } </script> </head> <body> alert("hi all"); <h1 id="heading">john</h1> <button id="btn2" onclick="sayhi();">say hi</button> </body> </html> A function is executed when it is called, not when it is read by the browser JavaScript code to execute the function.

82 Integrating a form with JavaScript <!DOCTYPE html> <html> <head> <title>working with fields</title> <script> function SayHi() { var name = document.getelementbyid("txtname").value; var resultfield = document.getelementbyid("result"); resultfield.textcontent = "Hi " + name; } </script> </head> <body> <form> Name: <input type="text" id="txtname"/> <input type="button" onclick="sayhi();" value="say hi"/> <div id="result"></div> </form> </body> </html>

83 Onclick property vs Onclick attribute Instead of using the HTML onclick attribute we can also use the JavaScript onclick property (compare to: HTML value attribute and JavaScript value property) <body> <form> Name: <input type="text" id="txtname"/> <input id="btn" type="button" value="say hi"/> <div id="result"></div> <script> var btn = document.getelementbyid("btn"); btn.onclick = SayHi; </script> </form> </body>

84 Onclick property vs Onclick attribute Two remarks We have to put the script near the end of the dom-tree. Otherwise document.getelementbyid( btn ) cannot find the button. We do not use the call-operator (two round brackets: SayHi()) Using the call operator like this: btn.onclick = SayHi(); would call the function and store the result in btn.onclick We want to assign the function SayHi to the property onclick

85 Why use btn.onclick instead of < onclick= >? We want to separate the JavaScript code from the HTML code Compare to styles: in most cases you should not use the style attribute in HTML Clear separation between HTML and JavaScript is one of the principles of unobtrusive JavaScript: the site should still work without JavaScript Let us look at an example

86 The obtrusive way This will not work if JavaScript is disabled and there is no way to make it work: <a href="javascript:window.open(' _principles_of_unobtrusive_javascript')">w3c Article</a> The following will work if JavaScript is disabled but it is a maintenance nightmare <a href=" ve_javascript" onclick="window.open(' les_of_unobtrusive_javascript');return false;">w3c Article</a>

87 The unobtrusive way <a class="newwindow" href=" pt">w3c Article</a> <script> var anchors = document.getelementsbyclassname("newwindow"); for (var i=0; i<anchors.length;i++) { anchors[i].onclick = OpenWindow; } function OpenWindow(){ window.open(this.href); return false; } </script> return false: Do not execute the default behavior (=follow link) The keyword this refers to the <a>-element

88 Calculation with select Create a form with two input fields, a drop down (select) field, a button and a span-element. The drop down should contain +, -, * and / When the user fills in two numbers, chooses an operator and clicks the button the result must be shown in the span element

89 Window object In a browser, the window object is the top-level item Everything we declare is stored in this object <!DOCTYPE html> <html> <head> <title>the window object</title> <script> console.dir(window); </script> </head> <body> </body> </html> Console.dir shows the structure of an object.

90 Window object(chrome)

91 Window object <script> </script> var value=42; console.dir(window); We declare a variabele here Every variable we declare becomes an item in the window object.

CSC Web Programming. Introduction to JavaScript

CSC Web Programming. Introduction to JavaScript CSC 242 - Web Programming Introduction to JavaScript JavaScript JavaScript is a client-side scripting language the code is executed by the web browser JavaScript is an embedded language it relies on its