SlideShare a Scribd company logo
JavaScript CCSS TEAM: Eng. Musavir Iftekhar Bhatti
What is JavaScript ? Client-side language.( run in the client browser) Scripting language. (interpreted in run-time) Not compile like other language  (C#, C++, VB.Net etc). JavaScript code can be inserted directly in the HTML or can place it in a separate file with the .js extension and link the web page with the .js file.  Use in web browser for making a website more dynamic. Supported by Netscape 2+, Internet Explorer 3+, Opera 3+ and most of the other modern web browsers.  Contains variable, array,object,operators and function.
Usage of JavaScript Used to perform operations that would otherwise encumber the server, like form validation input. Can be easily used to interact with HTML elements such as validate text fields, disable buttons, validate forms, or change the background color of page.  Create dynamic page React to events   such the user enter name whenever the page load for 1 st  time. User can used entered value for welcome page.
Java VS JavaScript Code integrated with, and embedded in, HTML.  Applets distinct from HTML (accessed from HTML pages).  Variable data types not declared (loose typing).  Variable data types must be declared (strong typing).  Interpreted (not compiled) by client. Compiled on server before execution on client.  Much smaller and simpler set of commands . Much larger and advanced set of commands. Netscape Sun Microsystems JavaScript Java

Recommended for you

JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...

( ** Full Stack Web Development Training: https://www.edureka.co/masters-program/full-stack-developer-training ** ) This Edureka tutorial on JavaScript explains all the fundamentals of JavaScript with examples. It also explains various features and applications of JavaScript. Following are the topics included in this tutorial: 1. What Is JavaScript? 2. Why Use JavaScript 3. JavaScript Fundamentals - Data Types - Variables - Constants - Loops - Conditional Statements - Functions

javascriptjavascript tutorialjavascript tutorial for beginners
Javascript
JavascriptJavascript
Javascript

JavaScript is a scripting language used primarily for client-side web development. It is based on the ECMAScript standard but browsers support additional objects like Window and DOM objects. JavaScript can be used to create dynamic and interactive effects on web pages like menus, alerts, and updating content without reloading. It is commonly used for form validation, AJAX applications, and other interactive features. The document provides examples of basic JavaScript concepts like variables, data types, operators, and control structures and how to embed scripts in HTML.

JavaScript
JavaScriptJavaScript
JavaScript

This document provides an overview of JavaScript, including what it is, why it's used, who created it, its components and objects. JavaScript is a scripting language used primarily for client-side web page interactions. It allows adding dynamic and interactive elements to web pages. Some key points covered include: - JavaScript is used to specify webpage behavior and enable user interaction/effects. - It was created by Brendan Eich at Mozilla and allows both client-side and server-side scripting. - Common JavaScript objects include Document, Window, Math, Date and String. - Events, functions, variables and tags like <script> are JavaScript components. - The Document and Window

javascriptintroductionbeginners
How to Put a JavaScript Into an HTML Page JavaScript is written in the same way as HTML in a text editor (Notepad) JavaScript implementation was quite similar to CSS; you can link to outside files (with the file  extension .js) , or write blocks of code into your HTML documents with the <script> tag
<html>  <body>   <script type=&quot;text/javascript&quot;> document.write(&quot;HelloWorld!&quot;) </script>  </body>  </html> The above code will produce this output on the HTML page. HelloWorld!!
To insert a JavaScript into an HTML page, we use the <script> tag. The  <script type=&quot;text/javascript&quot;>  and  </script>  tells where the JavaScript starts and ends The  script  tag encloses any script code you want to use The  type  attribute alert the browser to the type of script it is about to deal with, it helps in code interpretation.
The comments around the  script  are there so that old browsers that don’t understand the script tag won’t display the code as text on the page. If the browser can do JavaScript, then it will ignore the comments.

Recommended for you

Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)

The document discusses the Document Object Model (DOM), which defines the logical structure of objects in an HTML document and how they can be manipulated with JavaScript. The DOM represents an HTML document as nodes and objects that can be accessed and modified with JavaScript. All HTML elements, text, and attributes can be accessed through the DOM to be modified, deleted, or have new elements created. Events allow scripts to run in response to user actions on a page.

and iframe objects image object etc dom hiearchymanaging events onload and onunload using the onclframeset
Java script
Java scriptJava script
Java script

JavaScript was designed to add interactivity to HTML pages. It is a scripting language that is usually embedded directly into HTML pages and allows for dynamic text, event handling, reading/writing HTML elements, and validating form data. JavaScript supports both client-side and server-side scripting and was originally developed by Netscape under the name LiveScript before being renamed. It provides programming capabilities to HTML authors and allows for dynamic content, user interaction, and validation without server requests.

Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript

This document provides an overview of web programming with JavaScript. It discusses topics like: - HTML and CSS which are used to structure and style web pages - How browsers interpret HTML, CSS, and JavaScript to display web pages - What backend and frontend development involve - Common JavaScript concepts like variables, operators, functions, and events - Tools that can be used for web development like text editors, browsers, and version control software - Resources for learning more about JavaScript and web programming

javascriptprogrammingintroduction
<html> <body>  <script type=&quot;text/javascript&quot;> ...  </script>  </body>  </html>
The word  document.write  is a standard  JavaScript command for writing output to a page. If we had not entered the <script> tag, the browser would have treated the document.write(&quot;Hello World!&quot;) command as pure text, and just write the entire line on the page.  This will be the output document.write(&quot;Hello World!&quot;)
You can place an unlimited number of scripts in your document, so that you can have scripts in both the body and the head section. <html> <head> <script type=“text/javascript”> …… </script> </head> <body> <script type=“text/javascript”> …… </script> </body>
External scripts To import scripts from external JavaScript files, save the code in the text file with the  .js  extension; without the script tags and comment.

Recommended for you

Java script ppt
Java script pptJava script ppt
Java script ppt

DOJO session from the IT team at The Health and Social Care Information Centre - All you need to know about Java Script!

dojo sessionhscicthe health and social care information centre
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypes

JavaScript variables hold values and are declared with var. Variable names are case sensitive and must begin with a letter or underscore. Variables can hold numbers, strings, Booleans, objects, and null values. Arrays are objects that hold multiple values in a single variable. Functions are blocks of code that perform tasks and are executed by events or calls. Objects store related data and functions to represent self-contained entities.

javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.ppt

This document provides an overview of JavaScript and the DOM (Document Object Model) for a web programming course. It introduces JavaScript as a scripting language used to add interactivity to HTML pages. It describes what JavaScript can do, such as dynamically updating text and reacting to events. It also covers JavaScript syntax, variables, operators, functions, and objects. A significant portion of the document is devoted to explaining the DOM and how it allows JavaScript to access and modify HTML elements and structure programmatically.

A simple example for external scripts Save as main.html Save as hello.js <html> <head> <body> <script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;hello.js&quot;> </body> </head> </script>   var hello = 'Hello World'; document.write(hello);
Output Hello World!
<noscript> tag The noscript element is used to define an alternate content (text) if a script is NOT executed. This tag is used for browsers that recognizes the <script> tag, but does not support the script in it. If a browser supports scripting, it will not display the text in the noscript element.
Example <noscript> Your browser does not support  JavaScript! </noscript>

Recommended for you

Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial

The document provides an overview of basic CSS (Cascading Style Sheets) concepts including what CSS is, why it is used, CSS syntax, selectors like element, class, ID and pseudo selectors, and common CSS properties for styling elements like color, background, fonts, text, lists, and borders. CSS is used to control the presentation and layout of HTML documents and is linked to HTML pages through <link> or <style> tags in the <head> section.

csstutorial
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction

JavaScript - An Introduction is a beginner's guide to JavaScript. It starts with very basic level and goes to intermediate level. You'll be introduced with every language constructs, Event handling, Form handling and AJAX which is supported by JavaScript with XMLHttpRequest object. This XHR object is discussed in enough detail so that you can understand how the underlying AJAX functionality works in jQuery. At the end it discusses advance concepts and library build on/around JavaScript.

introductionjavascriptevents
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript

This document provides an introduction to JavaScript and its uses for web programming. It explains that JavaScript is a client-side scripting language that allows web pages to become interactive. Some key points covered include: - JavaScript can change HTML content, styles, validate data, and make calculations. - Functions are blocks of code that perform tasks when invoked by events or called in code. - Events like clicks or keyboard presses trigger JavaScript code. - The DOM (Document Object Model) represents an HTML document that JavaScript can access and modify. - Forms and user input can be accessed and processed using the DOM. - Programming flow can be controlled with conditional and loop statements. -

javascriptintroduction
<html> <head> <body> ... ... <script type=&quot;text/javascript&quot;>  </script> <noscript> Your browser does not support  JavaScript! </noscript> ... ... </body>  </head> </html>
Object in JavaScript JavaScript is an Object Oriented Programming (OOP) language. An OOP language allows you to define your own objects and make your own variable types. We will only look at the built-in JavaScript objects, and how they are used. The next slides will explain each built-in JavaScript object in detail. Note that an object is just a special kind of data. An object has properties and methods.
Object in JavaScript The concept of Object Hierarchy in JavaScript can be illustrated by the above diagram. The window itself is an object that have document in it. In document it has another object such as images and forms. Each of these objects have its own properties and methods.
Object in JavaScript - properties Properties  are the values associated with an object. Below examples shows how to access  length property  of  document object  to return the number of characters in a string. <script type=&quot;text/javascript&quot;> var txt=&quot;Hello World!“ document.write(txt.length) </script> The output of the code above will be: 12  ( H e l l o [space] W o r l d ! )

Recommended for you

Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScript

This document discusses JavaScript events and event listeners. It begins with an introduction that defines events as notifications that specific actions occurred, like user or browser actions. Event handlers are scripts that are executed in response to events. Events can be used to trigger JavaScript code that responds to user interactions. The document then provides examples of common event types like onclick, onsubmit, onmouseover, onmouseout, focus, and blur. It also discusses how to add and remove event listeners using addEventListener() and removeEventListener() methods. The document concludes with an example demonstrating how events can be used to change an HTML element in response to user clicks.

CSS Basics
CSS BasicsCSS Basics
CSS Basics

Presentation to WordPress Memphis meetup group on December 2, 2010, CSS Basics. By designer Irina McGuire. http://www.irinamcguire.com

wordpresscsswordpress memphis
Introduction to php
Introduction to phpIntroduction to php
Introduction to php

This ppt wil guide all computer science engineering students through the Introduction of PHP programming language.

learningcomputinghtml
Object in JavaScript - methods Methods  are the actions that can be performed on objects. In the following example we are using the  toUpperCase() method  of the  String object  to display a text in uppercase letters: <script type=&quot;text/javascript&quot;> var str=&quot;Hello world!&quot;  document.write(str.toUpperCase()) </script> The output of the code above will be: HELLO WORLD!
The most commonly used JavaScript objects Focus, blur, select defaultValue, name, type, value Text Submit, reset Action, elements, encoding, FileUpload, method, name, target Form None Border, complete, heigth, hspace, lowwsrc, vspace, width Image Clear, close, open, write, writeln alinkColor, anchors, applets, ares, bgColor, cookie, fgColor, forms, images, lastModified, linkColor, links, location, referrer, title, vlinkColor Documents javaEnabled appCodeName, appName, appVersion, mimeTypes, plugins, userAgents Navigator Back Length, forward, go History Reload, replace Hash, host, hostname, href, pathname, por, protocol, search  Location Alert, blur, close, confirm, focus, open, prompt, clearTimeout, setTimeout  defaultStatus, frames, opener, parent, scroll, self, status, top, window  Frame Alert, blur ,close, confirm, focus, open, prompt, clearTimeout, setTimeout  defaultStatus, frames, opener, parent, scroll, self, status, top, window  Window Methods Properties Object
The most commonly used Built-in JavaScript Objects Methods Properties Objects Anchor, big, blink, bold, charAt, fixed, fontColor, fontSize, indexOf, italics, lastIndexOf, link, small, split, strike, sub, substring, sup, toLowerCase,toUpperCase   Length, Prototype String getDate, getDay, getHours, getMinutes, getMonth, getSeconds, getTime, getTimeZoneoffset, getYear, parse, prototype, setDate, setHours, setMinutes, setMonth, setSeconds, setTime, setYear, toGMTString, toLocaleString, UTC  None Date Join, reverse, sort xx Length Array
Built-in JavaScript Objects String Object Date Object Array Object Math Object Boolean Object

Recommended for you

css.ppt
css.pptcss.ppt
css.ppt

This document provides an introduction to Cascading Style Sheets (CSS) including its syntax, types, selectors and an example program. CSS allows styling web pages by separating design from content. CSS rules consist of selectors and declaration blocks with properties and values. There are three types of CSS styles: internal, inline, and external. Common selectors include element, ID, class, and grouping selectors. An example program demonstrates using CSS to style an HTML table with borders, padding, and rounded corners.

css.types of css
Javascript
JavascriptJavascript
Javascript

This document provides an introduction to JavaScript and discusses its uses, places to insert code, variables, operators, and the Document Object Model (DOM). JavaScript is an object-based scripting language used mainly for client-side validation, dynamic drop-downs, displaying data and time, and pop-ups. Code can be inserted between HTML tags, in external JavaScript files, or between the <head> tags. The DOM represents the HTML document as a tree structure that can be modified.

#javascriptweb designcodes
Oop in php_tutorial
Oop in php_tutorialOop in php_tutorial
Oop in php_tutorial

The document discusses learning object oriented programming (OOP) in PHP. It provides an introduction to OOP principles in PHP and walks through 23 steps to create a PHP class called "person" with properties like name and methods like set_name() and get_name() to set and get the name property. It shows how to instantiate person objects, set their property values, and access the property values. The goal is to help readers understand the basics of building objects and classes in PHP OOP.

ooptutorialphp
The String object is used to manipulate a stored piece of text. The following example uses the  length property  of the  String object  to find the length of a string: <script type=&quot;text/javascript&quot;> var txt=&quot;Hello World!” document.write(txt.length) </script> The above code will result in following output: 12 Built-in JavaScript Objects -  String
The Date object is used to work with dates and times. Example below shows how to use  Date() method  to get today’s date:  <script type=&quot;text/javascript&quot;> document.write(Date()) </script> The output will be: Mon Nov 05 15:51:51 2007  Built-in JavaScript Objects -  Date
This 2 nd  example shows how to use  getTime() method  to calculate years since 1970: <script type=&quot;text/javascript&quot;> var minutes = 1000*60 var hours = minutes*60 var days = hours*24 var years = days*365 var d = new Date() var t = d.getTime() var y = t/years document.write(&quot;It's been: &quot; + y + &quot; years since 1970/01/01!&quot;) </script> The output will be:   It's been: 37.86941401639396 years since 1970/01/01!  Built-in JavaScript Objects -  Date
The Array object is used to store a set of values in a single variable name.  1. We create a new Array by assigning it to a new keyword,  myArray: var mycars=new Array()  mycars[0]=“Lotus&quot;  mycars[1]=&quot;Volvo&quot;  mycars[2]=&quot;BMW&quot;   OR var mycars=new Array(&quot;Saab&quot;,&quot;Volvo&quot;,&quot;BMW&quot;) Built-in JavaScript Objects -  Array

Recommended for you

Object
ObjectObject
Object

The document discusses various methods available in the Object namespace in Prototype.js, including clone(), extend(), inspect(), keys(), values(), and toJSON(). clone() performs a shallow copy of an object. extend() copies properties from one object to another. inspect() returns a string representation of an object. keys() and values() return arrays of an object's property names and values respectively. toJSON() returns a JSON string from an object.

Php Calling Operators
Php Calling OperatorsPhp Calling Operators
Php Calling Operators

A form provides an interface for users to input data into a web application. A form has attributes like action and method that specify where the data will be submitted and how. Common methods are GET, which appends data to the URL, and POST, which sends data in the HTTP request body. Form data is processed by another script, usually accessed via the action URL. Conditional statements like if/else control program flow based on evaluating conditions.

Php Using Arrays
Php Using ArraysPhp Using Arrays
Php Using Arrays

Arrays allow storing multiple values in a single variable. There are indexed arrays which use numeric indices and associative arrays which use named keys. Arrays can be defined using the array() function or by directly assigning values. Arrays can be looped through using foreach loops or functions like sizeof() to get the size. Multidimensional arrays store arrays within other arrays.

2. We can refer to a particular element in an array by referring to  the name of the array and the index number. The index number  starts at 0. The following code line: document.write(mycars[0]) will result in the following output: Lotus 3. To modify a value in an existing array, just add a new value to  the array with a specified index number and then try to access it: mycars[0]=“Lexus” document.write(mycars[0]) will result in the following output: Lexus Built-in JavaScript Objects -  Array
The Math object allows you to perform common mathematical tasks. The Math object includes several mathematical values and functions. You do not need to define the Math object before using it. Built-in JavaScript Objects -  Math
JavaScript provides 8 mathematical values (constants) that can be accessed from the Math object.  These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, and base-10 log of E. You may reference these values from your JavaScript like this: Math.E  Math.PI  Math.SQRT2  Math.SQRT1_2  Math.LN2  Math.LN10  Math.LOG2E  Math.LOG10E Built-in JavaScript Objects –  Math - values
In addition to the mathematical values that can be accessed from the Math object there are also several functions (methods) available. The following example uses the  round() method  of the  Math object  to round a number to the nearest integer: document.write(Math.round(4.7)) The code above will result in the following output:   5 Built-in JavaScript Objects –  Math - methods

Recommended for you

Php Operators N Controllers
Php Operators N ControllersPhp Operators N Controllers
Php Operators N Controllers

The document discusses PHP control structures and operators including switch-case statements, while loops, do-while loops, and for loops. The switch-case statement allows executing different code blocks based on different conditions. While and do-while loops repeat a block of code as long as or until a condition is true. The for loop is used when the number of iterations is known and repeats code a specific number of times.

Php Error Handling
Php Error HandlingPhp Error Handling
Php Error Handling

This document discusses error handling in PHP. It begins by explaining the different types of errors in PHP - notices, warnings, and fatal errors. It then provides examples of how to control which errors are displayed to the user, define custom error handlers, trigger custom errors, and use exception handling with try/catch blocks. The key aspects covered are how to intercept errors gracefully and provide user-friendly messages.

CSC PPT 12.pptx
CSC PPT 12.pptxCSC PPT 12.pptx
CSC PPT 12.pptx

JavaScript is a client-side scripting language that allows dynamic interactions and effects on web pages. It can be inserted directly into HTML code or linked via external .js files. The DOM (Document Object Model) represents an HTML or XML document as a tree structure, with nodes for elements, attributes, and text. This allows JavaScript to access and manipulate the content, structure, and styling of documents. Common JavaScript objects include String, Date, Array, and Math objects for manipulating text, dates, arrays of values, and mathematical operations respectively.

The Boolean object is an object wrapper for a Boolean value. The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false). We define a Boolean object with the new keyword. The following code line defines a Boolean object called myBoolean: var myBoolean=new Boolean() Built-in JavaScript Objects -  Boolean
If the Boolean object has no initial value or if it is 0, -0, null, &quot;&quot;, false, undefined, or NaN, the object is set to false. Otherwise it is true (even with the string &quot;false&quot;). Example of Boolean object with initial value of  false : var myBoolean=new Boolean()  var myBoolean=new Boolean(0)  var myBoolean=new Boolean(null)  var myBoolean=new Boolean(&quot;&quot;)  var myBoolean=new Boolean(false)  var myBoolean=new Boolean(NaN)   Example of Boolean object with initial value of  true : var myBoolean=new Boolean(true)  var myBoolean=new Boolean(&quot;true&quot;)  var myBoolean=new Boolean(&quot;false&quot;)  var myBoolean=new Boolean(&quot;Richard&quot;)  Built-in JavaScript Objects -  Boolean
How to create an object? Create a direct instance of an object Create template of an object
Object A bird (object) Fly () name age EyeColor Eat() Drink() METHODS PROPERTIES

Recommended for you

Introduction to java script
Introduction to java scriptIntroduction to java script
Introduction to java script

JavaScript is the primary scripting language of the web and is used to make web pages interactive. It can dynamically write and modify HTML content, react to user events like clicks, validate form data, detect the browser, and more. JavaScript code is commonly embedded directly in HTML using <script> tags and can also be stored externally in .js files. Key JavaScript concepts include variables, operators, conditional statements, functions, loops, and events.

Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2

This is just a slight revamp of my previous slide on this topic.

jquerydomajax
JavaScript and jQuery Fundamentals
JavaScript and jQuery FundamentalsJavaScript and jQuery Fundamentals
JavaScript and jQuery Fundamentals

The document provides an overview of Dynamic HTML (DHTML) and its core technologies: HTML, CSS, JavaScript, and the DOM. It explains that DHTML allows dynamic and interactive web pages by combining these technologies. JavaScript is described as the scripting language that defines dynamic behavior, handling events and user interactions to manipulate the DOM. The document gives examples of common JavaScript functions, syntax elements, and how to incorporate JavaScript code into web pages.

1. Direct Instance Add few properties to the bird BirdObj=new Object() BirdObj.name=“MorningBird“ BirdObj.age=2  BirdObj.eyecolor=“green&quot;   Add methods to the bird BirdObj.fly = fly BirdObj.eat = eat BirfObj.Breath = breath
2. Create Template to the object function Bird(name,age,eyecolor)  {  this.name=name  this.age=age  this.eyecolor=eyecolor } When you have template, then you can create new instance of the object :  myBird= new Bird (“Parrot”, 2, “blue”)
You can also add some methods to the bird object. This is also done inside the template: function Bird(name,age,eyecolor)  {  this.name=name  this.age=age this. eyecolor=eyecolor this.habitat = habitat    new method } That methods are just functions attached to objects. Then we will have to write the habitat() function: function habitat(new_habitat) {  this.habitat=new_habitat } Eg :  myBird.habitat(“Pond”)
DOM: What is it? DOM Specification: “ a platform- and language-neutral  interface  that allows programs and scripts  to  dynamically  access and update  the  content, structure and style of documents . … [DOM] provides a standard  set of objects for representing HTML and XML documents , a standard model of how these objects can be combined, and a standard interface for accessing and manipulating them.”

Recommended for you

Jquery 1
Jquery 1Jquery 1
Jquery 1

Jquery is a JavaScript library that simplifies HTML document traversal, event handling, animating, and Ajax interactions. It is built on JavaScript and provides shortcuts and abstractions for many common tasks. Some key benefits of Jquery include providing cross-browser compatibility, an easy to use syntax, and a large number of plugins and functions to extend its capabilities.

what is jqueryintro to jqueryjquery
JavaScript
JavaScriptJavaScript
JavaScript

The document provides an overview of JavaScript and the Document Object Model (DOM). It introduces JavaScript as a scripting language used to add interactivity and dynamic behavior to web pages. It describes how JavaScript can be implemented in HTML using <script> tags in the head or body, or externally in .js files. The document then covers JavaScript syntax including data types, operators, conditional statements, loops, functions. It also discusses the DOM and how JavaScript can manipulate HTML elements and attributes.

mobile development course
Java script
 Java script Java script
Java script

JavaScript is a client-side scripting language that adds interactivity to HTML pages. It can be embedded in HTML using <script> tags and scripts can be placed internally in the HTML file or externally in a .js file. JavaScript code can be inserted in the <head> or <body> sections, but is typically placed at the end of the <body> for faster page loads. Core JavaScript concepts include variables, objects, functions, operators, conditions, loops, and arrays. The DOM (Document Object Model) allows JavaScript to access and modify HTML elements on the page and events can be used to trigger JavaScript functions in response to user actions.

DOM: Implementations Java-based parsers  (e.g.  Sun Project X, IBM XML4J,  Apache Xerces) MS IE5 browser: COM programming interfaces for C/C++ and MS Visual Basic, ActiveX object programming interfaces for script languages
Object-based document modelling Object model covers structure of a document behaviour of a document and its constituent objects DOM defines interfaces and objects for representing and manipulating documents semantics of these interfaces relationships between interfaces and objects
DOM  structure model   Based on O-O concepts: methods  (to access or change object’s state) interfaces  (declaration of a set of methods)  objects  (encapsulation of data and methods) Roughly similar to the XSLT/XPath data model     a parse tree
<invoice> <invoicepage form=&quot;00&quot;  type=&quot;estimatedbill&quot;> <addressee> <addressdata> <name>Leila Laskuprintti</name> <address> <streetaddress>Pyynpolku 1 </streetaddress> <postoffice>70460 KUOPIO </postoffice> </address> </addressdata> </addressee> ... XML DOM structure model invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Document Element NamedNodeMap Text

Recommended for you

Javascript
JavascriptJavascript
Javascript

This document introduces JavaScript, covering what it is, what it can do, basic syntax, operators, and how to incorporate JavaScript into HTML pages. JavaScript is explained as the scripting language of the web that is used to add interactivity and dynamic behavior to HTML pages. The document outlines common JavaScript tasks like validating forms, detecting browsers, and creating cookies. It also covers JavaScript basics like variables, arithmetic and comparison operators, and logical operators. Examples are provided for how to write JavaScript code directly in HTML pages and access HTML elements and form values. The different types of JavaScript boxes - confirm, prompt, and alert - are also introduced.

htmljavascript
Javascript survival for CSBN Sophomores
Javascript survival for CSBN SophomoresJavascript survival for CSBN Sophomores
Javascript survival for CSBN Sophomores

This is our guide to javascript programming for the second year students of CSBN. Please download this as your reference for notes, as well as coverage for exam and quiz.

javascript program
Introduction to javaScript
Introduction to javaScriptIntroduction to javaScript
Introduction to javaScript

This document provides an introduction to JavaScript, covering its basics as a client-side scripting language, syntax, variables, conditionals, loops, functions, events, objects, AJAX functionality, and more. JavaScript can be used to add interactive elements to web pages without reloading, and uses standards like XMLHttpRequest to asynchronously exchange data with servers in the background. AJAX examples demonstrate how JavaScript can retrieve external data files to dynamically update page content.

ajaxjavascript
HTML DOM structure model The DOM presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text.
The application support and intermediate DOM which existed before the creation of DOM Level 1. Example include the DHTML object model or the Netscape intermediate DOM. Level 0 is not a formal specification published by the W3C but rather a short hand that refers to what existed before the standardization process. Structure of DOM Level 0
Structure of DOM Level 1 Two parts: I: DOM  Core Interfaces Fundamental interfaces   low-level interfaces to structured documents Extended interfaces (next page) XML specific: CDATASection, DocumentType, Notation, Entity, EntityReference, ProcessingInstruction II: DOM  HTML Interfaces more convenient to access HTML documents Level 1 intentionally limited to representation and manipulation of document structure and content document instance only; no access to the contents of a DTD
DOM Level 2 support for namespaces accessing elements by ID attribute values optional features interfaces to document views and stylesheets an event model (for, say, user actions on elements) methods for traversing the document tree and manipulating regions of document (e.g., selected by the user of an editor)

Recommended for you

Javascript
JavascriptJavascript
Javascript

JavaScript is a scripting language that allows adding interactivity to HTML pages. It works in all major browsers and can be used to validate form data, detect the visitor's browser, create cookies, and more. JavaScript's official name is ECMAScript and it is the most popular scripting language on the internet.

Jscript Fundamentals
Jscript FundamentalsJscript Fundamentals
Jscript Fundamentals

This document provides an overview of JavaScript fundamentals including: 1. A brief history of JavaScript including its development by Netscape and standardization by ECMA and W3C. 2. The uses of JavaScript including creating interactive pages, generating HTML dynamically, handling events, and enhancing browser capabilities. 3. Key JavaScript language features such as its object-based nature, syntax similar to C++ and Java, and platform independence. 4. How to include scripts in HTML using <script> tags and handling browsers that don't support scripts with <noscript>. 5. Details on variables and data types, operators, control structures, arrays, and functions in JavaScript.

Java Script - A New Look
Java Script - A New LookJava Script - A New Look
Java Script - A New Look

This document provides an overview of JavaScript, including: - Its origins and development over time - How it can be used to make webpages dynamic and interactive - Key JavaScript concepts like variables, arrays, functions, and events - How it interacts with and manipulates the DOM - Its rebirth with the introduction of AJAX, which allows asynchronous data fetching and partial page updates

javascript
Consists of 6 different specifications: DOM Level 3 Core; DOM Level 3 Load and Save DOM Level 3 XPath; DOM Level 3 Views and Formatting; DOM Level 3 Requirements; and DOM Level 3 Validation, which further enhances the DOM DOM Level 3
Core Interfaces:  Node  & its variants Node Comment DocumentFragment Attr Text Element CDATASection ProcessingInstruction CharacterData Entity DocumentType Notation EntityReference “ Extended  interfaces” Document
DOM interfaces:  Node invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Node getNodeType getNodeValue getOwnerDocument getParentNode hasChildNodes getChildNodes getFirstChild getLastChild getPreviousSibling getNextSibling hasAttributes getAttributes appendChild(newChild) insertBefore(newChild,refChild) replaceChild(newChild,oldChild) removeChild(oldChild) Document Element NamedNodeMap Text
invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Document getDocumentElement createAttribute(name) createElement(tagName) createTextNode(data) getDocType() getElementById(IdVal) Node DOM interfaces:  Document Document Element NamedNodeMap Text

Recommended for you

Session vii(java scriptbasics)
Session vii(java scriptbasics)Session vii(java scriptbasics)
Session vii(java scriptbasics)

JavaScript is a programming language used to make web pages interactive. It allows calculations, form validation, games and other effects to be added to web pages. JavaScript code runs in the user's browser and works on any platform with a JavaScript-capable browser. Events like clicks or page loads can trigger JavaScript functions. JavaScript can be embedded directly in HTML pages or linked from external files and is commonly used to enhance user experience on websites.

webdevelopmentasp
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training

Javascript allows interactive content on web pages and control of the browser and document. It is an interpreted scripting language that is cross-platform but support varies. Javascript can provide interactive content, control document appearance and content, and interact with the user through event handlers.

exo javascript
JavaScript - Getting Started.pptx
JavaScript - Getting Started.pptxJavaScript - Getting Started.pptx
JavaScript - Getting Started.pptx

JavaScript is a programming language that allows web pages to be more interactive and dynamic. To add JavaScript to a web page, code is placed between opening and closing <script> tags, which can be inside the <head> or <body> sections. JavaScript code can either be directly written in the HTML file between <script> tags, or it can be saved in an external .js file and linked using the src attribute of the <script> tag. A basic "Hello World" JavaScript program uses the document.write() function to output text directly onto the web page. External JavaScript files allow code to be shared across multiple pages and edited in one place.

DOM interfaces:  Element invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Element getTagName getAttributeNode(name) setAttributeNode(attr) removeAttribute(name) getElementsByTagName(name) hasAttribute(name) Node Document Element NamedNodeMap Text
Additional Core Interfaces to handle ordered lists of nodes:  NodeList   e.g. from  Node.childNodes  or  Element.getElementsByTagName(&quot;name&quot;) all descendant elements of type  &quot;name&quot;  in document order  to access unordered sets of nodes by name:  NamedNodeMap e.g. from  Node.attributes NodeList s and  NamedNodeMap s are &quot;live&quot;: changes to the document structure reflected to their contents
Object Creation in  DOM Each DOM object  X  lives in the context of a  Document:  X .ownerDocument Objects implementing interface  Y  are created by factory methods  D .create Y (…)  , where D is a  Document  object. E.g:  createElement(&quot;A&quot;), createAttribute(&quot;href&quot;), createTextNode(&quot;Hello!&quot;) Creation and persistent saving of  Document s left to be specified by implementations
The main routine for  BuildXml public static void main(String args[]){ if (args.length > 0) { String fileName = args[0]; BuildXml buildXml = new  BuildXml(fileName);  } else {  System.err.println( &quot;Give filename as argument&quot;); }; } // main

Recommended for you

Javascript tutorial
Javascript tutorialJavascript tutorial
Javascript tutorial

Scripts are programs or sequences of instructions that are interpreted by another program rather than directly by the processor. Popular scripting languages include JavaScript, Perl, and VBScript. JavaScript scripts can be used to create dynamic web pages and validate form data. To include JavaScript in an HTML document, the <script> tag is used with type="text/javascript". Variables are containers that store information in JavaScript and can be assigned values using operators like =, +, -, *, /, etc.

tutorialsjavascript
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology

This document provides an outline and overview of client-side technologies including JavaScript, DOM, and jQuery. The outline covers JavaScript concepts like data types, control structures, arrays, functions, and objects. It also covers DOM levels and manipulating the DOM. Finally, it discusses jQuery and how to load, select elements, handle events, and more. The presentation aims to familiarize students with these important front-end technologies.

client side technologyweb technologywt
Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology

This document provides an outline and overview of client-side technologies including JavaScript, DOM, and jQuery. The outline includes sections on JavaScript concepts like data types, control structures, arrays, functions, and objects. It also covers DOM levels and manipulating the DOM, as well as introductions to jQuery for selecting elements, changing styles, and handling events. The presentation provides an overview of these key client-side technologies for students.

wtweb technologyclient sie technologies
JavaScript What is JavaScript? JavaScript was designed to add interactivity to HTML pages  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript consists of lines of executable computer code  A JavaScript is usually embedded directly into HTML pages  JavaScript is an interpreted language (means that scripts execute without preliminary compilation)  Everyone can use JavaScript without purchasing a license
What can a JavaScript Do? JavaScript gives HTML designers a programming tool  HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small &quot;snippets&quot; of code into their HTML pages  JavaScript can put dynamic text into an HTML page  A JavaScript statement like this: document.write(&quot;<h1>&quot; + name + &quot;</h1>&quot;) can write a variable text into an HTML page  JavaScript can react to events  A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
JavaScript can be used to detect the visitor's browser   A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser  JavaScript can be used to create cookies   A JavaScript can be used to store and retrieve information on the visitor's computer JavaScript can read and write HTML elements  A JavaScript can read and change the content of an HTML element  JavaScript can be used to validate data  A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
HTML Node Hierarchy

Recommended for you

JavaScript with Syntax & Implementation
JavaScript with Syntax & ImplementationJavaScript with Syntax & Implementation
JavaScript with Syntax & Implementation

JavaScript with Syntax & Implementation JavaScript : Features Syntax JavaScript :Objects JavaScript :Properties JavaScript :Methods JavaScript :Events JavaScript :Functions JavaScript :Values Variables JavaScript :Expressions JavaScript :Operators output of each components

javascriptwebweb2.0
Database Design Process
Database Design ProcessDatabase Design Process
Database Design Process

The document discusses the MySQL database design process. It covers defining keys to uniquely identify records, the different types of table relationships including one-to-one, one-to-many, and many-to-many, and the process of normalization to minimize duplication and inconsistencies. The three main levels of normalization discussed are first, second, and third normal forms, each with their own rules. Following proper database design, normalization, and defining relationships between tables is important for ensuring an efficient, flexible, and maintainable database structure.

Php Simple Xml
Php Simple XmlPhp Simple Xml
Php Simple Xml

The document describes a SimpleXML example that parses an XML file about a pet named Polly Parrot. It loads the XML file using simplexml_load_file(), then accesses the data within different elements like name, age, species, and parents using object notation. The script then modifies this data by assigning new values to the object properties and saves the changes back to the original XML file. Repeated elements like <sin> are represented as arrays and can be iterated over. Attribute values are accessed as array elements. Custom element collections can be created using XPath to select specific elements.

How Javascript Interact With HTML DOM The primary use of JavaScript is to  write functions  that are  embedded in or included from HTML pages and interact with the  Document Object Model (DOM)  of the page. Some simple examples of  this usage are: A) Opening or popping up a new window with programmatic control  over the size, position and 'look' of the new window  (i.e. whether the menus, toolbars, etc. are visible). B) Validation of web form input values to make sure that they  will be accepted before they are submitted to the server.  C) Changing images as the mouse cursor moves over them: This  effect is often used to draw the user's attention to important  links displayed as graphical elements.
Javascript Objects Description   Object   Contains the visited URLs in the browser window  History  Contains information about the current URL  Location  Contains information about the client's display screen  Screen  Contains information about the client's browser  Navigator Represents a browser window. A that is created automatically with every instance of a <body> or <frameset> tag  Window
HTML DOM Objects Represent an <option> element / selection list in an HTML document. Option / Select Represents an <a> element  Anchor Represents a <form> element   Form   Represents the state of an event Event Represents an <img> element Image Represents a <frame>/<frameset> element   Frame / frameset Represent a <table>, <td> and <tr> element. Table, TableHeader, TableRow Represents the entire HTML document and can be used to access all elements in a page. Document Description Object
Adding in a new element var link = document.createElement('a'); link.setAttribute('href', 'mypage.htm');

