Introduction to JavaScript

Introduction to JavaScript
(C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Useful Resources Javascript info Some examples from W3Schools
HTML resources JavaScript Tutorials Some examples from W3Schools JavaScript Examples More examples JavaScript DHTML GUI Components Javascript info (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

HTML5 Page Structure <!DOCTYPE html>
<html xmlns=" lang="en" xml:lang="en"> <head> <meta charset="utf-8"/> <title>Great Company: homepage</title>  </head> <body>  XML namespaces help contextualize elements an attributes, among other things. It also offers a precise identification for a particular element or attribute. For instance, the <html> element can be defined by anyone and have any meaning. However, the <html> element within the namespace is unique and refers to the XHTML. . . .  </html> </body>

HTML5 Elements Therer are more than 100 different elements in HTML5.
Elements for meta information are placed in the head element. Elements for page content are placed in the <body> element. HTML5 distinguishes between two broad types of content elements: flow elements that occupy their own vertical space in a page and phrasing elements that act like words and phrases. Flow elements act like paragraphs, lists, and tables and can contain other flow elements, phrasing elements, and texts. Phrasing elements can contain other phrasing elements and texts. HTML Examples:

HTML5 Document Object Model
The HTML5 standard describes the HTML5 Document Object Model (DOM), which specifies how different element objects are structured and accessed as well as how they are organized into a DOM tree. The HTML DOM provides standardized APIs for document objects and user interface events. All major browsers implement these APIs in JavaScript.

HTML5 DOM Tree of Objects

HTML5 DOM Tree Example

CSS Defined: Short for "Cascading Style Sheets".
Determines how the elements in our XHTML documents are displayed and formatted. Designed to separate the content of a web page from the presentation of that content. Enables us to make all pages of our website look similar and consistent (font, color, etc.). Allows us to make site-wide formatting changes from a single location (rather than having to edit each page individually). (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Three Ways to Use CSS: Inline Style - CSS is placed directly into the HTML element. Internal Style Sheet - CSS is placed into a separate area within the <head> section of a web page. External Style Sheet - CSS is placed into a separate computer file and "connected" to a web page. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

CSS Format Conflicts It's possible for CSS formatting to be defined in all three locations at the same time. For example, a paragraph element could contain an inline style (color:red) but the internal style sheet (color:blue) and the external style sheet (color:green) give conflicting instructions to the web browser. Web browsers need a consistent way of "settling" this disagreement. Within this cascade of style declarations, the closest rule wins. An inline style overrules an internal style, which overrules an external style. We use the term cascading because there is an established order of priority to resolve these formatting conflicts: Inline style (highest priority) Internal style sheet (second priority) External style sheet (third priority) Web browser default (only if not defined elsewhere) (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Example: Inline Style A semicolon must follow each style declaration.
<h2 style="font-family:georgia; color:red;"> CAUTION: Stormy Weather! </h2> PREVIEW: A semicolon must follow each style declaration. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Example: Internal Style Sheet
<head> <style type="text/css"> h2 {font-family:georgia; color:red;} </style> </head> For internal style sheets, all formatting declarations are placed inside the <style> element within the <head> section of the document. An element is listed and all the styling information follows, surrounded by opening and closing curly brackets, { }. A semicolon must still follow each style declaration. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Example: External Style Sheet
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> style.css (separate file): h2 {font-family:georgia; color:red;} For external style sheets, a <link> tag is placed at the beginning of the <head> section of the document specifying the external style sheet (with a .css extension) to be used for formatting. The external style sheet uses the same syntax as the internal style sheet when listing elements and their styling. Styles declared in an external style sheet will affect all matching elements on all web pages that link to the stylesheet. In this example, all <h2> elements on all pages using this style sheet will be displayed in Georgia font and in red color. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Internal vs. External Style Sheets
Internal style sheets are appropriate for very small sites, especially those that have just one page. Internal style sheets might also make sense when each page of a site needs to have a completely different look. External style sheets are better for multi-page websites that need to have a uniform look and feel to all pages. External style sheets not only make for faster-loading sites (less redundant code) but also allow designers to make site-wide changes quickly and easily. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

CSS Terminology and Syntax
Correct syntax: selector {property:value;} p {color:red;} Selector Property Value (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Some Examples Paragraph Properties p { color:red; font-style:italic;
Background Picture body { background-image:url('picture.gif'); background-repeat:repeat-x; background-color:red; } Paragraph Properties p { color:red; font-style:italic; text-align:center; } (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

CSS Text Properties The following properties can be specified for any element that contains text, such as <h1> thru <h6>, <p>, <ol>, <ul>, and <a>: Property Some Possible Values text-align: center, left, right, justify text-decoration: underline, line-through, blink color: blue, green, yellow, red, white, etc. font-family: Arial, Verdana, "Times New Roman" font-size: large, 120%, 20px (pixels) font-weight: bold, normal font-style: italic, normal (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Dynamic User Interfaces
Dynamism for a webpage on the client side means a responsive and convenient user interface. Well-designed user interactions can enhance the functionality and usability of displayed pages and are achieved with JavaScript, a standard scripting language to control browser actions as well as all parts of a webpage. JavaScript programs associated with a webpage are loaded into a browser together with its HTML and CSS code. In the context of the browser, objects representing windows, the HTML document, elements in the document, attributes, styles, and events are made available for access and manipulation by JavaScript. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Dynamic User Interfaces
The HTML5 standard describes the HTML5 Document Object Model (DOM), which specifies how different element objects are structured and accessed as well as how they are organized into a DOM tree. The HTML DOM provides standardized APIs for document objects and user interface events. All major browsers implement these APIs in JavaScript. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

With JavaScript You Can
Monitor user events and specify reactions Make computations based on user input and display results Change the style and position of displayed elements Ask the browser to display informational or warning messages Pop up new windows and menus Detect browser type, version, and features Generate HTML code for parts of the page Modify/transform page content Check correctness of form input Go back and forth on visited pages or load new pages Control media loading and playback Perform and control CSS transitions and animations (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

About JavaScript JavaScript is the only widely accepted language for client-side scripting. And it is an international standard (ECMA-262 and ISO). JavaScript is an object-oriented language, and many constructs are similar to those in C++ or Java. JavaScript programs are embedded in webpages and executed by browsers that provide the host environment or execution context. JavaScript code can generate HTML code to be included in the page and perform tasks in reaction to certain events. The host environment supplies document objects, browser objects, and JavaScript built-in objects for script manipulation. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

About JavaScript These objects can represent the entire document and well-defined parts in it such as windows, buttons, menus, pop-ups, dialog boxes, text areas, anchors, frames, history, cookies, and input/output. Objects provide useful methods, functions contained in the objects, for various purposes. The host environment also provides a means to connect scripting code with events such as keyboard and mouse actions, page and image loading, form input and submission, error, and abort. Scripting code can also perform computation as the page is loading. Thus, the displayed page is the result of a combination of HTML, CSS, and JavaScript actions. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Getting Started with JavaScript
<section><h1>Hello JavaScript</h1> <p>JavaScript programming is fun.</p> <p>Time = <span class="generated"> <script type="text/javascript"> var dt = new Date(); var time=dt.getHours()+":"+dt.getMinutes(); document.write(time);</script></span></p> <p>UA = <span class="generated"> <script type="text/javascript"> document.write(navigator.userAgent); </script></span></p></section> Demo: Ex: AgentDate (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

JavaScript-Generated HTML

Placing JavaScript in Webpages
Code for defining functions or creating data structures is often placed in <script> elements inside the page’s <head> element. Code for generating HTML to be displayed as part of the page is placed in <script> elements inside the <body> where the generated HTML code will be inserted. Code for actions triggered by events is given as values of event attributes of HTML tags. The code is usually a function call or a few short statements. onfocus, onblur, onclick, onmouseover, and onmouseout are examples of event attributes. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

JavaScript in Separate Files
Use <script type="text/javascript" src="file.js"></script> to include file.js in a page. The src attribute of <script> gives the URL of the program file. The code is usually placed inside the head element but can be placed elsewhere on the page. Just before the end of body is a good placement because it avoids the JavaScript delaying the page display. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Image Rollover <img onmouseover="this.src=’wt2.png’" onmouseout="this.src=’wt1.png’" src="wt1.png" id="icon" alt="webtong.com logo" /> Demo: Ex: RollImg (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Event Actions In general, you can give one or more JavaScript statements (separated by ;) inside quotation marks to define the action in response to an event: onSomeEvent="st1; st2; ... " Generally, a mouseover, a mouseout, or any other event from any element can trigger any well-defined JavaScript actions on the page. The dynamic effects are only limited by your design and imagination.  <img src="wt.png" alt="webtong.com logo" onmouseover="this.style.opacity=0.4" onmouseout="this.style.opacity=1" /> target obj.style.property=value (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Manipulating HTML Element Attributes
It is also possible to access and set attributes of any element from JavaScript: target obj.hasAttribute(attribute name) // true or false target obj.getAttribute(attribute name) target obj.setAttribute(attribute name, value) target obj.removeAttribute(attribute name) (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

A Conversion Calculator
Demo: Ex: Convert (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

HTML code: <head><meta charset="utf-8"/> <title>Unit Conversion Demo</title> <script type="text/javascript" src="convert.js"> </script></head> <body style="background-color:#def" onload="init()"> <section><h1>Inch-Centimeter Converter</h1><p> <label>in <input id="in" size="10" type="number" onfocus="reset()" /></label> <input type="button" value="Convert" onclick="convert()"/> <label><input id="cm" size="10" type="number" onfocus="reset()" />cm</label></p> </section></body> (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

JavaScript code: var inf, cmf; function init() { inf = document.getElementById(’in’); cmf = document.getElementById(’cm’); } function convert() { var i = inf.value.replace(/ /,""); if (i){ cmf.value = i*2.54; return; } var c = cmf.value.replace(/ /,""); if ( c ) { inf.value = c / 2.54; } function reset() { inf.value = ""; cmf.value = ""; } (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Window Objects A window object represents an open window in a browser. A loaded webpage has its own predefined global window object that contains all other objects related to the page. If a document contains iframes, an additional window object is created for each iframe inside the page. A window object provides properties and methods for controlling the window. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Window Object Properties
The window object contains all other objects related to the page and many properties (attributes), including navigator—an object representing the browser software document—the object that represents the structure and content of the webpage (HTML code) location—an object containing the current URL history—a sequence of URLs visited previously frames—an array of windows, each for an iframe in the webpage (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Navigating via window window.location = someURL location = someURL
loads into the window a new page at the given URL. history.back(); // reloads the previous page history.forward(); reloads the next page history.go(-3); goes back three pages (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Dialog Windows You can solicit user interaction from JavaScript with
an alert window a prompt window a confirmation window (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Alert Window function checkCC(number)
{if ( credit card number invalid ) { window.alert("The credit card number is invalid."); return false; } else return true; Demo: Ex: Alert (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Prompt Window (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

window.prompt(message, default-string ) var email = window.prompt(
’Please enter your address:’); window.confirm(" is: " + ); Demo: Ex: Prompt (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

(C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea
Confirmation Window Demo: Ex: Confirm (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Opening New Windows window.open("URL", "window-name", "options")
window.open(" window.open(" "Abc", "scrollbars=yes, toolbar=no") (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

A Pop-Up Picture (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Pop-Up Window Example <a href="javascript:window.open(’ function popWindow(URL, w, h) {window.open(URL, "", "toolbar=no" + ",dependent=yes" + ",innerwidth="+ w + ",innerheight="+ h); } dependent—Makes the new window a child of the current window so it will close automatically if the current window closes. location—Displays the location entry or not. menubar—Adds the menu bar or not. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

resizable—Allows resizing or not.
scrollbars—Enables scroll bars or not. status—Adds bottom status bar or not. toolbar—Includes the toolbar or not. Demo: Ex: PopupWindow (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Input Pattern Checking

</label><br /><br />
The form HTML code: <form method="post" action="../exc5/showpost.php" onsubmit="return(checkForm(this))"> <label>Your 5+4 ZIP Code <input maxlength="10" required="" placeholder=" " name="zip_9" pattern="[0-9]{5}-[0-9]{4}" size="10" /></label> <label>Expiration date <input name="expiration_date" placeholder="mm/yy" size="10" required="" pattern="(0[1-9]|1[0-2])/[12][1-9]" maxlength="5" onchange="checkExpire(this)" /> </label><br /><br /> <input type="submit" value="Proceed" /></form> (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

The input checking functions: function checkForm(form)
{ if (checkExpire(form.expiration_date)) form.submit(); return false; } function checkExpire(field) { var arr = field.value.split("/"); var mm=arr[0], yy=arr[1]; if ( ! (1 <= mm && 12 >= mm && 11 <=yy && 22 >= yy)) return formErr(field, field.value); return true; (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

function formErr(entry, msg) { alert(entry.name + ": " + msg +
" is invalid."); entry.focus(); entry.select(); return false; } Demo: Ex: Check (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Scrolling Text (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Smooth Scrolling Text HTML code:
<body style="background-color: #def" onload="init_scroll()"> <section><h1>Scrolling Text Demo</h1> <div class="scrollbox" id="sd"> <div onclick="ss(this)" id="st" class="scrolltext"> <<b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b>><span id="endMarker"> </span></div> (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Smooth Scrolling Text CSS code: div.scrolltext
{ color: darkblue; font-size: medium; white-space: nowrap; margin-left: 0px font-family: Arial, Helvetica, sans-serif; } div.scrollbox { width: 500px; overflow: hidden; border: 1px solid darkblue; border-left: 3em solid transparent; border-right: 3em solid transparent; padding-top: 0.5em; padding-bottom: 0.5em; (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Smooth Scrolling Text JavaScript code:
var speed=30, advance=2, // scrolling speed boxwidth=500, endwidth=50, // scroll box width // left/right border width scrollNode, em, sd_end, sc_offset; function init_scroll() { var scrollDiv = document.getElementById("sd"); sd_end = xPosition(scrollDiv)+endwidth ; sc_offset = boxwidth-endwidth; scrollNode = document.getElementById("st"); em = document.getElementById("endMarker"); scrollNode.pauseFlag=false; scroll(); } (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

if ( xPosition(em)<sd_end ) sc_offset=boxwidth - endwidth;
function scroll() { if ( scrollNode.pauseFlag ) return; scrollNode.style.marginLeft = sc_offset+"px"; sc_offset -= advance; if ( xPosition(em)<sd_end ) sc_offset=boxwidth - endwidth; setTimeout("scroll()",speed); } function ss(node) { if ( node.pauseFlag ) { node.pauseFlag=false; scroll(); } else node.pauseFlag = true; Demo: Ex: Scroll (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Expanding Headline (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Expanding Headline Let’s apply CSS transition and transform for a smoothly expanding headline. HTML code: <div id="box"> <h1 id="headline">Dynamic </div> Web Programming and HTML5</h1> CSS code: div#box { display: table; margin-top: 4em; margin-left: auto; margin-right: auto; } (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

{ white-space: nowrap; letter-spacing: 0px;
h1#headline { white-space: nowrap; letter-spacing: 0px; transition: transform 1s linear; transition: letter-spacing 1s linear; } h1#headline:hover { letter-spacing: 16px; transform: scale(1.5); } We used the pseudo class :hover to activate the animation and transitions. But we can also trigger the transition with JavaScript. For example, we can replace the h1#headline:hover rule by h1#headline.expand and use document.getElementById(’headline’).className="expand"; to activate the animation. Demo: Ex: Headline (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Events and Event Objects
When a particular event takes place, the browser user interface creates an event object to represent the particulars of the event and dispatches or propagates the event object down the document hierarchy to the final target element that will receive the event. This is known as the capture phase of the event dispatch. After the delivery to the target element (the target phase), the event object will travel back up the chain of parent elements toward the root of the hierarchy (the bubble phase). (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

<img onclick="enlarge(this)" ... />
To enable an element to handle a particular type of events, you add an event listener (also known as an event handler) for that type of event to the element. An event listener supplies callback code that gets executed upon the particular events. The simplest way is to attach the callback code to an event handler attribute for the target element. <img onclick="enlarge(this)" ... /> <input onblurr="validate(this)" ... /> (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Window events (for the window object)—Handlers can be defined for the body element with event handler attributes including onload (window’s document loaded), onunload (window’s document unloaded), onscroll (window scrolled), onresize (window size changed), onfocus (window gained input focus), and onblur (window lost focus). Mouse events —Handlers can be defined for most HTML5 elements with event handler attributes including onclick (a mouse button clicked), ondblclick (a mouse button double-clicked), onmousedown (a mouse button pressed), onmouseup (a mouse button released), onmousewheel (mouse wheel rotated), onmousemove (mouse moved), onmouseover (mouse moved over element), and onmouseout (mouse moved out of element). Keyboard events—Handlers can be defined for HTML5 elements that may gain input focus with event handler (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

attributes onkeydown (any keyboard key is pressed), onkeypress (a character key is pressed), and onkeyup (a key is released). Input control events—Handlers can be defined for HTML5 input elements with event handler attributes onfocus (the element gained focus), onblur (the element lost focus), oninput (when element got user input), onchange (content of element changed), oninvalid (input field value is invalid), onsubmit (form submission requested), and onselect (element content is selected). Media events—Handlers can be defined for HTML5 media elements (audio, embed, img, object, and video) with event handler attributes including onloadstart (started to load media data), onprogress (loading media data), onloadeddata (media data finished loading), onplay (just before starting to play), onplaying (playing started), onpause (playing is paused), and onended (playing ended). This is part of the HTML5 media API. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Adding and Removing Event Listeners
From JavaScript el.addEventListener(event type, fn, capture phase) el.removeEventListener(event type, fn, capture phase) This ability is important to attach handlers to events not associated with HTML element attributes. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Testing and Debugging Common JavaScripting Problems
JavaScript files not loaded because of a wrong pathname, access permission problems. Syntax errors—typos, spelling mistakes, missing quotation marks, strings across multiple lines, missing or unmatched brackets, or incorrect object names or ids. JavaScript is case sensitive: myObject is not the same as myobject. Incorrect syntax is the most common problem. Run-time errors—problems that only occur when the script is executing. Accessing a nonexisting object attribute and using a null or undefined without first checking the quantity are examples. Logical errors—mistakes in the solution logic that make the script do the wrong thing or display the wrong information. Cross-browser errors —code that works only for certain browsers and not others. (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Browser Debugging Tools
Firefox Error Console Firefox Web Console (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Your Own Error Display function errorWindow() { errWindow =
window.open("", "JavaScript Errors", "toolbar=0,scrollbar=1,width=400, height=300"); } errWindow.document.writeln( "value of is " + ); (C) Prof. Paul S. Wang, Kent State Univ., Pravin Pawar - SUNY Korea

Introduction to JavaScript

Similar presentations

Presentation on theme: "Introduction to JavaScript"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Introduction to JavaScript

Similar presentations

Presentation on theme: "Introduction to JavaScript"— Presentation transcript:

Similar presentations

About project

Feedback