JavaScript is the most popular programming language in the world.
The language can be used in HTML and the Web, and is more widely used in servers, PCs, laptops, tablets and smartphones.
JavaScript is a scripting language
JavaScript is a lightweight programming language.
JavaScript is a programmatic code that can be inserted into an HTML page.
When JavaScript is inserted into an HTML page, it can be performed by all modern browsers.
JavaScript is easy to learn.
JavaScript: Writing HTML output
<!DOCTYPE HTML><HTML><Body><P>JavaScript can be written directly to the HTML output stream:</P><Script>document.write ("");d Ocument.write ("<p>this is a paragraph.</p>");</Script><P>you can only use it in the HTML output stream<Strong>document.write</Strong>. If you use it after the document has been loaded (such as in a function), the entire document is overwritten. </P></Body></HTML>
JavaScript can be written directly to the HTML output stream:
Effect: This is a heading
This is a paragraph.
You can only use document.writein the HTML output stream. If you use it after the document has been loaded (such as in a function), the entire document is overwritten.
Tip: You can only use document.write in HTML output. If you use this method after the document is loaded, the entire document is overwritten.
JavaScript: Responding to events
<!DOCTYPE HTML><HTML><Body><H1>My first piece of JavaScript</H1><P>JavaScript can respond to events. For example, click on the button:</P><Buttontype= "button"onclick= "alert (' welcome! ')">Click here</Button></Body></HTML>
Effect: My first piece of JavaScript
JavaScript can respond to events. For example, click on the button:
Click here
The alert () function is not commonly used in JavaScript, but it is very handy for code testing.
The onclick event is just one of the many events you will learn in this tutorial.
JavaScript: changing HTML content
<!DOCTYPE HTML><HTML><Body><H1>My first piece of JavaScript</H1><PID= "Demo">JavaScript can change the content of HTML elements. </P><Script>functionmyFunction () {x=document.getElementById ("Demo"); //Find Elementx.innerhtml="Hello javascript!"; //Change Content}</Script><Buttontype= "button"onclick= "myFunction ()">Click here</Button></Body></HTML>
Effect:
My first piece of JavaScript
JavaScript can change the content of HTML elements.
Click here
You will often see document.getElementById ("some ID"). This method is defined in the HTML DOM.
The DOM (Document Object model) is the official standard for accessing HTML elements.
You'll learn more about HTML DOM in several chapters of this tutorial.
JavaScript: changing HTML images
This meeting dynamically changes the source of HTML <image> (SRC):
The light bulb
Tap the light bulb to turn the lamp on or off
<!DOCTYPE HTML><HTML><Body><Script>functionchangeimage () {element=document.getElementById ('MyImage')if(Element.src.match ("Bulbon") ) {element.src="/i/eg_bulboff.gif"; }Else{element.src="/i/eg_bulbon.gif"; }}</Script><imgID= "MyImage"onclick= "Changeimage ()"src= "/i/eg_bulboff.gif"><P>Tap the light bulb to light or turn off the lamp.</P></Body></HTML>
JavaScript can change most attributes of any HTML element, not just pictures.
Effect:
Tap the light bulb to light or turn off the lamp.
JavaScript: changing HTML styles
Changing the style of HTML elements is a variant of changing HTML attributes.
<!DOCTYPE HTML><HTML><Body><H1>My first piece of JavaScript</H1><PID= "Demo">JavaScript can change the style of HTML elements. </P><Script>functionmyFunction () {x=document.getElementById ("Demo") //Find ElementX.style.color="#ff0000"; //Change Style}</Script><Buttontype= "button"onclick= "myFunction ()">Click here</Button></Body></HTML>
Effect:
My first piece of JavaScript
JavaScript can change the style of HTML elements.
Click here
JavaScript: Validating input
JavaScript is often used to validate user input.
<!DOCTYPE HTML><HTML><Body><H1>My first piece of JavaScript</H1><P>Please enter a number. If the input value is not a number, the browser pops up the prompt box.</P><inputID= "Demo"type= "text"><Script>functionmyFunction () {varx=document.getElementById ("Demo"). Value;if(x==""||IsNaN (x)) {Alert ("Not Numeric"); }}</Script><Buttontype= "button"onclick= "myFunction ()">Click here</Button></Body></HTML>
Effect:
My first piece of JavaScript
Please enter a number. If the input value is not a number, the browser pops up the prompt box.
Click here
Tip: JavaScript and Java are two completely different languages, both conceptually and in design.
Java (invented by Sun) is a more complex programming language.
ECMA-262 is the official name of the JavaScript standard.
JavaScript was invented by Brendan Eich. It appeared in Netscape in 1995 (the browser has stopped updating) and was adopted by the ECMA (a standard association) in 1997.
Front-end JavaScript First day study (1)-javascript Introduction