How to begin toying and learning JavaScript (Intro JS tips)


So, this article is a basic introductory run down of using JavaScript to create simple variables, access them, and what document.write is. For the simplicity of this illustration, it is all condensed in one HTML file and passed between inline script tags.

Note: The <script> tags can be OK to start with, but as you and the project progresses, the best practice and way to go is have all your JavaScript in a separate external .js file, called right above the closing </body> tag.

<!DOCTYPE html>
<head>
<title>Basic JavaScript Tips</title>

<script src="modernizr.custom.05819.js"></script>

<script>
//initialize variables for service names and speeds 
var servicelName = "Basic"; 
var service2Name = "Express";
var service3Name = "Extreme";
var service4Name = "Ultimate";
var servicel5peed = 5;
var service25peed = 25;
var service35peed = 50;
var service4Speed = 150; 
</script>

</head>
<body>
<h2>Simple variable usage</h2>
<table>
  <tr>
    <th>Service</th>
    <th>Download speed (Mbps)</th>
  </tr>    
  <tr>
    <td><script>document.write(servicelName);</script></td>
    <td><script>document.write(servicel5peed);</script></td>
  </tr>
  <tr>
    <td><script>document.write(service2Name);</script></td>
    <td><script>document.write(service25peed);</script></td>
  </tr>
  <tr>
    <td><script>document.write(service3Name);</script></td>
    <td><script>document.write(service35peed);</script></td>
  </tr>  
  <tr>
    <td><script>document.write(service4Name);</script></td>
    <td><script>document.write(service4Speed);</script></td>
  </tr>    
</table>

<script>
// create ordered list
document.write("<h2>What does <i>document.write</i> do?</h2>"); 

document.write("<ol>"); 
document.write("<li>Reduce spending on non- necessities.</li>"); 
document.write("<li>Use extra money to pay off debt, starting with highest-interest credit card.</li>"); 
document.write("<li>Continue paying off debts until you are 8 debt free.</li>"); document.write("<li>Put a fixed percent of your pay aside in savings every payday.</li>"); 
document.write("</ol>"); 
</script>

</body>
</html>

Live Demo of the above code ran in the simple online JavaScript IDE, Jsfiddle (a great intro free online JS IDE for testing small scripts).


Published by

admin

I’m Cameron Cashwell, I’ve been a Web Developer for 6+ years. I’m always on the look out for exciting new projects and ideas. Wanna work together? http://www.cdev.co/#request

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz