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

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

DOCUMENT: 1 of 4

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

<!DOCTYPE html>

<head>

<title>Javascript test</title>

<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>

<link rel="stylesheet" type="text/css" href="js-write.css" />

<script language="javascript" type="text/javascript" src="js-write.js">
</script>

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

</head>

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

</header>

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

</div>

</div>

<h3>JQuery</h3>

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

</div>

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

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

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

//-(...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:

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/

Company

Community

Teaching

Mobile

Company

Community

Teaching