JavaScript Introduction

JavaScript Tutorial � JavaScript Introduction

JavaScript like HTHL and CSS is dependent by a browser and you can test any JS code in any browser.

JavaScript code can be compiled by the browser once the HTML code is loaded in 3 different ways:

1. Put the code in a separate file as my_file.js and then add it to HTML code as: <script> type = "javascript" src = "my_file.js" </script>

2. We can use it under: <button onclick = ""> your title </button>

3. JS code between: <script> your code here </script>

What can JavaScript do?- example

JavaScript Can Change HTML Content

One of many JavaScript HTML methods is: getElementById().
Below we have an example what: "finds" an HTML element (with id="test"), and changes the element content (innerHTML) to "This is JavaScript code":

Example:

<!DOCTYPE html>

  <html>

<body>
<h1>What can we make with JavaScript?</h1>
<p id="test">JavaScript can change HTML element content.</p>
<button type="button" onclick='document.getElementById("test").innerHTML =

  "Hi, this is my JavaScript code"'>Click (hit me) Me!</button>
</body>

  </html

Note: JS accepts double and single quotes:.

JavaScript Can Change CSS (HTML Styles) - example

JavaScript can change the style of an HTML element - example:

Example:

<!DOCTYPE html>

  <html>

  <body>


<h1>Changing style of an HTML element?</h1>
<p id="test">Changing style of an HTML element?</p>
<button type="button" onclick="document.getElementById('test').style.fontSize='22px'">

  Click Me!(hit me)</button>
</body>

  </html>

JavaScript Can Hide an HTML Element, example

With JS we can hide HTML element and it can be done by changing the display style.

Example:

<!DOCTYPE html>

  <html>

  <body>


<h2>What Can we do with JS?</h2>
<p id="test"> Using JS we can hide an HTML element.</p>
<button type="button" onclick="document.getElementById('test').style.display='none'">Hit Me! (Click Me!)</button>
</body>

  </html>

JS Can Show an HTML Element - example

Showing hidden HTML elements can also be done by changing the display style:

Example:

<!DOCTYPE html>

  <html>

  <body>


<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="test" style="display:none">Hi JavaScript Tutorial!</p>
<button type="button" onclick="document.getElementById('test').style.display='block'">Hit Me! (Click Me!)</button>
</body>

  </html>

javascript tutorial for beginners, pdf, free, code
JavaScript Introduction - javascript tutorial

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.