JavaScript for Beginners: A Summary

Today I'll be talking about JavaScript for beginners. Yeah, let's go. We use justfiddle.net. In this environment, if you're clicking the top right settings, you can adjust the layout. I'm using classic, but you can choose other kind of layouts if you don't like this one. Okay. So HTML is for the structure of a document, while CSS for the style and visuals. Now JavaScript is to make things interactive. We used to have very static websites in the early days, but now they're very interactive and we have social media apps and all this stuff. So a lot of JavaScript is involved in that. So how can we start? Let me make a paragraph here in HTML. So we have the HTML panel here where I can write HTML. We have the CSS panel where I can type some CSS, and here I have the JavaScript one. And if I click Run in the top left, I can see the results of my code. So we have a paragraph. So if I wanted to change the color in CSS, I could simply do, if I want to target all the paragraphs, make them rather do it like this. That's cool, but how can we do this with JavaScript? So let me show you. So first of all, in JavaScript, first you've got to always target the element you want to manipulate. So the paragraph, that's what we want to manipulate. Now we need a way to find this element in the whole document. Remember, I'm doing things very simple here. There's only one element, an actual real page has many, many elements, some of them nested inside others and so on. So I need some kind of identifier to find this. And the easiest way I can do is if I add an ID attribute to this paragraph, let's call it paragraph. And go to the JavaScript. So in JavaScript, there are several, there are things called objects, and one of them is documents. And if you want to ask the document to do something for you, you can type document dot. So an object is like a real load object. It has attributes, like a car has attributes, right? It's color, it's make and so on, what year. Now the car also has some things you can operate on. Like you can drive the car, right? You can turn the engine on. You can turn the windshield wipers and so on, air conditioner. So we're going to ask the document to operate on something. So we're going to get element by ID. So these things are called functions because they do something for us. The function name is get element by ID. And it's important that the naming be exactly like that with the first G lowercase. And then the word element, the first letter is uppercase. And by an ID also uppercase the first letter. This is called the camel case naming convention. So we need to type exactly like that, otherwise it won't work. So continue here. You all can make get an ID. Every time you have a function, you have to type parentheses. Open and close. And then within that, we can pass optionally things to the function. In this case, OK, I need to get an element by ID. I need to know what ID. So that's what the argument here is. Now the argument is what we type for the ID attribute value for the P. So we can use that like this. But I need to add either single or double quotes surrounding it. Because if I don't have that, it's going to think it's something else. If you want the literal word paragraph to appear there, you need the quotes. And these things are called strings. Strings are sequences of characters. So every time there are quotes surrounding some sequence of characters, that's a string. So when we say OK document, which kind of represents the whole document here, I need something. I say dot. So this get an element by ID belongs to document. So it's one operation we can do. This function get element by ID. Once given an argument, in this case, the ID of this element, paragraph, it's going to return us literally reference. Or think of it like as a hook that's tied to this element here. So we can operate on that. And one of the attributes of this paragraph, it's actually an object as well, HTML element, is that it has dot style. Dot style is like all the CSS properties of this thing. And the other, you can say dot color like that. Now if you just say like this, you're going to access the color style of this paragraph element. Now if I want to change anything with JavaScript, in general, we have left hand side is the thing you want to change. And equal sign, right hand side is the new value. In this case, let's add red within double quotes or single quotes. You do right. Now this is also called a string of three characters. I've got R, E, and D. And the equal sign is an attribution or assignment operator here. Now the space between them, you don't need to have that. It's something I just add for the style. Because I think it's better visually. But you don't have to have that. Remember left hand side is the thing you're going to change. In this case, the color of the style of the P element. So I'm going to click run in the top left. And I can see as soon as it runs, the paragraph is now in color red. If you can see the color red. Now what happens is it loads this document. HTML. And then it runs the code in the JavaScript part. Initially, the paragraph is going to be the standard color default that's black. But it's very quick that it runs the JavaScript code. So you don't even notice that it turned red. OK, and that's nice. Let's try another property. Let's say I want to change the background color. Let's say I want to change it to maybe yellow. So I would follow the same process. It's nothing tricky here. You're going to type almost exactly the same thing, except you're going to change color for background color. And the right hand side is going to be yellow. So first, we got to always go through the document. So document. Now I need something out of it.getElementById. parentheses. It's a function. All functions need parentheses to be called. It has one argument, and that's the ID, the string. Paragraph. Now this gives us or returns the function. All is return something back to you. And that's something as the HTML element B. Now we can say, OK, .style to access the object that contains all the CSS properties. And we can say .backgroundColor. Now you notice I type backgroundColor in camelCase. CSS is background dash lowercase color. But when we write JavaScript, the naming convention is always camelCase. So you're going to have to write it like this. Without the dash and the C has to be capitalized. Now we want to assign a new value. So we always say equalSign. And then right hand side is always the newValue. And I'm going to say yellow. Don't forget the quotes. Either single quotes or double quotes. At the beginning and the end of the sequence of characters. Now we can see it added the backgroundColor yellow to this paragraph element. And so it goes on. You can pretty much change any CSS property. You just change style.whatever here. And I'll always make sure to convert from the dashed case to the camelCase if you're trying to do something in JavaScript. So I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value. And I'm going to add a new value.