Download presentation
Presentation is loading. Please wait.
1
An Introduction to JavaScript
2
JavaScript and Client-Side Scripting (cont’d.)
JavaScript is a dynamic computer programming language JavaScript history First introduced in Navigator (LiveScript) Navigator 2.0: name changed to JavaScript 1.0 Microsoft released Internet Explorer 4.0 version of JavaScript (Jscript) ECMAScript International, standardized version of JavaScript
3
Javascript vs. Java JavaScript and Java are completely different languages, both in concept and design. Java is a compiled programming language that creates an EXE file Javascript is an interpreted language by the browser (converted line by line into something the computer understands) JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997. ECMA-262 is the official name of the standard. ECMAScript is the official name of the language European Computer Manufacturers Association Script
4
Why Learn JavaScript? JavaScript is one of the 3 languages all web developers must learn, as it is one of the 3 essential web technologies: HTML – used to define the content of web pages CSS – used to specify the layout of web pages JavaScript – used to program the behavior of web pages You must learn JavaScript if you want to get into web development you must learn it well if you're planning on being a front-end developer JavaScript usage has now extended to mobile app development, desktop app development, and game development It has exploded in popularity and is now a very useful skill to learn.
5
What can JavaScript do? Can create smart web forms that let visitors know when they’ve forgotten to include necessary information Can make elements appear, disappear, or move around a web page Can update the contents of a web page with information retrieved from a web server—without having to load a new web page.
6
What can’t JavaScript do?
Limitations of JavaScript Cannot be used outside the web browser Cannot run system commands or execute programs on a client
7
Adding JavaScript to Your Web Pages
8
What is Syntax? Every programming language has its own set of keywords and characters, and its own set of rules for putting those words and characters together the language’s syntax You will memorize the words and rules of the JavaScript language
9
Case Sensitivity in JavaScript
JavaScript is case sensitive Ignores most occurrences of extra white space Tips: Do not break a statement into several lines Within JavaScript code: Object names must always be all lowercase
10
Using the <script> Element
In HTML, JavaScript code must be inserted between <script> and </script> tags. Using the ID attribute of an HTML element, Javascript can interact with the element! You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that you should keep it within the <head> tags. <script> element Tells the browser that the scripting engine must interpret the commands it contains <script type="mime-type"> Tells the browser which scripting language and the type attribute indicates which version of the scripting language being used
11
Using the <script> Element
<script type="mime-type"> script statements; </script> Each statement inside the script tags is a single line that indicates an action for the browser to take The semicolon notifies the browser that it has reached the end of the statement HTML5 eliminates the need for the type attribute <script>
12
Do all browsers support Javascript?
Yes if they want to gain popularity! Javascript communicates to components of the browser, such as: the browser window itself the document displayed in the window other parts of the window, such as the scrollbars and tool bars It is able to communicate ONLY if the browser has a Javascript Interpreter (engine) installed The interpreter is a bunch of Javascript programs that do stuff with each part of the browser, as well as components of the web page – these are the objects that Javascript communicates with
13
JavaScript Is Object Based
any item—from the browser window itself to a document displayed in the browser to a button displayed within the document Properties A property is an attribute of an object that defines one of the object's characteristics, such as size, color, or screen location, or an aspect of its behavior, such as whether it is enabled or visible. Methods A method is an action that an object can perform, such as displaying a popup window Event Handlers An event is an action recognized by an object, such as clicking the mouse or pressing a key, and the event handler is code you can write that responds to the action
14
Window Object Every web page resides inside a browser window
The browser window is an object. Window Object is the top of the Javascript Object hierarchy It is the outmost element of the Browser Object hierarchy.
15
Window Object represents the browser window
used to get at other parts of the browser, using the browser hierarchy (BOM)
16
Window Object Common Methods
alert() - displays a popup box with a message and an OK button confirm() - displays a dialog box with a message and an OK and a Cancel button prompt() - displays a dialog box that prompts the visitor for input open() -opens a new browser window close() – closes the current browser window scrollTo() - scrolls the document to specified coordinates
17
Window object (con’t) Properties Other Properties
All of the other parts of the browser are considered properties (attribute of an object that defines one of the object's characteristics) of the window object, even though they are Objects themselves Other Properties self – a reference to the window itself localStorage – database in the browser cookies – data saved in the browser
18
Object Syntax in Javascript
Syntax to invoke a method: ObjectName.MethodName(); Syntax to use a property ObjectName.PropertyName; Example: window.alert(); window.self;
19
window.alert(); method
Displays an alert box with a specified message and an OK button used if you want to make sure information comes through to the user takes the focus away from the current window, and forces the browser to read the message Syntax: window.alert(textstring) Where textstring is the text to display in the alert box, or an object which will be converted into text and displayed
20
Document Object Each HTML document that gets loaded into a window becomes a document object The document contains the contents of the page The Document Object allows access to and modification of the pages’ content
21
document.write(); Method
The Write method is used to write some text directly into the HTML document Syntax: document.write(“text”); where text is the content to be written to the page. The content that is written to the browser window can be plain text, HTML, or a mixture, as in: document.write("Have a nice day!"); document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");
22
document.getElementById(); method
Easiest way to find HTML elements on the web page, and interact with them in some way If found, the element will be turned into an object so that Javascript code can interact with it getElementById() implies the element will be located using the “ID” attribute coded within the element Example <p id=“myPara”> I am happy </p> <script> document.getElementById(“myPara”); </script> Connects to the myPara ID attribute
23
document.getElementsByClassName(); method
Easiest way to find MANY HTML elements on the web page, and interact with them in some way If found, the elements will be turned into an ARRAY object so that Javascript code can interact with them getElementByClassName() implies the element will be located using the “CLASS” attribute coded within the element Example <p class=“myPara”> I am happy </p> <span class=“myPara”> I am happy </p> <span class=“junk”> I am happy </p> <script> document.getElementsByClassName(“myPara”); </script> Connects to the myPara class attribute
24
document.getElementsByTagName(); method
Another easy way to find HTML MANY elements on the web page, and interact with them in some way If found, the elements will be turned into an ARRAY object so that Javascript code can interact with them getElementsByTagName() implies the element will be located using the “tag coded within the element Example <p id=“myPara”> I am happy </p> <script> document.getElementsByTagName(“p”); </script> Connects to the paragraph tag
25
Code doesn’t work! If the code you write doesn’t work, its because the Javascript interpreter couldn’t understand what you want it to do .. A communication problem Browsers have debugging console to help track down the miscommunication I will demo this – take notes!
26
Structuring JavaScript Code
27
Placing JavaScript in the Document Head or Document Body
<script> element placement varies Can place in the document head or document body Statements in a script Rendered in the order in which they appear in the document General rule Place as much JavaScript code as possible in the document head Important if code performs behind-the-scenes tasks required by script sections located in the document body
28
Including a <script> Element for Each Code Section
Can include as many script elements as desired Must include a <script> element for each separate chunk of Javascript code
29
Creating a JavaScript Source File
External file containing JavaScript code Usually designated by the .js file extension Can legally have any extension Contains only JavaScript statements No <script> nor any other HTML elements Uses the src attribute of the <script> element Advantages Neater code; code sharing; ability to hide JavaScript code from incompatible browsers Can use embedded JavaScript code and JavaScript source files combination
30
Validating Web Pages Remember, if HTML is buggy, then there's a good chance your Javascript or jQuery code will fail Use an HTML validator prior to adding Javascript code Web pages will not validate when they contain script
Similar presentations
