Front-end JavaScript First day study (1)-javascript Introduction

Source: Internet
Author: User
Tags button type

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.