Paul Ramnora

Student programmer

132

1

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">

<head>

<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">
</script>

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

</head>

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

<header>

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

</header>

<div id="main">

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

<ol>
<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>
</ol>

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

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

<div id="js-output">

<script>
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>");
</script>

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

<script>
console.log("Javascript text output being sent to the web browser console.")
</script>


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

<div id="divJQuery">

<h3>JQuery</h3>

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

</div>

<footer>

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

</footer>

<!--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>

</body>

</html>

--------------------------------------------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 */

html{
margin:10%;
background-color:black;
}

body{
font-family: 'Yanone Kaffeesatz', sans-serif, arial,verdana;
background-color:white;
}

h1, h2, h3, #js-output, #webPageUpdateMsg,#divJQuery{
text-align:center;
}

h2, h3{
background-color:silver;
}

footer{
display:none;
}

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

#webPageUpdateMsg{
border:1px solid black;
margin-left:25%;
margin-right:25%;
font-size: small;
}

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

.timeDateStamp{
font-style:italic;
color:red;
}

-----------------------------------------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-----------------------------------------

$(document).ready(function(){
$("button").click(function(){
$("footer").toggle();
});
});

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

USER INSTRUCTIONS

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:-

HOW TO VIEW 'SOURCE CODE'

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.

------------------------------------------------------------------------

A MUCH QUICKER WAY TO TEST JAVASCRIPT CODE INSIDE OF THE WEB BROWSER

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.

<script> 

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

</script>

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.

------------------------------------------------------------------------

EXTERNAL LINKS

Write/run/test javascript code online:

Javascript code syntax testing:

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

Comments

Please sign in or sign up to comment.