Recommended for you

Php String And Regular Expressions
Php String  And Regular ExpressionsPhp String  And Regular Expressions
Php String And Regular Expressions

The document discusses string manipulation and regular expressions. It provides explanations of regular expression syntax including brackets, quantifiers, predefined character ranges, and flags. It also summarizes PHP functions for regular expressions like ereg(), eregi(), ereg_replace(), split(), and sql_regcase(). Practical examples of using these functions are shown.

Php Sq Lite
Php Sq LitePhp Sq Lite
Php Sq Lite

SQLite is a file-based database engine that stores databases in files on disk. It supports databases up to 2TB in size and can be easily portable across platforms. SQLite is completely typeless, meaning fields do not need to be associated with a specific type. SQL commands are used to interact with SQLite databases from PHP. Queries return result objects that can be fetched and processed row by row or all at once to retrieve the full result set.

Php Sessoins N Cookies
Php Sessoins N CookiesPhp Sessoins N Cookies
Php Sessoins N Cookies

Session and cookies allow storing and retrieving data on the client-side. Sessions use a session ID to track user data across page requests. Cookies are stored in the browser and can persist longer than a session. The document provides examples of using sessions to track a counter and login information. It also demonstrates setting, retrieving, and deleting cookies to store form data between submissions.

locating a slot in the document by location: document.childNodes[1].childNodes[0]  Find the main document element (HTML), and find its second child (BODY), then look for its first child (DIV) by ID:  document.getElementById('myDiv').appendChild(txt);
Hiding an element document.childNodes[1].childNodes[1].childNodes[0].style.display = &quot;none&quot;;
Loading an XML document object into the parser <script language=&quot;JavaScript&quot;>   var xmlDoc = new ActiveXObject(&quot;Microsoft.XMLDOM&quot;)  xmlDoc.async=&quot;false&quot;  xmlDoc.load(&quot;note.xml&quot;)  // ....... processing the document goes here </script>
Manually loading XML into the parser   <script language=&quot;JavaScript&quot;>  // load up variable var with some xml   var text=&quot;<note>&quot;  text=text+&quot;<to>John</to><from>Robert</from>&quot;  text=text+&quot;<heading>Reminder</heading>&quot;  text=text+&quot;<body>Don't forget your homework!</body>&quot;  text=text+&quot;</note>&quot;  // now create the DO   var xmlDoc = new ActiveXObject(&quot;Microsoft.XMLDOM&quot;)  xmlDoc.async=&quot;false&quot;  xmlDoc. loadXML (text)  // ....... process the document   </script>

