Examples in Each Chapter
|
<!DOCTYPE html> <h1>My First JavaScript</h1> <button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> </button> <p id="demo"></p> </body> |
JavaScript Introduction
JavaScript is the most popular programming language in the world.
This page contains some examples of what JavaScript can do.
JavaScript Can Change HTML Content
One of many HTML methods is getElementById().
This example uses the method to "find" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":
|
<!DOCTYPE html> <h1>What Can JavaScript Do?</h1> <p id="demo">JavaScript can change HTML content.</p> <button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'"> </body> |
JavaScript Can Change HTML Attributes
This example changes an HTML image, by changing the src attribute of an <img> tag:
|
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"> <p>Click the light bulb to turn on/off the light.</p> <script> |
JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML attribute:
document.getElementById("demo").style.fontSize = "25px";
|
<script> <button type="button" onclick="myFunction()">Click Me!</button> |
JavaScript Can Validate Data
JavaScript is often used to validate input:
|
<h1>JavaScript Can Validate Input</h1> <p>Please input a number between 1 and 10:</p> <input id="numb" type="number"> <button type="button" onclick="myFunction()">Submit</button> <p id="demo"></p> <script> // Get the value of the input field with id="numb" // If x is Not a Number or less than one or greater than 10 |
'JavaScript' 카테고리의 다른 글
| [06] JavaScript Comments (0) | 2015.07.13 |
|---|---|
| [05] JavaScript Statements (0) | 2015.07.13 |
| [04] JavaScript Syntax (0) | 2015.07.13 |
| [03] JavaScript Output (0) | 2015.07.13 |
| [02] JavaScript Where To (0) | 2015.07.13 |