JavaScript Tutorial

Preparation

All you need is a text editor, a file browser, and a web browser. If you have an editor like Notepad++ on your machine, use that. Otherwise, just use notepad. Save your file as a .html, NOT a .txt. Find the file in your file browser (like Windows Explorer), and open it in your web browser. As long as you don't close the tab, just refresh your web browser between steps to see changes. If you do close the tab, just open it with your file browser again. It's best to do the steps with the tutorial instead of independently, in case you get lost somewhere.

Step 1

Below is the template for all subsequent steps. Whenever you see instruction comments for where to paste stuff, these are the locations where you paste it. Be sure to clear your tags back to this template between each step of the tutorial. Otherwise the demonstration might not make sense.

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
		<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
		<!--This is the head tag-->	
		<script type="text/javascript">
			<!--This is the script tag-->
		</script>
		<style>
			<!--This is the style tag-->
		</style>
	</head>
	<body>
		<!--This is the body tag-->
	</body>
</html>

Step 2

Fading Exercise

From now on, each of the steps will be an exercise in the workshop. Please follow along and don't be afraid to experiment. Just copy and paste stuff where it says to and watch the magic.

<!--Put this in the script tag-->
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn(1000);
        $("#div2").fadeIn(2000);
        $("#div3").fadeIn(3000);
    });
});

<!--Put this in the body tag-->
<button>Click to fade in boxes</button><br>
<br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

Step 3

Animation exercise

<!--Put this in the script tag-->
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: '250px'});
    });
});

<!--Put this in the body tag-->
<button>Animate</button>
<br><br>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

Step 4

Dialog exercise

<!--Put this in the script tag-->
$(function() {
    $( "#dialog-1" ).dialog({
        autoOpen: false,  
    });
    $( "#opener" ).click(function() {
        $( "#dialog-1" ).dialog( "open" );
    });
});

<!--Put this in the body tag-->
<div id="dialog-1" title="Lorem ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<button id="opener">Open Dialog</button>

Step 5

Stylization exercise

<!--Put this in the head tag-->
<link href='https://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>

<!--Put this in the style tag-->
p{
	font-family: 'Chewy', cursive;
	font-weight: 400;
	/*background-color:
	text-transform:
	text-decoration:
	border:
	border-radius:
	text-shadow:
	font-weight:
	box-shadow:
	color:
	*/
}

<!--Put this in the body tag-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis tellus nunc. 
Suspendisse iaculis facilisis erat, et feugiat nibh finibus sit amet. Ut consequat lorem sed neque aliquam, ac maximus lacus eleifend. 
Fusce venenatis mi et urna hendrerit tristique. Donec ut libero semper, fermentum dui et, mattis lorem. 
Curabitur pellentesque semper odio nec accumsan. Quisque placerat magna ante, a dictum nulla porttitor id. 
Nam at magna quis est gravida ornare gravida sed tortor. Donec sed metus vel arcu sagittis molestie. 
Vestibulum viverra metus sed pulvinar finibus.</p>