JavaScript /.JS / jQuery

Image

JavaScript is a programming language (♦ see DEF. ) scripts, intended for interactive Web pages and for App. Web too, created in 1995.

JavaScript is an object oriented language, known as prototype.

Code Examples

We start with very simple codes. The more you progress, page after page, the more sophisticated the scripts will be.

C 0001 - Hello World !

Say hello...

<!DOCTYPE html>
<html>
<body>
<h2>Exemple</h2>
<p id="example1">JavaScript can change content</p>
<button type="button" onclick='document.getElementById("example1").innerHTML = "Hello World !";'>Click here !</button>
</body>
</html>

or using directly the console

console.log("Hello World !");

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

C 0002 - List

Create a list...

<!DOCTYPE html>
<html>
<body>
<h2>Array methods using JavaScript</h2>
<h2>join()</h2>
<p>The join () method joins the array elements into a string.</p>
<p>In this example, "/" acts as a separator between the elements presented :</p>
<p id="demo"></p>
<script>const painters = ["Vermeer", "Picasso", "Leonardo da Vinci", "Vincent van Gogh"];document.getElementById("demo").innerHTML = painters.join(" / ");</script>
</body>
</html>

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

C 0003 - POPUP

Display the result of a calculation, in a POPUP...

<!DOCTYPE html>
<html>
<body>
<h2>POPUP</h2>
<p>Example</p>
<script>window.alert(189 + 3454);
</script>
</body>
</html>

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

C 0004 - Compare two data

Enter data and compare it with a conditional value...

<!DOCTYPE html>
<html>
<body>
<h2>Compare two data for your retirement</h2>
<p>Indicate your age :</p>
<input id="age" value="67" />
<button onclick="myFunction()">Compare</button>
<p id="demo"></p>
<script>function myFunction() {  let age = document.getElementById("age").value;  let see = (age < 67) ? "Too young ":"Old enough ";  document.getElementById("demo").innerHTML = see + "to retire.";}</script></body>
</html>

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

Info+

Creation
» Creation date: 1995
* Created by Brendan Eich
* Developed and supported by ECMAScript, Netscape Communications Corporation, Mozilla Foundation

* Influenced by Java, C ++, PERL and Python
* Multiplatform

Practical cases

In order to train you, we add small programs every week to this section in order to keep you up to speed.

CASE 1

BASIC LEVEL

Displaying a list of famous painters

This small program will allow you to display in a pre-established order, in a POPUP, a list of painters.

TRY

CASE 2

INTERMEDIATE LEVEL

Determine a selection process

This small kit will allow you to create an authorization form, established according to 4 precise criteria.

TRY

CASE 3

EXPERT LEVEL

Develop an educational module for knowledge control

Design and develop a module allowing to test knowledge in Art or Human Sciences's fields.

TRY
2021 (C) Fond of Code tm (protected trademark) - Reflex001 / Diego Piccini (da Todi).
All rights reserved. Protected editorial content (www.theethicalweb.com).

About Us...

About Us...
Reflex001

Web
Programming
Development

Main Topics

Main Topics

Legal/Support

Legal/Support
Image