Recommended for you

Php Rss
Php RssPhp Rss
Php Rss

This document describes how to build a simple RSS news aggregator using PHP, SQLite and XML. It includes code snippets to design a database to store RSS feed details, retrieve and parse feed data to display articles, and an administration interface to manage feeds. The aggregator allows users to select multiple RSS feeds, displays the latest stories from each feed, and has an admin panel to add, edit or remove feeds from the aggregator.

Php Reusing Code And Writing Functions
Php Reusing Code And Writing FunctionsPhp Reusing Code And Writing Functions
Php Reusing Code And Writing Functions

The document discusses functions in PHP, including defining functions, passing arguments to functions, returning values from functions, and using global variables. Some key points covered include: - Functions allow code to be reused and separated into logical subsections, making code more modular, readable, and maintainable. - Arguments passed to functions can make functions more flexible by allowing different inputs to produce different outputs each time they are called. - Functions can return values to the calling code using the return statement. Returned values can be variables, arrays, or results of calculations. - The order arguments are passed to a function matters, as arguments are assigned to placeholder variables in the defined order. Default values can be specified for arguments.

Php Oop
Php OopPhp Oop
Php Oop

OOP in PHP allows for the creation of classes and objects. A class defines properties and methods, while an object is an instance of a class. Key OOP concepts include inheritance, where a child class extends a parent class; encapsulation, which hides internal data; and polymorphism through inheritance and method overriding. Exceptions can be thrown and caught to handle errors or unexpected behavior.

