1 / 83

INT222 Internet Fundamentals

INT222 Internet Fundamentals. Week 2. Outline. Web dev tools More on JavaScript Types Scope Object DOM Functions Programming Constructs. Web Client Programming. The INT222 covers three parts of this development – a three-pillar paradigm HyperText Markup Language (HTML5)

van
Télécharger la présentation

INT222 Internet Fundamentals

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. INT222Internet Fundamentals Week 2

  2. Outline • Web dev tools • More on JavaScript • Types • Scope • Object • DOM • Functions • Programming Constructs

  3. Web Client Programming The INT222 covers three parts of this development – a three-pillar paradigm • HyperText Markup Language (HTML5) • The main language for creating web pages • Content or structure • Cascading Style Sheets (CSS) • Used for describing the look and formatting of a web page • Presentation or style • JavaScript (JS) • Allows client-side scripts to interact with the user • Behavior (and state)

  4. Web Dev Tools There are many tools available on the web for developing and using HTML, CSS and JavaScript. Use the ones that you think are easy and convenient for you. Here are few basic ones: • JavaScript Scratchpad - part of Firefox (Tools - Web Developer) • CSS Basics (http://csstypeset.com/) • HTML (tryit) See INT222 web site

  5. More on JavaScript

  6. Programming/using JavaScript with html • In order to embed / use JavaScript in an HTML document, you need to use the script tag. • You have two choices when it comes to using the script tag to embed JavaScript code in an HTML file:

  7. Approach 1: Embedding Directly • You can use the <script> and </script> tags to include JavaScript code directly into an HTML file <script> /***********************************************/ /* JavaScript code embedded into an html file */ /***********************************************/ javascript statement; // JavaScript code .. .. javascript statement; </script>

  8. Browsers display HTML in a "top-down" fashion • so the execution of the JavaScript code is determined by its location in the html code. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>INT222</title> </head> <body> <p>This is a paragraph</p> <script> document.write("<h2 />This is the Heading </h2> "); </script> </body> </html>

  9. Approach 2: Using External JS Files • You can use the <script> and </script> tags to include a separate external JavaScript file into an HTML file. • Use the srcattrbute to specify the external file name. • The external file will only contain JavaScript statements and must have a .js extension. • Within HTML file: • The external JavaScript file myscript.js : • <script src="myscript.js"></script> /***********************************************/ /* External JavaScript code in myscript.js*/ /***********************************************/ javascript statement; // JavaScript code .. javascript statement;

  10. Four Very Basic JavaScript Examples: • JavaScript embedded in • the <head>...</head> part of an html document • the <body>...</body> part of an html document • External JavaScript load in • the <head>...</head> part of an html document • the <body>...</body> part of an html document • Which is better? • <head> or <body>?

  11. JavaScript reserved words • JavaScript has a list of words that are considered “keyword/reserved". • These words have specific meanings recognized by the language interpreter and therefore should not be used as variable names.

  12. JavaScript data types • There are 3 main (primitive) data types: • string • must be enclosed in single or double quotes • number • can be integers or floating point • Special number: Infinity, NaN • boolean • values are binary, with the values (1) "true" and (0) "false" (without the quotes) • Other types: • undefined, null, object, function

  13. JavaScript data types • JavaScript is a loosely typed language. • You do not have to specify the data type of a variable when you declare it. • Data types are converted automatically as needed during script execution.

  14. About JavaScript Variable • Variables have 3 characteristics: type, name, and value • Unlike in C, a JavaScript variable can have a different type in different parts of a program • dynamic typing • Variable naming rules are: Must start with a letter, underscore (_), or dollar sign ($) • Cannot be a reserved (key) word • Subsequent characters can be letters • upper case (A...Z) or lower case (a...z), • numbers • underscores

  15. Variables Example

  16. About Variable Scope

  17. Variable Scope in JavaScript • In JavaScript, Code blocks do not determine variable scope. • Functions are the only construct that can be used to limit scope of variables.

  18. Variable Scope • In JavaScript, variable scope can be global or local. Scope is determined by where and how a variable is declared. • GlobalA variable that is declared outside any functions is global. A global variable can be referenced anywhere in the current document. • Declared outside any functions, with or without the var keyword • Declared inside a function without using the var keyword, but only after the function has been called once

  19. Variable Scope • LocalA variable that is declared inside a function is local. A local variable can only be referenced inside the function it is declared in. • Declared in a function with the var keyword. • If you reference a local variable globally or in another function, JavaScript will trigger the "is not defined" error. • this is different error from the "undefined" JavaScript error for a variable that is not initialized.

  20. Note about variable declaration • It is recommended that you • avoid using global variables. • always use the var keyword when declaring variables.

  21. Example var display = ""; // Global variable ident_A = 5; // Global variable - bad practice function someFunction() { // Start of function varident_B = 15; // Local variable ident_C = 34; // Global variable - bad practice varident_A = 0; ident_C++; // increment ident_C by 1 ident_A = ident_B + ident_C; alert(ident_A); // show the value of ident_A inside the function } // End of function someFunction(); // call the function alert(ident_A); // show the value of ident_A outside the function alert(ident_C); // show the value of ident_C alert(ident_B); // what happens here?

  22. JavaScript Object • Javascript is referred to it as an object-based, event drive scripting language. • The object-based means that Javascript works with items known as objects. • Objects are things in a browser, a window, a form field, a document, a submit button, etc. • In JavaScript, almost everything is an object. All primitive types except null and undefined are treated as objects. • An object is just a special kind of data, with properties and methods.

  23. Object properties • A JavaScript object has properties associated with it. • A property of an object can be explained as a variable that is attached to the object. • Object properties are basically the same as ordinary JavaScript variables, except for the attachment to objects. • The properties of an object define the characteristics of the object. • You access the properties of an object with a simple dot-notation: • objectName.propertyName

  24. Object methods • Objects have methods which are really tasks and/or functions that the object performs. Similar to a function or subroutine or procedure, a method has a name and parameters • methods define the behaviourof an object • methods may change an object's properties, thus changing its state • methods may be called, eg. objectName.methodName(para1, para2, ...)

  25. Objects are hierarchical • A property of an object may itself be an object • There is a parent-child relationship • An object is a parent if it has a property which is an object • The property which is an object is a child of that parent • These relationships are often thought of as an upside-down tree structure, with the root at the top being the ancestor of all the descendants below

  26. The DOM (Document Object Model) • Modern web browsers use an object-oriented paradigm, where the browser window is the top-level object. • The window object contains 3 main objects (document, location, history):

  27. Document Object • Document object contains information about the currently displayed document. • Document object properties include: • domain (name of the server of the current document, read-only) • URL (of the current document, read-only) • referrer (URL of the previous document, read-only) • title (defined in <title>, read-write)

  28. Examples <script> document.write("The domain name of the server is :<br /> "); document.write(document.domain); document.write("<br /><br />This document url is :<br /> "); document.write(document.URL); document.write("<br /><br />This document referrer is :<br /> "); document.write(document.referrer); document.write("<br /><br />This document title is :<br /> "); document.write(document.title); </script> Try it out

  29. More Document object properties • bgColor (background color, read-write) • fgColor (text color, read-write) <body> <p>Some text</p> <a href="javascript:void(0)" onclick=document.bgColor='#000'>Change background</a> <a href="javascript:void(0)" onclick=document.fgColor='#f00'>Change foreground</a> </body> Try it out

  30. More Document object properties • lists of links, forms and images <body> <a href="https://scs.senecac.on.ca">School of ICT</a><br /> <a href="http://www.google.com">Google</a><br /> <a href="http://www.cnn.com">CNN</a><br /> <script> varallLinks = document.links; document.write("There are " + allLinks.length + " links in this document"); for (vari=0; i<allLinks.length; i++) { document.write(allLinks[i]); } </script> </body> Try it out

  31. An other example Try it out <body> <form name="firstform"> <input type="text" name="fm1" /> </form> <form name="secondform"> <input type="text" name="fm2-1" /> <input type="text" name="fm2-2" /> </form> <script> varallForms = document.forms; document.write(allForms.length + " forms in this document<br />"); for (vari=0; i<allForms.length; i++) { document.write(allForms[i].name+"<br />"); document.write("<blockquote>"); for (var j=0; j<allForms[i].elements.length; j++) { document.write(allForms[i].elements[j].name+"<br />"); } document.write("</blockquote>"); } </script> </body>

  32. More Example <body> <imgsrc="../facebook.gif" alt="Face Book" name="facebook" /> <imgsrc="../twitter.gif" alt="Twitter" name="twitter" /><br /> <script> varallImages = document.images; document.write(allImages.length + " images in this document<br /><br />"); for (vari=0; i<allImages.length; i++) { document.write(allImages[i].name+"<br />" + allImages[i].src + "<br /><br />"); } </script> </body> Try it out

  33. Document Object Methods • document.write() & document.writeln() <script> var heading; heading = prompt("Enter document heading", "default heading"); document.writeln(heading); heading = prompt("Enter document sub heading", "default sub heading"); document.write(heading); </script> Try it out

  34. More Document Object Methods • document.getElementById() • The getElementById() can be used to retrieve an element by its "id“ • The innerHTML property can be used to change the contents of an element <body> <h1>Changing a DOM element</h1> <p id="p1">This is the paragraph that will changed.</p> <script> varnewValue = prompt("Enter a new value", ""); varparagraphToChange = document.getElementById("p1"); alert(paragraphToChange.innerHTML); paragraphToChange.innerHTML = newValue; </script> </body> Try it out

  35. Questions • What does the “document” refer to? • What is DOM?

  36. What does the “document” refer to? • currently displayed HTML file (which has been loaded into the memory/document object) • What is DOM? • An API for valid HTML documents. • It provides a structured representation of the document and • it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content.

  37. location object • location object properties include: • href (complete URL) • hostname (and other parts of the URL, stored separately)

  38. location object all location object properties can be changed: <body> <script> document.write("All information = " + location.href + "<br />"); document.write("Host = " + location.host + "<br />"); document.write("Host Name = " + location.hostname + "<br />"); document.write("Protocol = " + location.protocol + "<br />"); document.write("Port No. = " + location.port + "<br />"); </script> <a href="javascript:void(0)" onclick="location.href = prompt('Please enter URL', 'https://scs.senecac.on.ca');">Load a new page</a> </body> Try it out

  39. history object • history object contains the list of previously visited URLs. • History object methods include: • back() - same as browser "Back" button • forward() - same as browser "Forward" button • go(n)where (n) is a positive or negative integernegative number will move back, positive number will move forward in the history list

  40. history object example <body> <a href="javascript:void(0)" onclick="history.back();">Using back()</a> <br /><br /> <a href="javascript:void(0)" onclick="history.go(-1);">Using go(-1)</a> </body> Try it out

  41. Functions • A function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function. • Like the program itself, a function is composed of a sequence of statements called the function body. • Values can be passed to a function, and the function can return a value.

  42. More about Functions • A function is a method for the window object. • A function is not executed until it is called . • Functions are declared using the "function" keyword. • Function names must adhere to variable name rules. <script> function functionOne() { JavaScript instructions; } function functionTwo() { JavaScript instructions; } </script>

  43. More about Functions • Functions are usually declared in the <head> element of the html document, to ensure that the function is defined to the browser before any activation by an event handler. • Functions may be called within other functions. • Functions are executed when they are called, not in the order in which they are declared.

  44. Example <head> <meta charset="utf-8"> <title>INT222</title> <script> //Here is the function declaration function myFirstFunction() { alert("Hello out there"); } //End of myFirstFunction </script> </head> <body> Here's some HTML code just for starters <br /> <script> myFirstFunction(); //This is a function call </script> Here's some more HTML code just for show ... </body> click here to see how this displays in a browser click same as above with an external JavaScript

  45. Parameters • Parameters are also referred to as arguments. • Parameters are used to pass values to functions multiple. • Parameters can be used within each function.

  46. An Example <head> <meta charset="utf-8"> <title>INT222</title> <script> function greetings(first,last) { document.write("Hello " + first + " " + last); } </script> </head> <body> This page shows how parameters are passed to JavaScript functions ... <br /> <br /> <script> varfirstName = prompt("Enter your first name", ""); varlastName = prompt("Enter your last name", ""); greetings(firstName, lastName); </script> </body> Try it out

  47. An Other Example the return value from a function can be used to directly pass a value to another function: <head> <meta charset="utf-8"> <title>INT222</title> <script> function greetings(name) { document.write("Hello " + name); } </script> </head> <body> <mark>This page shows how parameters are passed in a slightly different way ...</mark> <br /><br /> <script> greetings(prompt("Please enter your name")) </script> </body> Try it out

  48. Two types of functions: • Custom built functions / user-defined functions. • Do not need to specify return data type • Return value is optional. Return may only exit the function. • Built-in functions/ global functions

  49. Custom built functions / user-defined functions function addTwoNumbers(a, b) { return a + b; } var add2Numbers = function(a, b) { return a + b; }; alert(addTwoNumbers(1, 2)); alert(add2Numbers(2, 3));

  50. Built-in functions / global functions • Are functions that are built into the JavaScript language. • Common window object methods (Methods of the window object) • They have already been defined and the logic behind them has already been coded for your use - you simply use them.

More Related