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