"a computer programming language commonly used to create interactive effects within web browsers." If actors and lines are the content/html......

Size: px

Start display at page:

Download ""a computer programming language commonly used to create interactive effects within web browsers." If actors and lines are the content/html......"

Eustace Sullivan
5 years ago
Views:

1 JAVASCRIPT. #5

2 5.1 Intro

3 "a computer programming language commonly used to create interactive effects within web browsers." If actors and lines are the content/html...... and the director and set are for design/css.

3 3 "a computer programming language commonly used to create interactive effects within web browsers." If actors and lines are the content/html and the director and set are for design/css then Javascript is like CGI. Javascript is like post-production, it happens in the users browser after the HTML and CSS has loaded. It allows you to add interactivity to your pages. If a user clicks an element, Javascript can react. If a user types in a form, Javscript can evaluate it.

4 4 Javascript is the last of the 3 web front-end languages: HTML, CSS and JS. JS can edit, add and delete HTML content. JS can edit, add and delete CSS styles. JS can check form input values are valid (like a valid address) JS can create complex graphics JS can load external content using a method called AJAX (Asynchronous JavaScript and XML).

5 5.2 Using Javascript

6 6 Placing Javascript is like CSS. You can use an external file at the end of your content before </body> or write in the opening tag of an element If you are reusing your Javascript on multiple HTML pages you should use an external file. This means you only need to change one JS line to affect all the HTML pages. If you are only using the Javscript on one page you should write the Javascript before the </body> tag.

7 7 To use an external file, first save a file with.js extension. You then need to load it your HTML files. You can also load your external file just before </body> tag <script src="path/to/file.js"></script> </body> Like CSS and HTML, use lower case and avoid spaces for your filename. Group your JS files in a subfolder, e.g. /js/

8 8 To write JS directly in your HTML file, you should place it before the </body> tag. Open with <script>, then your JS code, then close with </ script> <script> //JS can go here. //To add comments start a line with // </script> </body>

9 9 A simple javascript functions is alert(). It's a good way to test a script is working. It brings up a browser default popup alert window. write the function name with a set of round brackets in the brackets write a value for the function to use end the line with a semi-colon alert(5);

10 5.3 Values and Variables

11 11 There are 2 types of values, numbers and strings. A number is a can be used mathematically. A string is text. Strings must be enclosed in quotes (single or double). A number enclosed in quotes is considered a string. alert(999); //number alert('my name is Eoin'); //string

12 12 You can join strings together with + Using a plus symbol with strings concatenates (joins) them. alert('my name is Eoin.' + ' I live in Dublin'); alert('my name is Eoin. I live in Dublin'); alert('my name is Eoin. I live in Dublin. I have ' ' bikes.');

13 13 You cannot use strings mathematically Even if the string just contains a number. alert(5 + 3); alert('5' + '3');

14 14 You can save values as a variable to use again. Use the word var to declare a variable. Define a name for your variable a space equal sign and space your variable's value and finish with a semi-colon. var firstname = "Eoin"; alert(firstname); //Don't use quotes when reusing a variable.

15 15 Variables are case sensitive. In the example "age" and "Age" are different variables. var age = 62; var Age = 64; alert(age); alert(age); Traditionally JS variables are written using camelcase. The variable starts with a lower case character, then distinctions in words are made using an upper case character. e.g. myage, theirage

16 16 In Javascript the equal symbol is for assigning values, it is not the same as algebra. var age = 62; age = age + 1; Here, we are assigning the value on the right to the variable on the left.

17 5.4 Maths

18 18 You can use numbers mathematically. Use operators to add, subtract, multiply and divide. + adds two numbers - subtracts var apples = 7; var oranges = 5; // work out total fruit var numberfruit = apples + oranges; alert(numberfruit); var lunch = 3; // work out number of fruit left after lunch numberfruit = numberfruit - lunch; alert(numberfruit);

19 19 You can use numbers mathematically. * multiplies two numbers or variables. / divides var potatoes = 5; var customers = 60; var wktotal = potatoes * customers; alert(wktotal); //work out average number potatoes per day of week alert(wktotal / 7);

20 5.5 Conditionals

21 21 In JS you can use conditional statements to check if something is true and if so execute more code. if (this condition is true) { } execute this code; 1. Begin with the word if and a space. 2. Then a set of round brackets. Inside these we write our conditional statement. 3. Then a set of curly brackets. Here we write the code that might be executed. 4. Like CSS, indent the code between the curly brackets.

22 22 You can compare two values. Here we check if one is greater than the other. It is true so the code in the curly brackets executes. var cups = 15; var saucers = 4; //check if cups is greater than (>) saucers if (cups > saucers) { alert("we need to order more saucers"); }

23 23 If the condition is false the code inside the curly brackets will not be executed. var cups = 3; var saucers = 4; //this condition will return false if (cups > saucers) { alert("we need to order more small trays"); }

24 There are other methods for comparing values. They will always return true or false. 24 N.B. You must use '==' to check if two values are equal, not '=' var cups = 4; var saucers = 4; //this condition will return true if (cups == saucers) { alert("we have a perfect set!"); } if (cups = saucers) { alert("we have a perfect set!"); }

