1 / 15

Accessing JavaScript

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

abba
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Accessing JavaScript Inline, Internal, and External FIle

  2. 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.

  3. 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)

  4. Inline JavaScript

  5. 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

  6. 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

  7. 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

  8. 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.

  9. Internal JavaScript

  10. 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

  11. 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

  12. 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

  13. External JavaScript File

  14. 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.

  15. 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.

More Related