Accessing javascript
This presentation is the property of its rightful owner.
Sponsored Links
1 / 15

Accessing JavaScript PowerPoint PPT Presentation


  • 101 Views
  • Uploaded on
  • Presentation posted in: General

Accessing JavaScript. Inline, Internal, and External FIle. Accessing JavaScript in a Web Page.

Download Presentation

Accessing JavaScript

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Accessing javascript

Accessing JavaScript

Inline, Internal, and External FIle


Accessing javascript

Accessing JavaScript in a Web Page

Web browsers are built to understand HTML and CSS and convert those languages into a visual display on the screen. The part of the web browser that understands HTML and CSS is called the layout or rendering engine. But most browsers also have something called a JavaScript interpreter. That’s the part of the browser that understands JavaScript and can execute the steps of a JavaScript program. Since the web browser is usually expecting HTML, you must specifically tell the browser when JavaScript is coming by using the <script> tag.

The <script> tag is regular HTML. It acts like a switch that in effect says “Hey, web browser, here comes some JavaScript code; you don’t know what to do with it, so hand it off to the JavaScript interpreter.” When the web browser encounters the closing </script> tag, it knows it’s reached the end of the JavaScript program and can get

back to its normal duties.


Accessing javascript

Accessing JavaScript in a Web Page

  • JavaScript can appear in several places:

  • Inline(JavaScript inside a tag)

  • Internal(JavaScript in a <script> tag)

  • External(JavaScript in a separate file with a .js extension)

  • Dynamic(In an external file loaded by JavaScript)


Accessing javascript

Inline JavaScript


Accessing javascript

Inline JavaScript

Inline JavaScript appears inside an individual tag. The JavaScript commonly appears inside a event attribute, such as onClick(see below and next slide), or document.write(see Slide 7)

<!DOCTYPE html>

<html>

<head>

<title>Hello World 1</title>

</head>

<body>

<form>

<input type="button" value="Hello World" onClick="alert('Hello Yourself!')">

</form>

</body>

</html>

http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld1.html


Accessing javascript

Inline JavaScript

<!DOCTYPE html>

<html>

<head>

<title>Hello World 2</title>

</head>

<body>

<p><a href="#" onClick="alert('Hello Yourself!')">Hello World</a></p>

</body>

</html>

  • Notice how the a tag has two attributes (properties) with special values:

  • hrefattribute is "#" although it might also be empty " ", or contain "javascript:;"

    • - this disables normal link behavior

  • onclickattribute is alert('Some Message');

    • - onclickis an event — the JavaScript runs when the event happens, in this case when the link receives a click

http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld2.html


Accessing javascript

Inline JavaScript

<!DOCTYPE html>

<html>

<head>

<title>Hello World 3</title>

</head>

<body>

<p><a href="javascript:alert('Hello Yourself!')">Hello World</a></p>

</body>

</html>

In this variation, the JavaScript is actually inside the href attribute. This is equivalent to the onClick example—we don’t need to explicitly specify the "click" event, because the href takes care of that for us.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld3.html


Accessing javascript

Inline JavaScript

The above inline examples demonstrate a single line of JavaScript code—the alert()function—which displays a message in a modal dialog box.

Inline JavaScript can be useful for certain specific tasks, but inline should be your third choice.

External JavaScript files should be your first choice, internal JavaScript your second.


Accessing javascript

Internal JavaScript


Accessing javascript

Internal JavaScript

Internal JavaScript appears inside a <script> tag, like this:

<!DOCTYPE html>

<html>

<head>

<title>Hello World 4</title>

</head>

<body>

<h2>Hello World</h2>

<script>

// JavaScript goes here, between the opening and closing <script> tags.

// Notice use of "//" comment style while in between the <script> tags.

alert('Hello Yourself!');

</script>

</body>

</html>

http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld4.html


Accessing javascript

Internal JavaScript

<!DOCTYPE html>

<html>

<head>

<title>Hello World 5</title>

</head>

<body>

<h2>Hello World</h2>

<h2>

<script>

document.write("Hello Yourself!");

</script>

</h2>

</body>

</html>

http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld5.html


Accessing javascript

Internal JavaScript

<!DOCTYPE html>

<html>

<head>

<script>

function popup() {

alert("Hello Yourself!")

}

</script>

</head>

<body>

<input type="button" onclick="popup()" value="Hello World">

</body>

</html>

http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld6.html


Accessing javascript

External JavaScript File


Accessing javascript

External JavaScript File

  • To use an external JavaScript file in a web page, use the <script> tag with the src attribute pointing to the JavaScript file.

  • Example:

  • <script src="somejavascript.js"></script>

  • When using the <script> tag to load an external JavaScript file, do not also use the tag as a container for internal JavaScript — that is, do not put JavaScript (or anything thing else) between the opening tag and the closing tag.

  • External JavaScript files are text files containing JavaScript, and nothing else.

  • Edit using any text editor. Serious JavaScript developers typically edit files using an Integrated Development Environment (IDE) such as Dreamweaver or Komodo Edit.

  • Do not use the <script> tag in an external JavaScript file itself — the <script> tag goes in the web page.

  • When using two or more script tags on a page, the order of the tags can be significant, in terms of JavaScript processing.


Accessing javascript

Dynamic JavaScript

“Dynamic” JavaScript Versus JavaScript

Fundamentally, all JavaScript can be considered dynamic. All dynamic means in this context is that the script is performed on the client’s computer rather than on the server. However, “dynamic” most commonly refers to scripts that control, access, or manipulate HTML elements on the page. Dynamic JavaScript used to be called DHTML – Dynamic HTML – however, this term is rather misrepresentative of what’s really going on.

DHTML is differentiated from Ajax by the fact that a DHTML page is still request/reload-based. With DHTML, there may not be any interaction between the client and server after the page is loaded; all processing happens in JavaScript on the client side. By contrast, an Ajax page uses features of DHTML to initiate a request (or 'subrequest') to the server to perform actions such as loading more content.


  • Login