parseError  object document.write(xmlDoc.parseError. property )   errorCode : Returns a long integer error code  reason : Returns a string explaining the reason for the error  line : Returns a long integer representing the line number for the error  linePos : Returns a long integer representing the line position for the error  srcText : Returns a string containing the line that caused the error  url : Returns the url pointing the loaded document  filePos : Returns a long integer file position of the error
Traversing nodes set xmlDoc=CreateObject(&quot;Microsoft.XMLDOM&quot;) xmlDoc.async=&quot;false&quot;  xmlDoc.load(&quot;note.xml&quot;)  for each x in xmlDoc.documentElement.childNodes  document.write(x.nodename)  document.write(&quot;: &quot;)  document.write(x.text)  next
Calling XML nodes by name var xmlDoc = new ActiveXObject(&quot;Microsoft.XMLDOM&quot;)  xmlDoc.async=&quot;false&quot;  xmlDoc.load(&quot;note.xml&quot;)  document.write(xmlDoc.getElementsByTagName(&quot;from&quot;).item(0).text)

More Related Content

What's hot

Java script
Java scriptJava script
Java script
Shyam Khant
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
WebStackAcademy
 
Js ppt
Js pptJs ppt
Js ppt
Rakhi Thota
 
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
Edureka!
 
Javascript
JavascriptJavascript
Javascript
Manav Prasad
 