25 There are other methods for 25 comparing values. == Equal to!= Not equal to < Is less than <= Is less than or equal to > Is greater than >= Is greater than or equal to

26 When an if statement returns false you can offer an alternative block of code to execute. You do this by using an else after the if statement. 26 <script> if (condition is true){ execute this code on true } else { otherwise execute this code } 1. Follow with the word else 2. Then a set of curly brackets. Here we write the fallback code.

27 27 var cups = 3; var saucers = 4; //this condition will return false so the else block of code will execute. if (cups == saucers) { alert("we have a perfect set!"); } else { alert ("something's not right"); }

28 You can also set more conditional statements using else if. This condition will only be tested if the previous conditions returns false. 28 if (condition is true) { execute this code } else if (second condition is true) { execute this code } 1. Follow with the words else if. 2. Then a set of round brackets. Inside these we write our conditional statement. 3. Then a set of curly brackets. Here we write the code that might be executed.

29 var cups = 3; var saucers = 4; 29 //this condition will return false so the else block of code will execute. if (cups == saucers) { alert("we have a perfect set!"); } else if (cups < saucers) { alert("we need cups"); } else if (cups > saucers) { alert("we need saucers"); } else { alert("something's really wrong. I should never execute, one of the previous 3 must be true."); }

30 5.6 Functions

31 31 You can save code in a function and reuse it. It's similar to a variable, this time we store code instead of a value. //declare your function function functionname(){ code executes here; } 1. Like a variable, you must declare a function. This time with the word function. 2. Next write your function name. Like a variable camelcase is common. 3. You follow the function name with a set of round brackets. 4. Then a set of curly brackets. Here we write the code that will be executed. You need to call a function for it's code to be executed.

32 32 //declare your function function welcome() { alert("welcome to the website"); }

33 33 To call the function, write the function name with a set of round brackets. //declare your function function functionname() { } code executes here; //execute your function functionname();

34 34 You can execute your function multiple times. //declare your function function welcome() { alert("welcome to the website"); } //execute your function welcome(); welcome(); welcome();

35 35 You can pass values into a function. In your function declaration, name a variable and write it between the round brackets. You can then use that variable inside the function. Now when calling the function pass in the value you want to be used. //specify a variable in the brackets. function welcome(variable can be used) { //you can now use variable inside this function } //execute your function with a value/variable in the round brackets welcome(variable in);

36 36 In your function declaration, name a variable and write it between the round brackets. You can then use that variable inside the function. When calling the function you can pass in the value you want to be used inside that set of round brackets. //specify a variable in the brackets. You can use it inside your function. function welcome(message) { alert("welcome to the website " + message); } //execute your function and place a value/variable in the round brackets. welcome('mary');

37 37 //specify a variable in the brackets. You can use it inside your function. function welcome(username) { alert("welcome to the website " + username); } //execute your function and place a value/variable in the round brackets. welcome("mary Murphy"); var name = "Mary Murphy"; welcome(name);

38 38 //specify a variable in the brackets. You can use it inside your function. function welcome(username) { alert("welcome to the website " + username); } //execute your function and place a value/variable in the round brackets. var name = "Mary"; welcome(name); name = "Peter"; welcome(name);

39 5.7 jquery

40 40 jquery is a JavaScript library. Similar to Bootstrap, it has built in functions/code that make writing JS on your site much quicker. You can load jquery from an external server or save it to your machine and load it locally. jquery is the most popular JS library but others exist. jquery should shorten your JS code, what took multiple lines can often be done in one. Choosing an element by id in native JS = document.getelementbyid("welcome") Choosing an element by id in jquery = $('#welcome')

41 41 Using a CDN hosted version of jquery should potentially be quicker for your visitors. You can view Google hosted libraries at libraries/ To load jquery add the following before your </body> tag. <script src=" js"></script> You should include the jquery library before you write your JS code.

42 42 The basic syntax of jquery is $(selector).action(); Like CSS the selector is the HTML element you want to target. You can then perform an action to that element/those elements. The $ symbol is used at the start of all jquery lines of code. It is telling the browser to parse the following code using jquery. The selector is based on the CSS model. You can use general HTML names, classes and ids: $("h1") selects all h1s. $(".bigger") selects all HTML elements with class="bigger". $("#intro") selects the HTML element with id="intro".

43 43 You should tell jquery to wait until the browser has finished loading before executing. $(document).ready(function () { }); //All jquery code goes in here

44 44 jquery actions are pre-written functions. You can try the function slideup(). $(document).ready(function () { }); $('p').slideup();

45 45 Write a number between the round brackets to set a speed in milliseconds. $(document).ready(function () { }); $('p').slideup(5000);

46 46 In Class: Download the template HTML Use an image on the page. Change the look of the page using some CSS Create and load an external Javascript file in the HTML page. Load jquery. Use jquery to slide in or out an element on your page. Write a JS function. Pass in a number, inside the function manipulate the number and then alert the user the outcome.

ADVANCED JAVASCRIPT. #7

ADVANCED JAVASCRIPT. #7 7.1 Review JS 3 A simple javascript functions is alert(). It's a good way to test a script is working. It brings up a browser default popup alert window. alert(5); 4 There are 2