Accessing Java Script INLINE INTERNAL AND EXTERNAL FILE

Accessing Java. Script in a Web Page Web browsers are built to understand HTML

Accessing Java. Script in a Web Page Java. Script can appear in several places:

Inline Java. Script appears inside an individual tag. The Java. Script commonly appears inside

Inline Java. Script <!DOCTYPE html> <head> <title>Hello World 2</title> </head> <body> <p><a href="#" on.

Inline Java. Script <!DOCTYPE html> <head> <title>Hello World 3</title> </head> <body> <p><a href="javascript: alert('Hello

Inline Java. Script The above inline examples demonstrate a single line of Java. Script

Internal Java. Script appears inside a <script> tag, like this: <!DOCTYPE html> <head> <title>Hello

Internal Java. Script <!DOCTYPE html> <head> <title>Hello World 5</title> </head> <body> <h 2>Hello World</h

External Java. Script File To use an external Java. Script file in a web

Dynamic Java. Script “Dynamic” Java. Script Versus Java. Script Fundamentally, all Java. Script can

Slides: 15

Download presentation

Accessing Java. Script INLINE, INTERNAL, AND EXTERNAL FILE

Accessing Java. Script 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 Java. Script interpreter. That’s the part of the browser that understands Java. Script and can execute the steps of a Java. Script program. Since the web browser is usually expecting HTML, you must specifically tell the browser when Java. Script 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 Java. Script code; you don’t know what to do with it, so hand it off to the Java. Script interpreter. ” When the web browser encounters the closing </script> tag, it knows it’s reached the end of the Java. Script program and can get back to its normal duties. 2

Accessing Java. Script in a Web Page Java. Script can appear in several places: • • Inline (Java. Script inside a tag) Internal (Java. Script in a <script> tag) External (Java. Script in a separate file with a. js extension) Dynamic (In an external file loaded by Java. Script) 3

Inline Java. Script 4

Inline Java. Script appears inside an individual tag. The Java. Script commonly appears inside a event attribute, such as on. Click (see below and next slide), or document. write (see Slide 7) <!DOCTYPE html> <head> <title>Hello World 1</title> </head> <body> <form> <input type="button" value="Hello World" on. Click="alert('Hello Yourself!')"> </form> </body> </html> http: //faculty. cascadia. edu/cduckett/bit 116/Lecture_04/helloworld 1. html 5

Inline Java. Script <!DOCTYPE html> <head> <title>Hello World 2</title> </head> <body> <p><a href="#" on. Click="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 Java. Script runs when the event happens, in this case when the link receives a click http: //faculty. cascadia. edu/cduckett/bit 116/Lecture_04/helloworld 2. html 6

Inline Java. Script <!DOCTYPE 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 Java. Script is actually inside the href attribute. This is equivalent to the on. Click 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/bit 116/Lecture_04/helloworld 3. html 7

Inline Java. Script The above inline examples demonstrate a single line of Java. Script code—the alert() function— which displays a message in a modal dialog box. Inline Java. Script can be useful for certain specific tasks, but inline should be your third choice. External Java. Script files should be your first choice, internal Java. Script your second. 8

Internal Java. Script 9

Internal Java. Script appears inside a <script> tag, like this: <!DOCTYPE html> <head> <title>Hello World 4</title> </head> <body> <h 2>Hello World</h 2> <script> // Java. Script 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/bit 116/Lecture_04/helloworld 4. html 10

Internal Java. Script <!DOCTYPE html> <head> <title>Hello World 5</title> </head> <body> <h 2>Hello World</h 2> <script> document. write("Hello Yourself!"); </script> </h 2> </body> </html> http: //faculty. cascadia. edu/cduckett/bit 116/Lecture_04/helloworld 5. html 11

Internal Java. Script <!DOCTYPE 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/bit 116/Lecture_04/helloworld 6. html 12

External Java. Script File 13

External Java. Script File To use an external Java. Script file in a web page, use the <script> tag with the src attribute pointing to the Java. Script file. Example: <script src="somejavascript. js"></script> When using the <script> tag to load an external Java. Script file, do not also use the tag as a container for internal Java. Script — that is, do not put Java. Script (or anything else) between the opening tag and the closing tag. • • External Java. Script files are text files containing Java. Script, and nothing else. Edit using any text editor. Serious Java. Script 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 Java. Script 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 Java. Script processing. 14

Dynamic Java. Script “Dynamic” Java. Script Versus Java. Script Fundamentally, all Java. Script 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 Java. Script 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 Java. Script 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. 15