Learn JavaScript in 12 Minutes

this is how I learned JavaScript this is really old now but has 24 hours of content I'm going to cover about five out of the first eight hours in the next 12 minutes because this is the bit that really teaches you the language so javascript is a client-side scripting language that means that when a user goes to a website the web server will send an HTML file back to the user and it will include the JavaScript code the user could look at this code if they want to the users browser then execute the code when it's processing the page this is in contrast to a server-side language which will not send the code to the user but just the output of the code javascript is not Java so don't get confused by that Java is a different language javascript has many uses including form validation effects on a web page and interactive content javascript is written inside of an HTML file so let's make a really simple one we're going to have the html5 doctype HTML tags the head tags the body tags and they'll have a title tag I'm going to save this file as JavaScript tutorial dot HTML it's important to remember that HTML or HTM file extension if you are unsure about writing HTML files you can watch my HTML tutorial you can then find this file and open it in a web browser obviously there's nothing to see yet you put JavaScript inside of a script tag you may see in older tutorials people may add a language and a type attribute to this tag but in html5 this is no longer necessary a really simple thing to do to test that it's working is just to output some text to the browser so we can write document dot write and then open and close brackets and inside we put some text inside double quotes so I'm just going to write hello world and then we end the line with a semicolon and this creates a statement so we can see it outputs hello world to the browser you may not totally understand how this line works yet but that's ok we'll start by learning about variables a variable is an item of data that has a name under value in JavaScript to create a variable you will use the VAR keyword and then the name of the variable and if we put a semicolon now this will create a variable declaration if you've programmed in other languages you might be used to defining a type for each variable but in JavaScript you don't do that so at this point the value of this variable would be undefined to define it we can type my variable equals 5 for example or we can combine all of this into a single line and say var my variable equals 5 of course this could be any number it could also be a string or it could be a boolean value so true or false commenting code is very good practice you can do that with a double slash comments are used to describe what is happening in the code and they're not executed okay now that we have variables let's look at operators these will let us analyze our variables first is concatenation so if I create two variables called words and more words and put strings in each one I can concatenate these and that means just combine them together into one longer string using the plus sign then I can use document.write and output the variable sentence and we see that this variable has been concatenated with this variable so now we have a longer one that says this is a sentence plus is also used to add numbers as you'd expect document.write takes a string to output to the browser even though this is a number javascript will handle the string conversion automatically so we see that because these are numbers it will add them instead of concatenate them and output eight as well as plus you can also subtract you can multiply with an asterisk you can divide with a forward slash and you can find the remainder after division with a percent sign these are all binary operators that take two operands this one and this one there are some unary operators which only take one operand this includes plus plus plus plus increments the variables so this is the same as just adding one to it if you put the plus plus after the variable it will evaluate the expression so it'll set total to num1 and then it'll increment the variable so this will still output five but if we take a look at what num 1 ends up being it's been incremented to six if you want to do the increment before the evaluation you put the plus plus before the variable then when we output total we see we get six similarly you can do - - on either side of the variable strings are stored as objects I'm just going to create a string and put some letters in it so alphas value is a string which is stored as an object you don't need to worry too much about what an object is at this point except that even though you can't see them strings have some internal properties one of which is the length of the string we can access properties by typing the name of the variable then a dot and then the property name in this case length so I'm going to create a new variable called length and its value is going to be the property of alpha which is also called length and if I output this variable it will say seven because this string has seven characters strings also have methods that you can call now the difference between a property in a method is that a property is just a piece of information it's a value it tells you something about the object a method on the other hand can take input do computation and then output the answer one method is substring and it will just extract a portion of the string we can call the substring method by type an alpha dot substring and then we give this method some input in brackets afterwards it takes two index values and it will return the portion of the string that lies between those positions for example if I give it three and five it will output de because D is in position three and then it'll output D which is in position four and then it'll stop before gets to five it goes upto but does not include this number also note that a is at position zero so if we output zero to five will get ABCDE there are of course more properties and methods for string values but they all work in a very similar way next arrays arrays holds many values in a single variable they're useful when you want to loop through lots of items and do the same thing to each one there are a few ways to create an array we can use the new keyword we want a new array array with a capital A and then in brackets we define the size of the race so we can say we want an array that will hold seven items and the line with the semicolon as always this will create the array and then we can put stuff into the array by using square bracket notation so you could say at position zero again at zero base just like the characters in a string we want to put the string cat a position one we want to put dog a position - we want to put the number ninety five and we keep doing this up until the position six this is the last one remember we've got seven items but we're starting from zero we could put true then we can read the values in the same way so this should output dog we get zero and it will output cat 6 and the output true and filling up in a way like this might be a bit tedious instead you can just do it all here you can separate your values with commas so now we just have an array with four items so if we get item at position number one remember this is at one this is at zero so lapid dog the final way you can create an array is even shorter you can use square brackets here and this just is shorthand for writing new array you can create the array in any way that you want you get the same result in each case we're going to take a very quick look at defining your own functions they're very useful if you have called that you want to reuse you put in a function and then you just call the functions as many times as you want first use the function keyword and then the name you want to give your function and then we open and close brackets and then open and close curly brackets and inside just the code that you want the function to execute so I'm just going to output hello this could be put in the head section to tidy things up then we call the function by typing the name of the function open close bracket semicolon if we wanted to give the function some input you can add a parameter so just type a variable name in the brackets you can have more than one if you separate them with commas then you can use this variable inside of the function when we call the function we give the variable a value finally we're going to look at some flow control statements first an if statement or an if statement will only execute code if a particular condition is true for example if I set a equals seven and then say if a is greater than ten execute this code and the code I'm going to write is alert and then the value of a now alert is a method that gives you a dialog box and the parameter that it takes is the text to display so if we refresh the page nothing will happen because a is not greater than ten if we made this true though so a is greater than ten we get JavaScript alert with the value of a we can also test for less than we could test for greater than or equal to less than or equal to equal to with a double equal sign or not equal to with an exclamation mark and then is single equals so we could use these last two for Strings so a is equal to Jake so it will output Jake if I make it not equal it's case sensitive it will not output anything if you want you can add else after the closing curly bracket then open and close more curly brackets and in here have some more code to execute if the condition is not true the last thing I want to show you is a loop there are a few loops in JavaScript but the most useful one is probably a for loop this will execute a block of code multiple times so we use the for keyword then in brackets we need a counter variable now it's very common to call this variable I and initialized it to 0 you can initialize it to whatever number you want then we type a semicolon the next piece of information we give it is a condition so we want to loop while I is less than 5 let's say then another semicolon and the last piece of information to give it is something to do after each iteration so we want to increment I we can use plus plus to add 1 to I each time then we open and close curly brackets just like an if statement and in here just to show you what is going to be happening I'll output something I'm going to have a string then I'm going to concatenate the current value of I and then I'm going to concatenate the HTML newline tag this will just make the output a bit neater so what this is going to do is create a variable called I and initialize it to zero then it'll say is zero less than five yes it is so it'll do this and I'll put this as iteration zero then it will do this space this happens at the end so I will become one then a loop and do the same thing again it's one less than five yes it is it does this and it'll keep going until it gets to 4 4 is less than 5 it'll do this add 1 to 4 so I equals 5 is 5 less than 5 no it's not so it'll stop and it will continue down here so we can see it outputs this is iteration 1 2 3 and finally 4 so does a 5 times in total if we wanted to go from 1 to 5 we can just change the numbers so these are the fundamental things in the JavaScript language now unfortunately just like with any language I can't teach you everything in 12 minutes but hopefully this has given you a solid foundation and you can work from here thanks for watching

Channel: Jake Wright

Views: 2,605,625

Rating: 4.894783 out of 5

Keywords: jake, wright, computer, science, javascript, tutorial, how to, make, website, from scratch, code, build, program, dynamic, quick, lesson, cambridge, online, interactive, html, help, internet, hyper, text, markup, language, java, site, windows, mac, notepad, custom

Id: Ukg_U3CnJWI

Length: 12min 0sec (720 seconds)

Published: Tue Aug 05 2014