JavaScript
JavaScriptJavaScript
JavaScript
Vidyut Singhania
 
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)
Partnered Health
 
Java script
Java scriptJava script
Java script
Abhishek Kesharwani
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript
T11 Sessions
 
Java script ppt
Java script pptJava script ppt
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypes
Varun C M
 
javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.ppt
sentayehu
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
tutorialsruby
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
Walid Ashraf
 
Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScript
ShahDhruv21
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
WordPress Memphis
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to php
Taha Malampatti
 
css.ppt
css.pptcss.ppt
css.ppt
bhasula
 
Javascript
JavascriptJavascript
Javascript
Mayank Bhatt
 

What's hot (20)

Java script
Java scriptJava script
Java script
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
Js ppt
Js pptJs ppt
Js ppt
 
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
 
Javascript
JavascriptJavascript
Javascript
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)
 
Java script
Java scriptJava script
Java script
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypes
 
javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.ppt
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScript
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to php
 
css.ppt
css.pptcss.ppt
css.ppt
 
Javascript
JavascriptJavascript
Javascript
 

Viewers also liked

Oop in php_tutorial
Oop in php_tutorialOop in php_tutorial
Oop in php_tutorial
Gregory Hanis
 
Object
ObjectObject
Object
mussawir20
 
Php Calling Operators
Php Calling OperatorsPhp Calling Operators
Php Calling Operators
mussawir20
 
Php Using Arrays
Php Using ArraysPhp Using Arrays
Php Using Arrays
mussawir20
 
Php Operators N Controllers
Php Operators N ControllersPhp Operators N Controllers
Php Operators N Controllers
mussawir20
 
Php Error Handling
Php Error HandlingPhp Error Handling
Php Error Handling
mussawir20
 

Viewers also liked (6)

Oop in php_tutorial
Oop in php_tutorialOop in php_tutorial
Oop in php_tutorial
 
Object
ObjectObject
Object
 
Php Calling Operators
Php Calling OperatorsPhp Calling Operators
Php Calling Operators
 
Php Using Arrays
Php Using ArraysPhp Using Arrays
Php Using Arrays
 
Php Operators N Controllers
Php Operators N ControllersPhp Operators N Controllers
Php Operators N Controllers
 
Php Error Handling
Php Error HandlingPhp Error Handling
Php Error Handling
 

Similar to Javascript

CSC PPT 12.pptx
CSC PPT 12.pptxCSC PPT 12.pptx
CSC PPT 12.pptx
DrRavneetSingh
 
Introduction to java script
Introduction to java scriptIntroduction to java script
Introduction to java script
nanjil1984
 
Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2
borkweb
 
