Learning Javascript | Skillshare Projects

Paul Ramnora

Student programmer



Learning Javascript

PROJECT 01: Using Javascript to output a series of text messages.


DOCUMENT: 1 of 4

--------------------------Filename: js-write.html/Code start------------------------------

<!DOCTYPE html>

<html lang="en">


<meta charset="UTF-8">

<title>Javascript test</title>

<!--link to FREE google fonts: needs online connection to work, properly-->
<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>

<!--link to an external stylesheet file-->
<link rel="stylesheet" type="text/css" href="js-write.css" />

<!--linking to an external javascript file-->
<script language="javascript" type="text/javascript" src="js-write.js">

<!--javascript being written inside of the document head section-->
alert("Javascript message box alert.\n\nDemo: Javascript being written inside of the document HEAD-/HEAD section!");


<body onLoad="javascript:showMessage();">


<h1>Javascript code demo</h1>
<h2>How to display Javascript text messages inside of an HTML web page</h2>


<div id="main">

This document shows 6 different methods of using Javascript to output text messages from inside of the HTML web page:-

<li>HEAD section, linking the (.html) web page document to an external (.js) file...displays an alert message box.</li>
<li>HEAD section, use pair of script tags to display an alert message box.</li>
<li>BODY section, use pair of script tags to write a mixture of 'plain text/HTML/CSS' directly into the (.html) web page document itself.</li>
<li>BODY section, use pair of script tags to send text output to the web browser console.</li>
<li>BODY section, use Javascript web page onLoad="" event to call/run an external file function to display an alert message box.</li>
<li>BODY section, use an external JQuery file function call to both 'Show/Hide' a web page footer section.</li>

<h3>Javascript output text...</h3>

<!--javascript being written inside of the document body section-->

<div id="js-output">

document.write("<p>Javascript: 'document.write()' method; being used to output a mixture of <span style='background-color:yellow;color:red;font-size:x-large;'>plain text/HTML/CSS</span> directly into the web page document itself.</p>");

</div><!--end of div section: js-output"-->

console.log("Javascript text output being sent to the web browser console.")

</div><!--end of div section: main-->

<div id="divJQuery">


<button id="btnShowHideFooter">Show/Hide Footer</button>



<p id="webPageUpdateMsg">
Page created: <span class="timeDateStamp">16:43 11/03/2016</span>
Last updated: <span class="timeDateStamp">13:03 12/03/2016</span>


<!--link to JQuery CDN/Content Developer Network; needs online connection to work, proplerly-->
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

<!--link to external jquery.js file-->
<script src="jquery-write.js"></script>



--------------------------------------------Code end--------------------------------------------------

DOCUMENT: 2 of 4

--------------------------Filename: js-write.css/Code start-----------------------------------------

This CSS/Cascading Style Sheet code,
is used to add decorative effects to the web page;
controlling such things as: text colourbackground colour/heading colours/
font size/font style/margins/text allignment/-etc.

/* HTML selectors: html, body,h1,h2,h3,footer */


font-family: 'Yanone Kaffeesatz', sans-serif, arial,verdana;

h1, h2, h3, #js-output, #webPageUpdateMsg,#divJQuery{

h2, h3{


/* CSS ID selectors start with a hash symbol: # before name... */

border:1px solid black;
font-size: small;

/* CSS class selectors start with a period dot symbol: (.) before name... */


-----------------------------------------Code end---------------------------------------------------------

DOCUMENT: 3 of 4

--------------------------Filename: js-write.js/Code start-----------------------------------------

//*** This alert message box...is called from the web page HEAD-/HEAD section;
//     and, will display itself, instantly, right away; and,
//     'before' the rest of the web page BODY-/BODY section loads...

alert("Javascript message box alert.\n\nDemo: Linking to an external Javascript file:\n\njs-write.html\n...linked to...\njs-write.js.");

//*** This function...being called from the web page initial BODY tag...by using the onLoad="" event...;
//     will only display itself after all the rest of the web page has fully loaded, first...

function showMessage(){
 alert("Javascript message box alert.\n\nDemo: Javascript, onLoad='' event, external file function call.");

-----------------------------------------Code end---------------------------------------------------------

DOCUMENT: 4 of 4

--------------------------Filename: jquery-write.js/Code start-----------------------------------------


-----------------------------------------Code end---------------------------------------------------------


First, open up your 'text editor' such as Windows Notepad;

next, copy and paste into it -one at a time- the code for each of  the 4 separate files above;

save each file by using it's appropriate file name:-

1> js-write.html

2> js-write.css

3> js-write.js

4> jquery-write.js

NOTE: Save all files into one same folder; then, left double click on the file called: js-write.html to run; your web browser software should automatically open, and, display the web page output. 


Here are some further tips:-


If you 'right' click on an empty space inside of the web page; then, a drop down menu should appear giving you the option to View Source code.



Instead, of having to write a [barebone.html] document every single time; before you wish to write your Javascript. Instead, you can use a shortcut method by simply writing the two script tags...with the Javascript code being included inside the middle.


 //-(...place your Javascript code inside here...)-


Save the file using a: [filename.html] extension; then, just left double click the file to run; your web browser should automatically open up...and, so display if the Javascript code works or not...?

NOTE: You can see an example of exactly what it is I mean by looking at the above Notepad screen capture graphic which accompanies this same project.



Write/run/test javascript code online:

  • http://www.jsfiddle.net
  • http://jsbin.com

Javascript code syntax testing:

  • http://jslint.com/

Subscribe for FREE to receive regular Javascript newsletter that can be read either in email/or else, on the web:

  • http://javascriptweekly.com/


Please sign in or sign up to comment.