Download presentation
Presentation is loading. Please wait.
1
JavaScript Basics JavaScript: What Is it? – A browser-based language – An object-based language – No relation to Java 1
2
What is JavaScript? A computer language – Displaying Text – Moving an Image – Asking a user for information Source code Processing the code – running or executing in the browser 2
3
Static vs. Dynamic HTML is static (cannot change) JavaScript is dynamic (can change) JavaScript can respond to user actions 3
4
Why JavaScript? VBScript? – runs in IE Only PHP/Perl – Not in a browser JavaScript runs almost everywhere 4
5
What Can It do? Interacting with users in an Internet browser – error checking – validation Roll-Over Images User Navigation Assistance Menus Animation 5
6
Tools Needed? Browser – Firefox, Internet Explorer, Safari, Chrome – Firefox for this class A Plain-Text Editor – Notepad – TextPad – BBEdit (Mac only) 6
7
The Tag JavaScript code is inserted between script tags – (I use lowercase because of XHTML standards) This is called a script block 7
8
Script Tag - Continued This script is not shown to the user, but is code that does something The script block can be between the tags or between the tags – Most often we will put it in the area 8
9
Can You See JavaScript? JavaScript can be disabled in a browser Were possible offer alternate, non-JavaScript solutions as well 9
10
Not the Only Language Technically we should tell the browser what language we are using – JavaScript is the default so I will accept the tag without the language attribute 10
11
DOCTYPE Technically, the first line in an HTML file should be the DOCTYPE – II tend to use … <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" – There are many others that enforce validation of HTML and XHTML standards To keep things simple and easy, DOCTYPE is not required for most class assignments – In the Real World, you should use it!! 11
12
Hello World – The simple way Hello World! alert("Hello World!"); Hi 12
13
The alert() function Sends the text enclosed within the ( ) to a special message (dialog) box Controlled by the operating system, not JavaScript It is Modal – means the program stop working until the user clicks the OK – Parsing the program stops when the alert( ) function is called 13
14
Exercise Code a JavaScript program that displays an alert message 14
15
Demo – Simple JavaScript Pause this slide and click the link below for a… video demonstration 15
16
Hello World – The better way Hello World! function hello() { var msg="Hello World!"; document.open(); document.bgColor = "yellow"; document.write(msg); document.close(); } Hi 16
17
The Document Object document is a JavaScript object that represents the Web page You will use this object to manipulate the appearance of a Web page using JavaScript code (e.g. document.bgColor = "yellow" 17
18
Declaring a Variable Var – var myName; Reserves a variable name for your JavaScript Scope – Variables declare outside of functions exist for all code in the Web page (e.g. they are global) – Variables declared inside functions exist just inside that function's code (e.g. they are local) 18
19
Function Encapsulates some JavaScript code into a single function name Call the function name and all the code executes 19
20
The Onload Event The onload event is triggered when a Web page first opens. It allows you to specify JavaScript code you want to run as soon as the page is fully loaded into the browser – Usually calls a JavaScript function Ensures that all JavaScript page elements are loaded into the browser before you try to refer to them with JavaScript code 20
21
What happened to the Paragraph? In the last "Hello World" example a paragraph was specified (i.e. Hi ) Why didn't we see it? – The hello() function opened a brand new page! Document.open(); – Document.write() starts a new page automatically even if we do not explicitly open() and close() a new page 21
22
The DOT operator references the document's functions by using a dot (. ) – E.g. document.write(msg); references the document's properties by using a dot (. ) – e.g. document.bgColor = "yellow"; – "Old" style… you will learn new way later Semicolon at the end of line – usually optional, but do i 22
23
Exercise Code a JavaScript program that calls a function when the page loads The function should change the background color to blue. 23
24
Browser Differences Some browser differences for Firefox, Chrome, IE, Safari, Opera, etc. – Use Firefox for this class Most JavaScript will work for all browsers You can use JavaScript to detect browser versions and issue browser/version specific code 24
25
Good Coding Practices Keep similar code in one place Indenting – Following code indenting rules will become extremely important as the code gets more complicated – See the Best Practices link on the class Web site Use Comments where helpful 25
26
Comments You may comment out JavaScript code to prevent it from running (or just to make comments for documentation purposes) Single-line comment examples (Use // ) //This is just some texts // alert("this does not run"); alert("This runs"); //This is just a comment Multi-line comment example on next slide 26
27
Multi-Line Comment Example Use /* to begin and */ to end comment block /* This line does not run This line does not run either Nor does this line */ alert("HI"); //This line runs, however 27
28
HTML comments vs JavaScript If you are not in a JavaScript block… – (i.e. code between and ) … you must use HTML comments instead ( ) <!-- This is an html comment this continues the comment block This is the last HTML comment --> 28
29
Getting Input from a User A simple way to receive information from a user into a JavaScipt variable is to use the prompt() function Example… var userInput = prompt("What is your name?," "); 29
30
Using a Default with Prompt() 30 var userInput = prompt("What is your Age?", "39");
31
Exercise Write a JavaScript program to prompt a user for their first name, then display an alert box that say "Hi, firstname" NOTE: You can combine text with a variable like so… "Hello " + myVar 31
32
Giving HTML Elements an ID Giving your HTML element a unique ID allows JavaScript to reference the elements and dynamically change them This is a test paragraph 32
33
getElementById The getElementById() function allows you to get a reference to an HTML element and place that reference in a JavaScript variable var myParagraph = document.getElementById("mypara"); This is a test paragraph 33
34
Demo – Get Element by ID Pause this slide and click the link below for a… video demonstration 34
35
Changing HTML element Properties Using the script from the last slide, we can dynamically change the text color in the paragraph var myParagraph = document.getElementById("mypara"); myParagraph.style.color = "blue"; 35
36
Styles (CSS) Styles (CSS) allow us to control many properties of an HTML element. Examples: Text size, text color, background colors, where the element is positioned on the page, etc. I will teach you all the CSS code you need for this class. 36
37
A little CSS You should control the color, text size, etc. properties using Styles (i.e. CSS) Here is a Simple Example making all the text in a paragraph blue p.mystuff{ color: blue; } This should appear blue 37
38
CSS code vs. JavaScript code CSS/HTML example: A paragraph JavaScript/HTML example: var myPara = document.getElementById("mypara"); myPara.style.color = "red"; A paragraph 38
39
Demo - Simple CSS 39 Pause this slide and click the link below for a… video demonstration
40
Exercise Code a Web page that has the following paragraph in it Hello There Code a function that changes the text color of the paragraph to blue when the page loads 40
41
Simple Function You have seen the simple hello() function You can pass data to a function: function hello(yourName) { var msg="Hello " + yourName; alert(msg); } hello("Steve"); //will display: Hello Steve 41
42
Variable Scope Variables declared outside functions can be "seen" anywhere in the JavaScript code (global) Variables declared within a function can only be "seen" within that function (local) A global variable may be declared outside a function but have its value set within a function. That value will be "seen" everywhere in the JavaScript 42
43
Local Variable Example function testme() { var myVar = "Hi There"; } testme(); alert(myVar); //No value shown 43
44
Global Variable Example var myVar; function testme() { myVar = "Hi There"; } testme(); alert(myVar); //Value IS shown 44
45
Events Events can be detected and used to trigger JavaScript functions You have seen… Try detecting a mouse-click… 45
46
Exercise Code a Web page that has an image on it. When the image is clicked, display an alert box that displays "You Clicked?" 46
47
JavaScript not Enabled? You can specify HTML between the and tags to display if JavaScript will not run in a user's browser. Enable Javascript to run this page! 47
48
Accessibility Any Web page you code that is going out to the public should take in account that users may have disabilities. Types include… – sight (including color-blindness) – hearing – motor See – www.w3.org/WAI/ www.w3.org/WAI/ – www.section508.gov/ www.section508.gov/ – www.cynthiasays.com www.cynthiasays.com 48
49
External JavaScript files In the real world, it is preferable to keep your JavaScript code in a separate file and link to it in your Web page. – For class assignments, however, just leave it in the same file! To import a file with JavaScript do… 49
50
Demo – Using an External.JS file Pause this slide and click the link below for a… video demonstration 50
51
The DIV tag You can divide your Web page into sections by using the tag Just place some code between the and tags. Example… Hi there Back at ya 51
52
DIV continues By giving a DIV an id (e.g. "mydiv") you can change properties for all HTML code in the div. Example var myDivVar = document.getElementById("mydiv"); myDivVar.style.color = "blue"; Now all the text in the DIV will be blue 52
53
innerHTML The innerHTML properly allows you to change all of the HTML and/or text between the element tags your are working with. Example… Hi var myP = document.getElementById("mypara"); myP.innerHTML = "Hello" 53
54
innerHTML with DIV Hi There var myd = document.getElementById("mydiv"); myd.innerHTML = " How are you? "; 54
55
Exercise Code a Web page with this DIV Hi There How are you? Code a JavaScript function to change the HTML in the DIV to display a single image instead of the paragraphs. 55
56
End of Lesson 56
Similar presentations
