Inline, Internal, and External FIle Accessing JavaScript Inline, Internal, and External FIle
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 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)
Inline 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
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: href attribute is "#" although it might also be empty " ", or contain "javascript:; " - this disables normal link behavior onclick attribute is alert('Some Message'); - onclick is 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
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
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.
Internal 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
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
Internal JavaScript <!DOCTYPE html> <html> <head> 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
External JavaScript File
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.
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.