JavaScript Video Tutorial Pt 4

Javascript Video TutorialIn this JavaScript video tutorial I spend some time explaining the complexity of using Arrays and Functions in JavaScript. If you missed part 1, watch that first JavaScript Video Tutorial.

JavaScript Arrays are different from many languages because you can pretty much throw anything in them. This is because JavaScript isn’t strongly typed once again.

JavaScript Functions are also odd because they don’t follow the normal scoping rules used in most other languages. And, did you know you can completely disregard the number of arguments a function will accept? You’ll learn this plus how to:

  • Manipulate Array Data
  • Use Multi-Dimensional Arrays
  • Use the For In Loop
  • Do Awesome Things with the Argument Object

And, much, much more! Like always the code follows the video. If you have any questions, leave them below.

Code From the Video

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>JavaScript Arrays and Functions</title>
    
  </head>
  
  	<body>
  	
  	<script language="javascript" type="text/javascript">
  		<!-- Hide JavaScript
  		
  		// An Array is a collection of values
  		// Each of these values is accessible by asking for the index associated with the value.
  		// Because JS is untyped, you can store any data type in an array
  		
  		var sampArray10 = new Array(10); // Creates an array with 10 elements
  		
  		var sampArray = new Array();
  		sampArray[0] = "Derek";
  		sampArray[1] = "123 Main St";
  		sampArray[2] = 36;
  		
  		for(i in sampArray)
  		{
  			document.write(sampArray[i] + "<br />");
  		}
  		
  		document.write("Length of Array: " + sampArray.length + "<br />");
  		
  		var sampArray2 = new Array("Sally", "221 Main St.", 34); // Short way to create an array
  		var sampArray3 = ["Sally", "221 Main St.", 34]; // Shorter way to create an array
  		
  		sampArray4 = sampArray.concat(sampArray2); // Join 2 arrays
  		
  		for(i in sampArray4)
  		{
  			document.write(sampArray4[i] + "<br />");
  		}
  		
  		document.write("Array String: " + sampArray.join(" ") + "<br />"); // Converts array into a string
  		document.write("Array Slice: " + sampArray.slice(0,2) + "<br />"); // Returns part of an array
  		document.write("Array Reversed: " + sampArray.reverse() + "<br />"); // Returns the array reversed
  		
  		// ------ Array Splicing
  		
  		var numList = [2,8,1,7,6,5,3,4];
  		document.write("Sort Array: " + numList.sort() + "<br />"); // Returns the array sorted
  		document.write("Spliced Array: " + numList.splice(0,3) + "<br />"); // Splices indexes from array
  		document.write("Array After Splice: " + numList + "<br />"); // Returns the array spliced
  		document.write("Replace Values in Array: " + numList.splice(0,3,9,10,11) + "<br />"); // Splices indexes from array
  		document.write("Array After Splice: " + numList + "<br />"); // Returns the array spliced
  		
  		// ----- Multi-Dimensional Arrays
  		
  		var multiArray = [[1,2,3,4,5], [6,7,8,9,10]];
  		
  		document.write(multiArray[1][3] + "<br />");
  		
  		for(i = 0; i < multiArray.length; i++)
  		{
  			for(var j = 0; j < multiArray[i].length; j++)
  			{
  				document.write(multiArray[i][j] + "<br />");
  			}
  		}
  		
  		// ----- Functions
  		// You create functions so that you can write code once and then execute it any number of times
  		// JavaScript doesn't check if you passed the right number of arguments or datatype
  		// If you pass more arguments than are expected, they are ignored
  		
  		function addThese(num1,num2) 
  		{
  			return num1 + num2;
  		}
  		
  		document.write("1 + 2 = " + addThese(1,2) + "<br />"); // Returns the array spliced
  		
  		function addMany(a,b,c,d,e,f)
  		{
  			var i=1; 
  			var sum=1;
  			document.write("Arguments Length: " + arguments.length + "<br />");
  			while(i < arguments.length)
  			{
  				sum = sum + arguments[i];
  				i++;
  			}
  			
  			document.write("Sum of arguments: " + sum + "<br />");
  		}
  		
  		addMany(1,1,1,1,1,2);
  		
  		// ----- Function Scope
  		
  		var scopeTest = 1;
  		
  		function scopey() // JS doesn't have block level scope
  		{
  			// All variables defined in a function are considered defined before they are given a value
  			/*
  			function s() { document.write("In function s: " + scopeTest + "<br />"); }
  			s();
  			*/
  			document.write("In Scopey 1st: " + scopeTest + "<br />");
  			var scopeTest = 2;
  			document.write("In Scopey 2nd: " + scopeTest + "<br />");
  			return true;
  		}
  		scopey();
  		document.write("Out of Scopey: " + scopeTest + "<br />");
  		
  		
  		-->
  	</script>
  	<noscript>
  		<h3>This site requires JavaScript</h3>
  	</noscript>
  		
  		
  		
  	</body>
</html>

12 Responses to “JavaScript Video Tutorial Pt 4”

  1. mr.roshik says:

    Thanks for nice tutorial 🙂

  2. Jerry E. Shepherd says:

    function addMany(a,b,c,d,e,f) ???

    I really am enjoying your tutorials and am grateful for such an easy way to get up to speed with JavaScript, XML, css, etc.

    On this tutorial about functions, I am glad to learn about this but have one question. I assume that this trick is limited to the number of arguments included in the functioln declaration and more that more arguments (7 or more in our example) could not be passed without a problem. Is this correct?

    Thanks,

    Jerry

    • Jerry E. Shepherd says:

      I was a bit premature. You covered it immediately after I stopped to ask the question. Sorry and Thanks for your perception of anticipating the question.

      Jerry

      • admin says:

        No problem. I try to cover everything in the tutorial series. It takes some time to learn how to program. I’m glad you find the videos useful 🙂

  3. Lio says:

    Great tutorials,Thank you for the effort
    Confused with part of the code
    In addMany() function ,why the sum is not 0 before the loop
    Thanks

  4. Anonymous says:

    Derek made a mistake because he was super fast at demoing.
    Just set var i = 0; and var sum=0;
    See function below.
    function addMany(a,b,c,d,e,f)
    {
    var i=0;
    var sum=0;
    document.write(“Arguments Length: ” + arguments.length + “”);
    while(i < arguments.length)
    {
    sum = sum + arguments[i];
    i++;
    }

    document.write("Sum of arguments: " + sum + "”);
    }

  5. shani says:

    nction addFunction(a,b)

    {
    return a+b;
    }
    +
    =
    whats wrong with the functionfu

  6. shani says:

    what happened no function sent

  7. shani says:

    (function addFunction()
    {var a=document.getElementById(‘hi’).value;
    var b=document.getElementById(‘hii’).value;
    function c(a,b){
    return a+b;}
    }

    +
    =)

Leave a Reply

Your email address will not be published.

Google+