01 Introduction - JavaScript Development

Introduction to JavaScript Development The Magic of Dynamic Web Pages Doncho Minkov Technical Trainer http://minkov.it Telerik Software Academy academy.telerik.com

Table of Contents  Dynamic HTML  How to Create DHTML?  XHTML, CSS, JavaScript, DOM  Intro to JavaScript  History  JavaScript in Web Pages  JavaScript Syntax  Pop-up boxes  Debugging in JavaScript 2

Dynamic HTML Dynamic Behavior at the Client Side

What is DHTML?  Dynamic HTML (DHTML)  Makes possible a Web page to react and change in response to the user’s actions  DHTML consists of HTML + CSS + JavaScript DHTML XHTML CSS JavaScript DOM 4

DTHML = HTML + CSS + JavaScript  HTML defines Web sitescontent through semantic tags (headings, paragraphs, lists, …)  CSS defines 'rules' or 'styles' for presenting every aspect of an HTML document  Font (family, size, color, weight, etc.)  Background (color, image, position, repeat)  Position and layout (of any object on the page)  JavaScript defines dynamic behavior  Programming logic for interaction with the user, to handle events, etc. 5

JavaScript Dynamic Behavior in a Web Page

JavaScript  JavaScript is a front-end scripting language developed by Netscape for dynamic content  Lightweight, but with limited capabilities  Can be used as object-oriented language  Embedded in your HTML page  Interpreted by the Web browser  Client-side, mobile and desktop technology  Simple and flexible  Powerful to manipulate the DOM 7

JavaScript Advantages  JavaScript allows interactivity such as:  Implementing form validation  React to user actions, e.g. handle keys  Changing an image on moving mouse over it  Sections of a page appearing and disappearing  Content loading and changing dynamically  Performing complex calculations  Custom HTML controls, e.g. scrollable table  Implementing AJAX functionality 8

What Can JavaScript Do?  Can handle events  Can read and write HTML elements and modify the DOM tree  Can validate form data  Can access / modify browser cookies  Can detect the user’s browser and OS  Can be used as object-oriented language  Can handle exceptions  Can perform asynchronous server calls (AJAX) 9

The First Script <html> <body> <script type="text/javascript"> alert('Hello JavaScript!'); </script> </body> </html> 10

Using JavaScript Code  The JavaScript code can be placed in:  <script> tag in the head  <script> tag in the body - not recommended  External files, linked via <script> tag the head  Files usually have .js extension <script src="scripts.js" type="text/javscript"> <!– code placed here will not be executed! --> </script>  Highly recommended  The .js files get cached by the browser 12

JavaScript – When is Executed?  JavaScriptcode is executed during the page loading or when the browser fires an event  All statements are executed at page loading  Some statements just define functions that can be called later  Function calls or code can be attached as "event handlers" via tag attributes  Executed when the event is fired by the browser <img src="logo.gif" onclick="alert('clicked!')" /> 13

Calling a JavaScript Function from Event Handler – Example <html> <head> <script type="text/javascript"> function test (message) { alert(message); } </script> </head> <body> <img src="logo.gif" onclick="test('clicked!')" /> </body> </html> 14

Using External Script Files  Using external script files: <html> external-JavaScript.html <head> <script src="sample.js" type="text/javascript"> </script> </head> The <script> tag is always empty. <body> <button onclick="sample()" value="Call JavaScript function from sample.js" /> </body> </html>  External JavaScript file: function sample() { alert('Hello from sample.js!') } sample.js 16

External JavaScript Files Live Demo

JavaScript Syntax  The JavaScript syntax is similar to C#  Operators (+, *, =, !=, &&, ++, …)  Variables (typeless)  Conditional statements (if, else)  Loops (for, while)  Arrays (my_array[]) and associative arrays (my_array['abc'])  Functions (can return value)  Function variables (like the C# delegates) 19

Standard Popup Boxes  Alert box with text and [OK] button  Just a message shown in a dialog box: alert("Some text here");  Confirmation box  Contains text, [OK] button and [Cancel] button: confirm("Are you sure?");  Prompt box  Contains text, input field with default value: prompt ("enter amount", 10); 20

Built-in Browser Objects  The browser provides some read-only data via:  window  The top node of the DOM tree  Represents the browser's window  document  holds information the current loaded document  screen  Holds the user’s display properties  browser  Holds information about the browser 23

DOM Hierarchy – Example window navigator screen document history location form form button form 24

Opening New Window – Example  window.open() window-open.html var newWindow = window.open("", "sampleWindow", "width=300, height=100, menubar=yes, status=yes, resizable=yes"); newWindow.document.write( "<html><head><title> Sample Title</title> </head><body><h1>Sample Text</h1></body>"); newWindow.status = "Hello folks"; 25

The Navigator Object alert(window.navigator.userAgent); The browser The navigator in the The userAgent window browser window (browser ID) 26

The Screen Object  The screen object contains information about the display window.moveTo(0, 0); x = screen.availWidth; y = screen.availHeight; window.resizeTo(x, y); 27

Document and Location  document object  Provides some built-in arrays of specific objects on the currently loaded Web page document.links[0].href = "yahoo.com"; document.write( "This is some <b>bold text</b>");  document.location  Used to access the currently open URL or redirect the browser document.location = "http://www.yahoo.com/"; 28

Built-In Browser Objects Live Demo

The Math Object  The Math object provides some mathematical functions math.html for (i=1; i<=20; i++) { var x = Math.random(); x = 10*x + 1; x = Math.floor(x); document.write( "Random number (" + i + ") in range " + "1..10 --> " + x + "<br/>"); } 31

The Date Object  The Date object provides date / calendar functions dates.html var now = new Date(); var result = "It is now " + now; document.getElementById("timeField") .innerText = result; ... <p id="timeField"></p> 32

Timers: setTimeout()  Make something happen (once) after a fixed delay var timer = setTimeout('bang()', 5000); 5 seconds after this statement executes, this function is called clearTimeout(timer); Cancels the timer 33

Timers: setInterval()  Make something happen repeatedly at fixed intervals var timer = setInterval('clock()', 1000); This function is called continuously per 1 second. clearInterval(timer); Stop the timer. 34

Timer – Example timer-demo.html <script type="text/javascript"> function timerFunc() { var now = new Date(); var hour = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds(); document.getElementById("clock").value = "" + hour + ":" + min + ":" + sec; } setInterval('timerFunc()', 1000); </script> <input type="text" id="clock" /> 35

Other JavaScript Objects Live Demo

Debugging JavaScript  Modern browsers have JavaScript console where errors in scripts are reported  Errors may differ across browsers  Several tools to debug JavaScript  Microsoft Script Editor  Add-on for Internet Explorer  Supports breakpoints, watches  JavaScript statement debugger; opens the script editor 38

Firebug  Firebug – Firefox add-on for debugging JavaScript, CSS, HTML  Supports breakpoints, watches, JavaScript console editor  Very useful for CSS and HTML too  You can edit all the document real-time: CSS, HTML, etc  Shows how CSS rules apply to element  Shows Ajax requests and responses  Firebug is written mostly in JavaScript 39

JavaScript Console Object  The console object exists only if there is a debugging tool that supports it  Used to write log messages at runtime  Methods of the console object:  debug(message)  info(message)  log(message)  warn(message)  error(message) 41

Introduction JavaScript Development Questions?

01 Introduction - JavaScript Development

01 Introduction - JavaScript Development

More Related Content

What's hot

Viewers also liked

Similar to 01 Introduction - JavaScript Development

More from Tommy Vercety

Recently uploaded

01 Introduction - JavaScript Development