JavaScript and jQuery Fundamentals
JavaScript and jQuery FundamentalsJavaScript and jQuery Fundamentals
JavaScript and jQuery Fundamentals
BG Java EE Course
 
Jquery 1
Jquery 1Jquery 1
JavaScript
JavaScriptJavaScript
JavaScript
Doncho Minkov
 
Java script
 Java script Java script
Java script
bosybosy
 
Javascript
JavascriptJavascript
Javascript
Iblesoft
 
Javascript survival for CSBN Sophomores
Javascript survival for CSBN SophomoresJavascript survival for CSBN Sophomores
Javascript survival for CSBN Sophomores
Andy de Vera
 
Introduction to javaScript
Introduction to javaScriptIntroduction to javaScript
Introduction to javaScript
Neil Ghosh
 
Javascript
JavascriptJavascript
Javascript
Sushma M
 
Jscript Fundamentals
Jscript FundamentalsJscript Fundamentals
Jscript Fundamentals
rspaike
 
Java Script - A New Look
Java Script - A New LookJava Script - A New Look
Java Script - A New Look
rumsan
 
Session vii(java scriptbasics)
Session vii(java scriptbasics)Session vii(java scriptbasics)
Session vii(java scriptbasics)
Shrijan Tiwari
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
Hoat Le
 
JavaScript - Getting Started.pptx
JavaScript - Getting Started.pptxJavaScript - Getting Started.pptx
JavaScript - Getting Started.pptx
JonnJorellPunto
 
Javascript tutorial
Javascript tutorialJavascript tutorial
Javascript tutorial
Avinash Malhotra
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK
 
Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology
PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK
 
JavaScript with Syntax & Implementation
JavaScript with Syntax & ImplementationJavaScript with Syntax & Implementation
JavaScript with Syntax & Implementation
Soumen Santra
 

Similar to Javascript (20)

CSC PPT 12.pptx
CSC PPT 12.pptxCSC PPT 12.pptx
CSC PPT 12.pptx
 
Introduction to java script
Introduction to java scriptIntroduction to java script
Introduction to java script
 
Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2
 
JavaScript and jQuery Fundamentals
JavaScript and jQuery FundamentalsJavaScript and jQuery Fundamentals
JavaScript and jQuery Fundamentals
 
Jquery 1
Jquery 1Jquery 1
Jquery 1
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Java script
 Java script Java script
Java script
 
Javascript
JavascriptJavascript
Javascript
 
Javascript survival for CSBN Sophomores
Javascript survival for CSBN SophomoresJavascript survival for CSBN Sophomores
Javascript survival for CSBN Sophomores
 
Introduction to javaScript
Introduction to javaScriptIntroduction to javaScript
Introduction to javaScript
 
Javascript
JavascriptJavascript
Javascript
 
Jscript Fundamentals
Jscript FundamentalsJscript Fundamentals
Jscript Fundamentals
 
Java Script - A New Look
Java Script - A New LookJava Script - A New Look
Java Script - A New Look
 
Session vii(java scriptbasics)
Session vii(java scriptbasics)Session vii(java scriptbasics)
Session vii(java scriptbasics)
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
JavaScript - Getting Started.pptx
JavaScript - Getting Started.pptxJavaScript - Getting Started.pptx
JavaScript - Getting Started.pptx
 
Javascript tutorial
Javascript tutorialJavascript tutorial
Javascript tutorial
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
 
Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology
 
JavaScript with Syntax & Implementation
JavaScript with Syntax & ImplementationJavaScript with Syntax & Implementation
JavaScript with Syntax & Implementation
 

More from mussawir20

Database Design Process
Database Design ProcessDatabase Design Process
Database Design Process
mussawir20
 
Php Simple Xml
Php Simple XmlPhp Simple Xml
Php Simple Xml
mussawir20
 
Php String And Regular Expressions
Php String  And Regular ExpressionsPhp String  And Regular Expressions
Php String And Regular Expressions
mussawir20
 
Php Sq Lite
Php Sq LitePhp Sq Lite
Php Sq Lite
mussawir20
 
Php Sessoins N Cookies
Php Sessoins N CookiesPhp Sessoins N Cookies
Php Sessoins N Cookies
mussawir20
 
Php Rss
Php RssPhp Rss
Php Rss
mussawir20
 
Php Reusing Code And Writing Functions
Php Reusing Code And Writing FunctionsPhp Reusing Code And Writing Functions
Php Reusing Code And Writing Functions
mussawir20
 
Php Oop
Php OopPhp Oop
Php Oop
mussawir20
 
Php My Sql
Php My SqlPhp My Sql
Php My Sql
mussawir20
 
Php File Operations
Php File OperationsPhp File Operations
Php File Operations
mussawir20
 
Php Crash Course
Php Crash CoursePhp Crash Course
Php Crash Course
mussawir20
 
Php Basic Security
Php Basic SecurityPhp Basic Security
Php Basic Security
mussawir20
 
Javascript Oop
Javascript OopJavascript Oop
Javascript Oop
mussawir20
 
Html
HtmlHtml
Object Range
Object RangeObject Range
Object Range
mussawir20
 
Prototype Utility Methods(1)
Prototype Utility Methods(1)Prototype Utility Methods(1)
Prototype Utility Methods(1)
mussawir20
 
Date
DateDate
Prototype js
Prototype jsPrototype js
Prototype js
mussawir20
 
Template
TemplateTemplate
Template
mussawir20
 
Class
ClassClass
Class
mussawir20
 

More from mussawir20 (20)

Database Design Process
Database Design ProcessDatabase Design Process
Database Design Process
 
Php Simple Xml
Php Simple XmlPhp Simple Xml
Php Simple Xml
 
Php String And Regular Expressions
Php String  And Regular ExpressionsPhp String  And Regular Expressions
Php String And Regular Expressions
 
Php Sq Lite
Php Sq LitePhp Sq Lite
Php Sq Lite
 
Php Sessoins N Cookies
Php Sessoins N CookiesPhp Sessoins N Cookies
Php Sessoins N Cookies
 
Php Rss
Php RssPhp Rss
Php Rss
 
Php Reusing Code And Writing Functions
Php Reusing Code And Writing FunctionsPhp Reusing Code And Writing Functions
Php Reusing Code And Writing Functions
 
Php Oop
Php OopPhp Oop
Php Oop
 
Php My Sql
Php My SqlPhp My Sql
Php My Sql
 
Php File Operations
Php File OperationsPhp File Operations
Php File Operations
 
Php Crash Course
Php Crash CoursePhp Crash Course
Php Crash Course
 
Php Basic Security
Php Basic SecurityPhp Basic Security
Php Basic Security
 
Javascript Oop
Javascript OopJavascript Oop
Javascript Oop
 
Html
HtmlHtml
Html
 
Object Range
Object RangeObject Range
Object Range
 
Prototype Utility Methods(1)
Prototype Utility Methods(1)Prototype Utility Methods(1)
Prototype Utility Methods(1)
 
Date
DateDate
Date
 
Prototype js
Prototype jsPrototype js
Prototype js
 
Template
TemplateTemplate
Template
 
Class
ClassClass
Class
 

Recently uploaded

Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 

Recently uploaded (20)

Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 

Javascript

  • 1. JavaScript CCSS TEAM: Eng. Musavir Iftekhar Bhatti
  • 2. What is JavaScript ? Client-side language.( run in the client browser) Scripting language. (interpreted in run-time) Not compile like other language (C#, C++, VB.Net etc). JavaScript code can be inserted directly in the HTML or can place it in a separate file with the .js extension and link the web page with the .js file. Use in web browser for making a website more dynamic. Supported by Netscape 2+, Internet Explorer 3+, Opera 3+ and most of the other modern web browsers. Contains variable, array,object,operators and function.
  • 3. Usage of JavaScript Used to perform operations that would otherwise encumber the server, like form validation input. Can be easily used to interact with HTML elements such as validate text fields, disable buttons, validate forms, or change the background color of page. Create dynamic page React to events such the user enter name whenever the page load for 1 st time. User can used entered value for welcome page.
  • 4. Java VS JavaScript Code integrated with, and embedded in, HTML. Applets distinct from HTML (accessed from HTML pages). Variable data types not declared (loose typing). Variable data types must be declared (strong typing). Interpreted (not compiled) by client. Compiled on server before execution on client. Much smaller and simpler set of commands . Much larger and advanced set of commands. Netscape Sun Microsystems JavaScript Java
  • 5. How to Put a JavaScript Into an HTML Page JavaScript is written in the same way as HTML in a text editor (Notepad) JavaScript implementation was quite similar to CSS; you can link to outside files (with the file extension .js) , or write blocks of code into your HTML documents with the <script> tag
  • 6. <html> <body> <script type=&quot;text/javascript&quot;> document.write(&quot;HelloWorld!&quot;) </script> </body> </html> The above code will produce this output on the HTML page. HelloWorld!!
  • 7. To insert a JavaScript into an HTML page, we use the <script> tag. The <script type=&quot;text/javascript&quot;> and </script> tells where the JavaScript starts and ends The script tag encloses any script code you want to use The type attribute alert the browser to the type of script it is about to deal with, it helps in code interpretation.
  • 8. The comments around the script are there so that old browsers that don’t understand the script tag won’t display the code as text on the page. If the browser can do JavaScript, then it will ignore the comments.
  • 9. <html> <body> <script type=&quot;text/javascript&quot;> ... </script> </body> </html>
  • 10. The word document.write is a standard JavaScript command for writing output to a page. If we had not entered the <script> tag, the browser would have treated the document.write(&quot;Hello World!&quot;) command as pure text, and just write the entire line on the page. This will be the output document.write(&quot;Hello World!&quot;)
  • 11. You can place an unlimited number of scripts in your document, so that you can have scripts in both the body and the head section. <html> <head> <script type=“text/javascript”> …… </script> </head> <body> <script type=“text/javascript”> …… </script> </body>
  • 12. External scripts To import scripts from external JavaScript files, save the code in the text file with the .js extension; without the script tags and comment.
  • 13. A simple example for external scripts Save as main.html Save as hello.js <html> <head> <body> <script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;hello.js&quot;> </body> </head> </script> var hello = 'Hello World'; document.write(hello);
  • 15. <noscript> tag The noscript element is used to define an alternate content (text) if a script is NOT executed. This tag is used for browsers that recognizes the <script> tag, but does not support the script in it. If a browser supports scripting, it will not display the text in the noscript element.
  • 16. Example <noscript> Your browser does not support JavaScript! </noscript>
  • 17. <html> <head> <body> ... ... <script type=&quot;text/javascript&quot;> <!-- document.write(&quot;Hello World!&quot;) //--> </script> <noscript> Your browser does not support JavaScript! </noscript> ... ... </body> </head> </html>
  • 18. Object in JavaScript JavaScript is an Object Oriented Programming (OOP) language. An OOP language allows you to define your own objects and make your own variable types. We will only look at the built-in JavaScript objects, and how they are used. The next slides will explain each built-in JavaScript object in detail. Note that an object is just a special kind of data. An object has properties and methods.
  • 19. Object in JavaScript The concept of Object Hierarchy in JavaScript can be illustrated by the above diagram. The window itself is an object that have document in it. In document it has another object such as images and forms. Each of these objects have its own properties and methods.
  • 20. Object in JavaScript - properties Properties are the values associated with an object. Below examples shows how to access length property of document object to return the number of characters in a string. <script type=&quot;text/javascript&quot;> var txt=&quot;Hello World!“ document.write(txt.length) </script> The output of the code above will be: 12 ( H e l l o [space] W o r l d ! )
  • 21. Object in JavaScript - methods Methods are the actions that can be performed on objects. In the following example we are using the toUpperCase() method of the String object to display a text in uppercase letters: <script type=&quot;text/javascript&quot;> var str=&quot;Hello world!&quot; document.write(str.toUpperCase()) </script> The output of the code above will be: HELLO WORLD!
  • 22. The most commonly used JavaScript objects Focus, blur, select defaultValue, name, type, value Text Submit, reset Action, elements, encoding, FileUpload, method, name, target Form None Border, complete, heigth, hspace, lowwsrc, vspace, width Image Clear, close, open, write, writeln alinkColor, anchors, applets, ares, bgColor, cookie, fgColor, forms, images, lastModified, linkColor, links, location, referrer, title, vlinkColor Documents javaEnabled appCodeName, appName, appVersion, mimeTypes, plugins, userAgents Navigator Back Length, forward, go History Reload, replace Hash, host, hostname, href, pathname, por, protocol, search Location Alert, blur, close, confirm, focus, open, prompt, clearTimeout, setTimeout defaultStatus, frames, opener, parent, scroll, self, status, top, window Frame Alert, blur ,close, confirm, focus, open, prompt, clearTimeout, setTimeout defaultStatus, frames, opener, parent, scroll, self, status, top, window Window Methods Properties Object
  • 23. The most commonly used Built-in JavaScript Objects Methods Properties Objects Anchor, big, blink, bold, charAt, fixed, fontColor, fontSize, indexOf, italics, lastIndexOf, link, small, split, strike, sub, substring, sup, toLowerCase,toUpperCase Length, Prototype String getDate, getDay, getHours, getMinutes, getMonth, getSeconds, getTime, getTimeZoneoffset, getYear, parse, prototype, setDate, setHours, setMinutes, setMonth, setSeconds, setTime, setYear, toGMTString, toLocaleString, UTC None Date Join, reverse, sort xx Length Array
  • 24. Built-in JavaScript Objects String Object Date Object Array Object Math Object Boolean Object
  • 25. The String object is used to manipulate a stored piece of text. The following example uses the length property of the String object to find the length of a string: <script type=&quot;text/javascript&quot;> var txt=&quot;Hello World!” document.write(txt.length) </script> The above code will result in following output: 12 Built-in JavaScript Objects - String
  • 26. The Date object is used to work with dates and times. Example below shows how to use Date() method to get today’s date: <script type=&quot;text/javascript&quot;> document.write(Date()) </script> The output will be: Mon Nov 05 15:51:51 2007 Built-in JavaScript Objects - Date
  • 27. This 2 nd example shows how to use getTime() method to calculate years since 1970: <script type=&quot;text/javascript&quot;> var minutes = 1000*60 var hours = minutes*60 var days = hours*24 var years = days*365 var d = new Date() var t = d.getTime() var y = t/years document.write(&quot;It's been: &quot; + y + &quot; years since 1970/01/01!&quot;) </script> The output will be: It's been: 37.86941401639396 years since 1970/01/01! Built-in JavaScript Objects - Date
  • 28. The Array object is used to store a set of values in a single variable name. 1. We create a new Array by assigning it to a new keyword, myArray: var mycars=new Array() mycars[0]=“Lotus&quot; mycars[1]=&quot;Volvo&quot; mycars[2]=&quot;BMW&quot; OR var mycars=new Array(&quot;Saab&quot;,&quot;Volvo&quot;,&quot;BMW&quot;) Built-in JavaScript Objects - Array
  • 29. 2. We can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. The following code line: document.write(mycars[0]) will result in the following output: Lotus 3. To modify a value in an existing array, just add a new value to the array with a specified index number and then try to access it: mycars[0]=“Lexus” document.write(mycars[0]) will result in the following output: Lexus Built-in JavaScript Objects - Array
  • 30. The Math object allows you to perform common mathematical tasks. The Math object includes several mathematical values and functions. You do not need to define the Math object before using it. Built-in JavaScript Objects - Math
  • 31. JavaScript provides 8 mathematical values (constants) that can be accessed from the Math object. These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, and base-10 log of E. You may reference these values from your JavaScript like this: Math.E Math.PI Math.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Built-in JavaScript Objects – Math - values
  • 32. In addition to the mathematical values that can be accessed from the Math object there are also several functions (methods) available. The following example uses the round() method of the Math object to round a number to the nearest integer: document.write(Math.round(4.7)) The code above will result in the following output: 5 Built-in JavaScript Objects – Math - methods
  • 33. The Boolean object is an object wrapper for a Boolean value. The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false). We define a Boolean object with the new keyword. The following code line defines a Boolean object called myBoolean: var myBoolean=new Boolean() Built-in JavaScript Objects - Boolean
  • 34. If the Boolean object has no initial value or if it is 0, -0, null, &quot;&quot;, false, undefined, or NaN, the object is set to false. Otherwise it is true (even with the string &quot;false&quot;). Example of Boolean object with initial value of false : var myBoolean=new Boolean() var myBoolean=new Boolean(0) var myBoolean=new Boolean(null) var myBoolean=new Boolean(&quot;&quot;) var myBoolean=new Boolean(false) var myBoolean=new Boolean(NaN) Example of Boolean object with initial value of true : var myBoolean=new Boolean(true) var myBoolean=new Boolean(&quot;true&quot;) var myBoolean=new Boolean(&quot;false&quot;) var myBoolean=new Boolean(&quot;Richard&quot;) Built-in JavaScript Objects - Boolean
  • 35. How to create an object? Create a direct instance of an object Create template of an object
  • 36. Object A bird (object) Fly () name age EyeColor Eat() Drink() METHODS PROPERTIES
  • 37. 1. Direct Instance Add few properties to the bird BirdObj=new Object() BirdObj.name=“MorningBird“ BirdObj.age=2 BirdObj.eyecolor=“green&quot; Add methods to the bird BirdObj.fly = fly BirdObj.eat = eat BirfObj.Breath = breath
  • 38. 2. Create Template to the object function Bird(name,age,eyecolor) { this.name=name this.age=age this.eyecolor=eyecolor } When you have template, then you can create new instance of the object : myBird= new Bird (“Parrot”, 2, “blue”)
  • 39. You can also add some methods to the bird object. This is also done inside the template: function Bird(name,age,eyecolor) { this.name=name this.age=age this. eyecolor=eyecolor this.habitat = habitat  new method } That methods are just functions attached to objects. Then we will have to write the habitat() function: function habitat(new_habitat) { this.habitat=new_habitat } Eg : myBird.habitat(“Pond”)
  • 40. DOM: What is it? DOM Specification: “ a platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents . … [DOM] provides a standard set of objects for representing HTML and XML documents , a standard model of how these objects can be combined, and a standard interface for accessing and manipulating them.”
  • 41. DOM: Implementations Java-based parsers (e.g. Sun Project X, IBM XML4J, Apache Xerces) MS IE5 browser: COM programming interfaces for C/C++ and MS Visual Basic, ActiveX object programming interfaces for script languages
  • 42. Object-based document modelling Object model covers structure of a document behaviour of a document and its constituent objects DOM defines interfaces and objects for representing and manipulating documents semantics of these interfaces relationships between interfaces and objects
  • 43. DOM structure model Based on O-O concepts: methods (to access or change object’s state) interfaces (declaration of a set of methods) objects (encapsulation of data and methods) Roughly similar to the XSLT/XPath data model  a parse tree
  • 44. <invoice> <invoicepage form=&quot;00&quot; type=&quot;estimatedbill&quot;> <addressee> <addressdata> <name>Leila Laskuprintti</name> <address> <streetaddress>Pyynpolku 1 </streetaddress> <postoffice>70460 KUOPIO </postoffice> </address> </addressdata> </addressee> ... XML DOM structure model invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Document Element NamedNodeMap Text
  • 45. HTML DOM structure model The DOM presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text.
  • 46. The application support and intermediate DOM which existed before the creation of DOM Level 1. Example include the DHTML object model or the Netscape intermediate DOM. Level 0 is not a formal specification published by the W3C but rather a short hand that refers to what existed before the standardization process. Structure of DOM Level 0
  • 47. Structure of DOM Level 1 Two parts: I: DOM Core Interfaces Fundamental interfaces low-level interfaces to structured documents Extended interfaces (next page) XML specific: CDATASection, DocumentType, Notation, Entity, EntityReference, ProcessingInstruction II: DOM HTML Interfaces more convenient to access HTML documents Level 1 intentionally limited to representation and manipulation of document structure and content document instance only; no access to the contents of a DTD
  • 48. DOM Level 2 support for namespaces accessing elements by ID attribute values optional features interfaces to document views and stylesheets an event model (for, say, user actions on elements) methods for traversing the document tree and manipulating regions of document (e.g., selected by the user of an editor)
  • 49. Consists of 6 different specifications: DOM Level 3 Core; DOM Level 3 Load and Save DOM Level 3 XPath; DOM Level 3 Views and Formatting; DOM Level 3 Requirements; and DOM Level 3 Validation, which further enhances the DOM DOM Level 3
  • 50. Core Interfaces: Node & its variants Node Comment DocumentFragment Attr Text Element CDATASection ProcessingInstruction CharacterData Entity DocumentType Notation EntityReference “ Extended interfaces” Document
  • 51. DOM interfaces: Node invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Node getNodeType getNodeValue getOwnerDocument getParentNode hasChildNodes getChildNodes getFirstChild getLastChild getPreviousSibling getNextSibling hasAttributes getAttributes appendChild(newChild) insertBefore(newChild,refChild) replaceChild(newChild,oldChild) removeChild(oldChild) Document Element NamedNodeMap Text
  • 52. invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Document getDocumentElement createAttribute(name) createElement(tagName) createTextNode(data) getDocType() getElementById(IdVal) Node DOM interfaces: Document Document Element NamedNodeMap Text
  • 53. DOM interfaces: Element invoice invoicepage name addressee addressdata address form=&quot;00&quot; type=&quot;estimatedbill&quot; Leila Laskuprintti streetaddress postoffice 70460 KUOPIO Pyynpolku 1 Element getTagName getAttributeNode(name) setAttributeNode(attr) removeAttribute(name) getElementsByTagName(name) hasAttribute(name) Node Document Element NamedNodeMap Text
  • 54. Additional Core Interfaces to handle ordered lists of nodes: NodeList e.g. from Node.childNodes or Element.getElementsByTagName(&quot;name&quot;) all descendant elements of type &quot;name&quot; in document order to access unordered sets of nodes by name: NamedNodeMap e.g. from Node.attributes NodeList s and NamedNodeMap s are &quot;live&quot;: changes to the document structure reflected to their contents
  • 55. Object Creation in DOM Each DOM object X lives in the context of a Document: X .ownerDocument Objects implementing interface Y are created by factory methods D .create Y (…) , where D is a Document object. E.g: createElement(&quot;A&quot;), createAttribute(&quot;href&quot;), createTextNode(&quot;Hello!&quot;) Creation and persistent saving of Document s left to be specified by implementations
  • 56. The main routine for BuildXml public static void main(String args[]){ if (args.length > 0) { String fileName = args[0]; BuildXml buildXml = new BuildXml(fileName); } else { System.err.println( &quot;Give filename as argument&quot;); }; } // main
  • 57. JavaScript What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language A JavaScript consists of lines of executable computer code A JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license
  • 58. What can a JavaScript Do? JavaScript gives HTML designers a programming tool HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small &quot;snippets&quot; of code into their HTML pages JavaScript can put dynamic text into an HTML page A JavaScript statement like this: document.write(&quot;<h1>&quot; + name + &quot;</h1>&quot;) can write a variable text into an HTML page JavaScript can react to events A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
  • 59. JavaScript can be used to detect the visitor's browser A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies A JavaScript can be used to store and retrieve information on the visitor's computer JavaScript can read and write HTML elements A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
  • 61. How Javascript Interact With HTML DOM The primary use of JavaScript is to write functions that are embedded in or included from HTML pages and interact with the Document Object Model (DOM) of the page. Some simple examples of this usage are: A) Opening or popping up a new window with programmatic control over the size, position and 'look' of the new window (i.e. whether the menus, toolbars, etc. are visible). B) Validation of web form input values to make sure that they will be accepted before they are submitted to the server. C) Changing images as the mouse cursor moves over them: This effect is often used to draw the user's attention to important links displayed as graphical elements.
  • 62. Javascript Objects Description Object Contains the visited URLs in the browser window History Contains information about the current URL Location Contains information about the client's display screen Screen Contains information about the client's browser Navigator Represents a browser window. A that is created automatically with every instance of a <body> or <frameset> tag Window
  • 63. HTML DOM Objects Represent an <option> element / selection list in an HTML document. Option / Select Represents an <a> element Anchor Represents a <form> element Form Represents the state of an event Event Represents an <img> element Image Represents a <frame>/<frameset> element Frame / frameset Represent a <table>, <td> and <tr> element. Table, TableHeader, TableRow Represents the entire HTML document and can be used to access all elements in a page. Document Description Object
  • 64. Adding in a new element var link = document.createElement('a'); link.setAttribute('href', 'mypage.htm');
  • 65. locating a slot in the document by location: document.childNodes[1].childNodes[0] Find the main document element (HTML), and find its second child (BODY), then look for its first child (DIV) by ID: document.getElementById('myDiv').appendChild(txt);
  • 66. Hiding an element document.childNodes[1].childNodes[1].childNodes[0].style.display = &quot;none&quot;;
  • 67. Loading an XML document object into the parser <script language=&quot;JavaScript&quot;> var xmlDoc = new ActiveXObject(&quot;Microsoft.XMLDOM&quot;) xmlDoc.async=&quot;false&quot; xmlDoc.load(&quot;note.xml&quot;) // ....... processing the document goes here </script>
  • 68. Manually loading XML into the parser <script language=&quot;JavaScript&quot;> // load up variable var with some xml var text=&quot;<note>&quot; text=text+&quot;<to>John</to><from>Robert</from>&quot; text=text+&quot;<heading>Reminder</heading>&quot; text=text+&quot;<body>Don't forget your homework!</body>&quot; text=text+&quot;</note>&quot; // now create the DO var xmlDoc = new ActiveXObject(&quot;Microsoft.XMLDOM&quot;) xmlDoc.async=&quot;false&quot; xmlDoc. loadXML (text) // ....... process the document </script>
  • 69. parseError object document.write(xmlDoc.parseError. property ) errorCode : Returns a long integer error code reason : Returns a string explaining the reason for the error line : Returns a long integer representing the line number for the error linePos : Returns a long integer representing the line position for the error srcText : Returns a string containing the line that caused the error url : Returns the url pointing the loaded document filePos : Returns a long integer file position of the error
  • 70. Traversing nodes set xmlDoc=CreateObject(&quot;Microsoft.XMLDOM&quot;) xmlDoc.async=&quot;false&quot; xmlDoc.load(&quot;note.xml&quot;) for each x in xmlDoc.documentElement.childNodes document.write(x.nodename) document.write(&quot;: &quot;) document.write(x.text) next
  • 71. Calling XML nodes by name var xmlDoc = new ActiveXObject(&quot;Microsoft.XMLDOM&quot;) xmlDoc.async=&quot;false&quot; xmlDoc.load(&quot;note.xml&quot;) document.write(xmlDoc.getElementsByTagName(&quot;from&quot;).item(0).text)