Modern JavaScript Complete Course ES6+ 2020 | Laurence Svekis | Skillshare

Modern JavaScript Complete Course ES6+ 2020

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
89 Lessons (9h 41m)
    • 1. JavaScript IntroductionSkillsahre

      3:59
    • 2. 1 Welcome to JavaScript

      8:57
    • 3. 2 Writing JavaScript

      5:07
    • 4. 3 JavaScript and HTML

      10:34
    • 5. 4 Comments JavaScript

      3:53
    • 6. 5 Output Options JavaScript

      6:12
    • 7. 6 Output Action Challenge

      6:52
    • 8. 7 JavaScript Variables

      6:40
    • 9. 8 Let and Const JavaScript

      6:26
    • 10. 9 Data Types

      6:47
    • 11. 10 Challenge JavaScript Prompt

      5:36
    • 12. 11 Template Literals

      6:13
    • 13. 12 Prompt Challenge

      2:51
    • 14. 13 Type Conversion and Coercion

      7:00
    • 15. 14 Type Challenge

      3:29
    • 16. 15 JavaScript Operators

      3:45
    • 17. 16 JavaScript Assignment Operators

      2:31
    • 18. 17 JavaScript Comparison Operators

      3:30
    • 19. 18 Truthy and Falsey

      2:25
    • 20. 19 Condition Statements

      6:11
    • 21. 20 Condition Challenge

      5:53
    • 22. 21 Ternary Operator

      5:26
    • 23. 22 Logical Operators

      5:45
    • 24. 23 JavaScript Switch Statement

      4:55
    • 25. 24 Switch Friends Challenge

      4:13
    • 26. 25 JavaScript Functions

      7:40
    • 27. 26 JavaScript Function Parameters

      7:04
    • 28. 27 JavaScript Function Return

      5:18
    • 29. 28 Function Expression

      6:47
    • 30. 29 Function Scope

      7:43
    • 31. 30 Function closures

      7:59
    • 32. 31 Function Recursion

      4:36
    • 33. 32 Number Guesser Challenge

      6:43
    • 34. 33 IIFE functions

      5:35
    • 35. 34 Arrow Functions JavaScript

      4:51
    • 36. 35 JavaScript Objects

      9:16
    • 37. 36 JavaScript Objects Part 2

      7:31
    • 38. 37 Create a Car Object Challenge

      7:47
    • 39. 38 JavaScript Objects Part 3

      6:07
    • 40. 39 Create JavaScript Objects

      5:08
    • 41. 40 JavaScript Arrays

      8:37
    • 42. 41 Values in the Array

      6:57
    • 43. 42 Array Methods JavaScript

      6:58
    • 44. 43 Array Methods Part 2

      10:55
    • 45. 44 Array Methods Advanced

      11:04
    • 46. 45 JavaScript Loops

      4:57
    • 47. 46 Loop Array Contents

      5:00
    • 48. 47 Loop Object Contents

      1:57
    • 49. 48 JavaScript Map

      3:12
    • 50. 49 JavaScript Math

      8:16
    • 51. 50 JavaScript Date

      8:52
    • 52. JavaScript DOM Introduction

      3:19
    • 53. 1 Welcome to JavaScript DOM

      6:47
    • 54. 2 Select and Element JavaScript DOM

      5:15
    • 55. 3 Element Selectors

      9:11
    • 56. 4 Element QuerySelectorAll

      5:58
    • 57. 5 JavaScript Manipulation InnerContent

      6:21
    • 58. 6 Element Attributes

      6:14
    • 59. 7 Attribute Updates

      9:46
    • 60. 8 JavaScript and Classes

      6:52
    • 61. 9 Element Children and Traversing

      7:39
    • 62. 10 More Traversing

      4:16
    • 63. 11 Element Manipulation Styles

      7:17
    • 64. 12 Create Elements

      11:20
    • 65. 13 Append Prepend Challenge

      3:19
    • 66. 14 Remove an Element

      10:51
    • 67. 15 Element Clones

      7:09
    • 68. 16 Adding Event Listeners

      10:38
    • 69. 17 Bubble and Capture Event Listeners

      8:12
    • 70. 17 JavaScript Event Listeners

      10:18
    • 71. 18 More Event Listeners

      6:49
    • 72. 19 Keyboard Events JavaScript

      6:53
    • 73. 20 List Challenge Events

      13:11
    • 74. JavaScript Advanced

      1:17
    • 75. 1 JavaScript Number Methods

      5:50
    • 76. 2 JavaScript String Methods

      11:02
    • 77. 3 JavaScript String Methods Part 2

      10:35
    • 78. 4 JavaScript Math Object

      5:41
    • 79. 5 Random Item From Array

      6:06
    • 80. 6 Random Page Background

      4:15
    • 81. 7 JavaScript DOMContentLoaded

      3:22
    • 82. 8 Element Mover Challenge

      9:52
    • 83. 9 JavaScript Date

      6:58
    • 84. 10 JSON parse and Stringify

      5:00
    • 85. 11 LocalStorage HTTP Protocol

      5:31
    • 86. 12 LocalStorage JavaScript

      5:40
    • 87. 13 TimeOuts and Intervals

      8:37
    • 88. 14 Make a prototype

      5:19
    • 89. 15 JavaScript Fetch

      6:44

About This Class

Learn how to apply JavaScrip to web pages

d0369618

JavaScript for Web Design - Create interactive and dynamic web pages using JavaScript code.

JavaScript lessons cover the fundamentals of using JavaScript

  • Explore how to add JavaScript to your HTML pages

  • how to add Comments JavaScript

  • Output options document write and console log and alert methods

  • Introduction to JavaScript Variables using let const and var

  • Different Data type within JavaScript

  • Coding Challenge - Create User input with Prompt Code JavaScript

  • JavaScript template literals to create strings

  • Coding Challenge - JAVASCRIPT Code Challenge -Prompt Challenge

  • Explore JavaScript Type Conversion and Coercion.

  • Coding Challenge - Get the data type Type Challenge using JavaScript Code

  • What are JavaScript Operators and how to use them

  • What are JavaScript Assignment Operators

  • JavaScript Comparison Operators

  • JavaScript Truthy and Falsey explained

  • JavaScript if else and else if Conditional Statements

  • Coding Challenge - practice JavaScript code learn and explore the code with a challenge to code

  • JavaScript Ternary Operator Conditional (ternary) operator

  • JavaScript Logical Operators Example

  • JavaScript Switch Statement

  • Coding Challenge - Create a Simple Game Switch Friends Challenge with JavaScript

  • Introduction to JavaScript Functions

  • JavaScript Function Expression vs function declaration with examples

  • JavaScript Function Scope explained

  • Example of JavaScript Closures how to create a Closure

  • What is JavaScript Function Recursion with recursion examples

  • Coding Challenge - Explore how you can use JavaScript code to create a fun simple Game - Number Guesser Challenge

  • IIFE (Immediately Invoked Function Expression) JavaScript function

  • ES6 JavaScript New Arrow Functions JavaScript.

  • Explore JavaScript Objects create objects with JavaScript

  • Coding Challenge - Objects around Create a Car Object Challenge

  • Introduction to JavaScript Arrays - create arrays to hold data with JavaScript

  • Do more with Arrays - using Array Methods JavaScript

  • How to create JavaScript Loops - iteration with JavaScript code

  • Array contents loops

  • Create random values using JavaScript Math

  • JavaScript Date object - set and get date values

  • Welcome to JavaScript DOM - Introduction to dynamic and interactive webpage content

  • Select and Element JavaScript DOM

  • How to Select Web Page elements using JavaScript - Element Selectors

  • How to use Element QuerySelectorAll JavaScript DOM element selection methods

  • DOM content updates - JavaScript Manipulation InnerContent

  • How to update Element Attributes - using JavaScript DOM

  • Element Children and Traversing web page elements using JavaScript

  • Element Manipulation Styles

  • How to create Page Elements using JavaScript Code

  • Coding Challenge - Page Element Append Prepend Challenge using JavaScript Code

  • How to Remove an Element from your webpage using JavaScript Code

  • Creating element clones - JavaScript code to duplicate page elements

  • JavaScript Web page interactions - Adding Event Listeners.

  • JavaScript Element Events Bubble and Capture Event Listeners

  • JavaScript Event Listeners for Keyboard Events also on elements keyboard events

  • Coding Challenge - Dynamic Shopping List using JavaScript List Challenge Events

  • JavaScript String and Number methods

  • How to get Random Item From Array - randomize array items select random value

  • Coding Challenge - how to create Random Page Background

  • Load JavaScript once page is loaded DOMContentLoaded document ready

  • Coding Challenge - Element Mover Challenge move webpage elements with JavaScript

  • JavaScript Date, LocalStorage, Prototypes, Fetch requests

The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the internal subset and external subset have not yet been specified.

Transcripts

1. JavaScript IntroductionSkillsahre: Are you ready to bring your Web pages to life with dynamic and interactive code? While it all starts with JavaScript, So JavaScript is the engine and the coding language behind what your browser can do with your Web page content, so there's no server that's required. It all runs directly within your browser and making things happen with your page elements as well. It's gives you ability to write some code and some script telling the browser what you wanted to do and how you want it to present that code and content. This is JavaScript, and JavaScript is one of my favorite programming languages. I use it all the time for almost 20 years have been writing JavaScript code, and I'm really excited about this wearing be presenting you all of the steps to get started . All of the basic fundamental core concepts of JavaScript, how to start writing JavaScript code and how to start getting things toe happen with your scripting language. There's gonna be a full introduction to the different variables data types, and also this could be modern JavaScript, so the latest in JavaScript technology and the latest methods and resources how to write your JavaScript code. We're also going to be covering functions, of course, how to create loops, adding in conditions and a whole lot more so all of the standard stuff that you need to know in order to get started to write your own JavaScript code and create your own many Web applications that are running directly within the browser on of course, source code is included. I do encourage you to try the code out for yourself to get more comfortable and to get a feel for what you can do with JavaScript. With just a few lines of code, you could do so much. And when you start writing JavaScript code, I guarantee you you're gonna be asking for more. JavaScript is amazing way to produce some really amazing things within your Web pages. And this is the beginning. There's also some coding challenges where I'm going to present you with a challenge. Show you what the end result looks like and then leave it to you to create and use javascript in order to present the same type of application. And then, of course, I also am gonna be walking you through the solution within the same lesson and I do suggest that you do try the coat out for yourself. You don't need any additional tools or resources. All you need is a browser in order to run the JavaScript code and an editor to write the JavaScript files, and that's it. It renders out within HTML. So connect the JavaScript within your HTML file and you're ready to go and you're ready to see all the amazing things that you can do it. JavaScript. I do suggest that at the end of each lesson, you take the code, try it out for yourself and submit a project within each lesson. You have an opportunity to select the project as well as all of the resources are also listed. So go ahead and create a project for the lesson. Share your code is simply select. Create a project, and that's going to give you an opportunity to share your work with us. And there's several options to share your work to either upload an image of your project, so provide a screen capture of the current project that you've created with the code the output of the code. You can also add in a video and linked to the code as well within get hub and I am going to be showing you more Get hub throughout the lessons. So give ah title of your project. And this could also be the lesson number as well as the syntax that you're gonna be writing . And sharing about this could provide me an opportunity to provide you some valuable feedback for how you're doing within the lessons. And each lesson is an opportunity to select and provide a project. I do have challenges within the lessons and within those challenges. And I strongly recommend to, in order to get the most out of the content to submit those as projects within the course, submitting a project is gonna provide me an opportunity to review your work, comment on your progress and really help you learn and also provide some feedback for you on your progress within the course. So let's get started and let's get coding. JavaScript 2. 1 Welcome to JavaScript: Hey, in this lesson, I'm gonna run through a quick history of JavaScript and I'm gonna show you the Web without javascript and what it would be like if JavaScript was never invented. So it all started with Netscape, and Netscape was the one that created the JavaScript programming language. JavaScript is a client site scripting language for Web pages. And what we mean by client side is that when the user comes to visit a website directly within their browser, they're able to run scripting code. And this is JavaScript that allows the Web pages to be dynamic as well as interactive. And this is all done with JavaScript pre JavaScript. We would have to send requests to the server, and then the server would generate the Web page code and send it back to the browser. So that whole round trip would have to be made as the pages would load. It would go to the server. The server would generate and run the code and then render out the HTML, sending it back to the browser. The back. In the early years 1995 Netscape ruled an Internet explorer was coming along, and they were competing with technologies. Sun Microsystems was looking at a way to embed Java programming into the Netscape browser, so they hired Brendan Eich to embed as schema language. And he came up with JavaScript in another unbelievable only 10 days to do it. And it officially was called Live Script when it was first shipped as part of the Navigator release in September 1995 and then afterwards. Three months later, it was officially changed to JavaScript. The choice for the JavaScript name often causes confusion, sometimes giving the impression that's a spinoff of Java, since Java's was the hot new programming language of the time. And that's where it got care ties as a marketing ploy by Netscape. And then, in 1995 Microsoft debuted Internet Explorer to this was where the leading to the browser war. And on the JavaScript front, Microsoft Reverse engineered the Navigator interpreter to create its own version, called J Script, and that was released in 1996. Then, in November 1996 Netscape submitted JavaScript to Eckman International as starting point for a standard specifications that all browser vendors could conform to. This led to the official release of the first eco script language specifications in June 1997. Since then, there's been multiple versions. There's actually been nine different versions of Atmos script, and that's where we get the Js one Js 2345678 and nine And there was actually Js four was actually never released. And then Js six was where there was a major change. So that's probably the one that you hear most often about. And that was in 2015. And that's Acma script 2015. And as new versions of JavaScript come out, it does take time for the browsers to implement the new versions and as well as users to update their browsers to the newer versions. And I'll include the links to the Wikipedia documentation so you can read up more boat and as well it lists some of the changes that have taken place and when they're taking place. So there's also a website that all linked to so JavaScript is super popular, and there's a couple sites that you can gauge how popular programming languages, and one of them is stack overflow sis. Is it common police for Web developers to post questions and comments about various programming languages and from the different respondents and as well as responses from the survey, you can see that JavaScript is by far the leading language for thin this platform. So within HTML and CSS is next, then sequel Python, Java and so on. So goes down all the whole list there. And this is from post most popular technologies from a survey, and they've got 57,000 respondents to this survey. And in addition, get Hub is a place to store repositories of programming languages and coding languages so you can see all of the different pull requests over time. JavaScript is this yellow line here at the top? So again, leading programming language on get hub. So this is the most commonly used one on get hub, and they have a whole listing of all the different languages that are being used. Have pull requests on get hub and the nice thing about javascript. It is really easy to get started with JavaScript, and I'll show you a quick example of JavaScript, and we'll also look at some websites. Check him out without JavaScript, so we are going to be using chrome in the upcoming lessons and chrome comes with a developer tool, so this allows you to debug your code in its ideal for coding. All other browsers as well have similar types of developer tools. But we are going to focus on the chrome developer tools because there's some specific features within here that I wanted to highlight. So in order to open up the deaf tools, and this comes with every version of chrome, so it's automatically in place with him chrome. So there's no additional downloads or anything like that. You can't open up and start using your developer tools. They've got information about here how to open that. So on a Mac and I'm on a Mac, So its command option plus C or on a Windows machine control shift plus C, you can also right click tor shift, clicked to anywhere on the page and click inspect so that will open up the developer tools windows. That's the window there, and you can always minimize and resize it and close it. The other way to open it is go to the three bars at the top and under more tools, select developer tools, and that will open up that same window by default, the window opens up on the right hand side. You can place the dock to the bottom of and there's a number of tabs here, and we're gonna be looking at these in more detail as we go through the end through JavaScript coming up. So there is a quick way to disable JavaScript on your pages with developer tools. So going into the developer tools menu, select run command. So you can also use the shortcut in order to open up the command prompt and within the command prompt. You can start typing, disable JavaScript and you're gonna get this popping up that you can disable JavaScript. So go ahead and click it. Disable JavaScript on the page and from the sources tab, it's going to give you this explanation, Mark, whenever you've disabled JavaScript. So now when you refresh the page, it's gonna look a whole lot different. And that's because JavaScript is no longer running on the developer tools. Let's take a look at some other websites of already disabled it here on the YouTube website . So notice nothing is loading and then also going into Twitter. Let's go ahead and we're gonna disable it on Twitter and a look a whole lot different. So going into the run command, disable JavaScript, refresh the page and I'll show you what the website is gonna look like without JavaScript. So it's asking us to proceed to the legacy site. You'll also going to notice that in the top right hand corner within the browser there's gonna be JavaScript was blocked on the page. And this is going to block all of these JavaScript code from running and show the page without javascript and some of the websites. Some of the modern websites don't even run without JavaScript. So that's how important JavaScript is on all of your websites. And before we conclude, also show you how do you can't re enable JavaScript? Because you don't really want to be using the Web without JavaScript, so just type in enable and select enable JavaScript and that will once again enable javascript on the website. So when you go back and you refresh the tab, you're gonna be back with JavaScript. There's also if you want to check out more about what that you've disabled, so you can always click up here in the top right hand corner. Select, manage or open up your chrome settings tab and under the slash JavaScript going out options for allowing JavaScript. So it's obviously the recommended way. You can block JavaScript on various websites and you can allow JavaScript on various websites. So these are your options for JavaScript and by default. Of course, you wanna have JavaScript running to get the most our experience out of modern websites, and this is also available within this privacy and security options where you can disable and enable javascript. So now try it out and check out the web and go some of your favorite websites without JavaScript. And then don't forget to enable javascript, and you could be ready to move on to the next lesson. 3. 2 Writing JavaScript: Hey, by the end of this lesson, I'm going to get you writing some JavaScript. So JavaScript makes things happen on the web. So you could do something simple, like having an input field having an action where somebody presses a button and then there's a response. So this is the set of instructions, and this is the script within JavaScript running the set of instructions within the browser explaining what you want the browser to dio. And this is what you do. When you create JavaScript, you create all of those instructions on how you want it to function. I'm also gonna be in upcoming lessons referencing the model a developer network. So this is an excellent resource to find out more about JavaScript. They've got some JavaScript tutorials as well as reference for JavaScript functions and various statements and declarations. And, of course, we are gonna be reviewing all of these as we go through the lessons. So this is a reference point where if you want to find out more information about different syntax that is used, you can go over to the model a developer network and check out more about what Javascript has to offer there's a full JavaScript guide, and as you progress the lessons, I am also going to be referencing what we're doing within JavaScript. So JavaScript does have really nice functionality, and it does run in the browser. You can access and run JavaScript directly within the browser by opening up your developer tools. So that's on any chrome browser you can select and select more tools as well as you can use the shortcuts. And that's going to open up this dog pop up window where you can see the script files, the contents of your files as well as there's a tab called Console. And this is the one you want to go to in order to run some JavaScript court. So the console is also going to be used for debugging. As we create some JavaScript code, we're gonna need a way to debug it, and this can also be done directly within the browser. And in this case, of course, we are using the chrome browser. So in order to run some javascript, it is a set of instructions and knowing the syntax how to write those instructions is what we're gonna be demonstrating as we go through the lessons so you can go into the console and simply type alert. And this is a function and, of course, more on functions coming up. So there are some pre defined functions in javascript that already have a set of instructions on what should happen. So it does require some parameters, and the parameter is gonna be that this alert within the rounded brackets requires a string value. And this is the message that's going to be showing with the alert. So watch what happens when we execute the code. And in order to execute the code, you write it on the line and simply press enter, and that's going to run the execution of the coat. So what the alert does is it has a pop up that shows up in your page, and it provides the message. And this is the same message that we see within the string value that's contained within the rounded brackets. So whatever you say within the alert is gonna be what's displayed in the message. So if I update this to say message and I run it again, I'm gonna have now message within the message area. So it says the page says. And this is a default part of the alert function, where it says, Page says. And then it shows you the dynamic content, which is the message contained within the round of brackets. So what I want you to do now pause the video. Open up your browser. You probably already have a browser opened. So run the developer tools and select the console tab and type in alert and then rounded brackets and within the quoted area. Type in your name and run the coat and you should see a little pop up window showing up referencing the content that you've indicated within the rounder brackets, and you could be ready to move on to the next lesson. We're gonna show you even Mawr about how to write JavaScript and will walk you through the solution after the count. So, yes, you can do this on any webpage. It's actually not can interfere with the code, so it doesn't matter which way by page. You do this on because this is running once again within the browsers. What's not affecting any of the content on the page. So selecting your developer tools opening up here, developer tool console. And now, with in here, you can type in the alert and then again, within the rounded brackets, make sure that you do quote around your message and the objective was to type in your name . You can also extend on that and see something like, Hi, Lawrence Spec. It's so whatever message you want to pass in the pop up window press enter and you should see your pop up showing up on the page. And then when the page refreshes, that code is going to be gone. And of course, you can run it again if you want. And next lesson, I got to show you how you can actually commit some JavaScript to a file. And that way it's always gonna be running within the HTML and running within the browser. When you open that up 4. 3 JavaScript and HTML: Let's take a closer look at the JavaScript syntax and going back to what we did within the last lesson, or we typed in on alert. And then we had within the rounded brackets. We had a message that we wanted to pop up within the alert. And in order to end a statement, we used the semi colon. So this as a whole, this whole line of court, this one instruction for the browser. This is gonna be what's known as a statement. So semi colon is not necessary after the statement if it's written on its own line. But if you want to have more than one line of code, then that must be separated by semicolons. So let's say, for instance, you want to have to message is pop up, so this one will be message one that one will be message to. You need to separate it by the semi colon, or you need to put it to a new line. So this way the browser knows that this was one instruction, and that's gonna be the second instruction. So let's run that code. So we get message one and assumes we hit. Okay, then it moves on to the next line of code and rights message to, and that's how the instructions are provided to the browser. So it does the first action and then once that action is completed, then it moves on to the next action. So accepting the instructions, running them one by one. And this is important to understand with JavaScript that this is how the code renders out that you have a set of instructions and as you provide more instructions, you could also add in a message three afterwards a message for afterwards and they would be done within that sequence. Also, when we're writing within the consul and we refresh it, that code is gone. So it's not committed to the HTML file. And as we progress through the upcoming lessons, we are going to be adding the JavaScript to our HTML file. We've got a basic HTML structure here with a head body section, and then we've got the each one. We have a little bit of styling that we've added in to make the H one centered. So now let's add some javascript to the page and JavaScript can run outside of html. C can run up within the terminal. And you might have seen that when coders air righting JavaScript or node, which is a JavaScript library that runs on the back entrance directly within your computer system instead of running within the browser that they don't need to open it up within an HTML file. But because we are running front end code and JavaScript code, the browser only opens up HTML files. So if you create a JavaScript file with the different extension, it's not going to run the code. That's within those instructions. So we need to specify a way for the HTML document when it's running within the browser to be understood that this is where we want to run some coat. There's a number of options, and just as we start with style tags, we can add in script tags. And this is where we can within the script tags add in JavaScript. So all right, in that same message that we were doing and alert. So now when I go back out to the page and I've just located the index file, this is the same index file, and this is the location on my computer where the index file sits, and I'm opening up the file within the browser opening up index html. So refreshing. The code runs the HTML file, and it also runs the JavaScript coat, and the page will halt until I allow the JavaScript to complete the action. And that will move on to the next line if we had more code in the JavaScript. And there are some similarities to writing the script tag and then also the style tag what we saw with in CSS as a way to bring Javascript cord and then also with the style tigers away to bring styling into the page. You can also right the JavaScript tags at the bottom before the body closes, and there is an advantage to that because of the way that the code runs. So whenever that page loads, it's gonna load all of the HTML. And if you're looking at interacting with any of the HTML objects any of the HTML elements , then best practice is to place the JavaScript code at the bottom or, if you are using it within the head section to make sure that the code has an opportunity to wait for the body content toe load. And there are ways to do this with JavaScript as it's related heavily with the HTML elements. And there is what's known as the document object, which is a collection of all the HTML elements that's constructed by the browser as it renders out the code from the HTML. It can also connected using JavaScript. And that's really easy to do. And of course, this could be more on that in the upcoming lessons. As we progress through the course, there's also you might see, that in some cases within the script tags that were specifying a type of code, and we're also linking out to a source file. So just as we saw with style sheets, we could link out to an external source file, and this is best practice in order to link out to a separate file and then that way it separates HTML in the JavaScript and you can simply select the javascript that you want to bring into the HTML. And that also gives you the one place in the one location to go to to order and update your javascript. And it also allows you to scare the JavaScript across pages. So let's do that and create Brand you file and just call that new and save that as script Js within the same directory. And so JavaScript files are saved as Js extensions. So I'm saving that as Script Js and I got a copy and paste the alert content into script Js and save. And so now we need to link to the script Js file because now we've removed the JavaScript and when we refresh, nothing happens. So in order to connect, we're still using the same script tags and we're specifying a source within the attributes and within the source. We simply link out to the location of the script file. So make sure that the script location is correct. You can also use an absolute location to make sure that on every HTML page you're still getting the same source file for the JavaScript. So now that we've linked to it, I refresh it and boom, there we go. We've got her pop up showing up once again. So a few things to note that notice that there's no additional tags within the script. Js if I go to script Js on its own, all it does is just show me the code so doesn't render anything out. There's no alerts. There's nothing happening. And that's why you do need to have the HTML page in order to render the JavaScript code. There's also, in some cases, you might see some additional attributes values within the script tanks so you might see mention of type. So this was done with HTML four and below, where we're specifying that the type of code and the type of content expected within the source is gonna be JavaScript. But with HTML five, this is not required anymore so often times that developers will just leave this out. And if you do want your code toe work with older browsers, that might not have HTML five, and most of them or pretty much all of them right now do. But if you do want to have that backwards compatibility, then you can set the script tag there. So one other way to write JavaScript before we conclude and this again is not the advised way to rate JavaScript for the same reasons as we don't use the attributes style within the HTML. This is also something that's not advisable, but you might see it and might encounter it, so it's always good to see this. So within the button and just right click me and within the button attributes I've got on on Click. So this is gonna be running an event, which means that if the button gets clicked, it's going to run the JavaScript code that's contained within the quotes. So if I type alert and I just have the message of high and you can also use the semi colon toe, add more statements to their. So let's try this and we get the typical hello when we refresh the page. Now we've got a button that says, Click Me So let's click it and see what happens. And what happens is that it runs the JavaScript code contained within the attributes. So this is something that you should avoid if you can. If you absolutely need to do it, you can do it this way. And as you progress to the upcoming lessons, I'm gonna show you way better ways to make the end Adan event listeners to the elements, and that's gonna be all contained within JavaScript code and preferably within a Js file that's linked to from the HTML. So now it's up to you. Go ahead and add some JavaScript within your HTML file. Try adding in using the script tags and then also add in to a next colonel source file with some JavaScript code. And right now I know where all we're doing is popping up that alert and then also create an HTML button with an attribute on click running JavaScript code within the quotes, and you will be ready to move on to the next lesson. And one thing to watch out for that with the quotes. If we've got double quotes here and within the JavaScript, we don't want to be using double quotes because that's gonna throw an error and we can see within brackets or authority showing it green. So there's already a problem with that code, and when we run it and we do that, click me. We're going to get an error. And this is also why we love to use deaf tools because this gives us details about what's happening with their JavaScript code, and there's gonna be more on debugging later on. But this gives us an indication of what happened, and some of the code. Some of the script did not run properly, so you can open up that and see the line of code where the problem was, and we know what the problem was. It's got double quotes here and Scott double quotes here. So this is a no no when you're running the JavaScript code, so keep that in mind as well. You can also use single quotes out here and single quotes to wrap around the alert, and then the double quotes will be fine. It's not gonna throw the error anymore, and it's gonna work, So try it, and you could be ready to move on to the next lesson. 5. 4 Comments JavaScript: this going to be a quick lesson on comments and whitespace? So let's open up the editor. We're opening up the Js file that we created last time and in order to add in comments and comments, are essential when you are creating your code in order to document what the court is doing . So it's really super useful, especially when you come back to debug it. Or if you want to pick up on a different function that you're using or a purpose of a statement or a variable name. This is where you could use comments. So there are two different types of comments that you can have in JavaScript. So there's, Ah, single line comment, and that's just with the two back slashes. And then afterwards we can write out another alert and close that. So it's gonna be a single line comment, and this is also often used If there's ah, line of code that you want to skip when it's being rendered out, that you can do that as well, let's go back and see what happens. So now the code jumps directly to the alert with the message of test, and it skips the 1st 1 And for the user, they're not gonna have any indication about what has been commented here, as the comment is Onley for the source file and for developers. So it's not gonna be for the user in order to see and interact with. So there's also a way of doing comments where you can do a multiple line comment and just doing the Ford Slash and then add in Asterix after the Ford Slash. And then whenever you write as much space as you need, you can add in the multi line comment. And when you're ready once again to write code, then you can do that directly after the multi line comment, and it will just skip over everything and what brackets is doing. That's the editor that I'm using its green out, the commented area. It's highlighting the actual code area, so let's try that one more time and see what happens. And of course, we don't see anything within the Web browser because it's not meant to be seen within the Web browser. So there's also white space in JavaScript and similar to what we saw with HTML. Whitespace will get ignored, and oftentimes, whenever we're compressing JavaScript code in order to make the Js files smaller, we get rid of the white space. So that's what you see. Sometimes when you get these men ified Js files that airmen ified so they've been optimized for size, so they'll be removing out any additional spacing. And the cold will run the same way as long as we've got the semi colon there to indicate that this is another statement of court. There's also spacing so the white space doesn't matter. And, of course, you always want to rate your code neatly. So whenever you've got your first set of instructions and there's instructions within those , then we end indented so in, denting it for various blocks. Accord as we develop out the court, so it's easy to read, and that's where we use the white space and commenting in order for us to be able to check the Js file and read it easily and understand what the code is doing. So that's another important part of it is when you are writing your code, make sure that it's neatly structured that you are using whitespace and commenting as needed in order to construct your code. So it's easy to reference what the court is doing later on. If you need to to try it, it add in a single comment at in a multi comment and you can also add single comments afterwards and this can be done on the same line after the semi colon. So this one would just be doing a second pop up window so often times as well. You're going to see that there's commenting for a particular statement or particular line of code, and then the comment will indicate what that code is doing him with. The purpose of it is. 6. 5 Output Options JavaScript: this lesson is gonna be all about having some output for the user, and that's what Javascript doesn't. That's where it's super useful is to create dynamic and interactive Web content. So it's open up the JavaScript filing. We've already seen that alerts allow us to have a little pop up window that asks the user to interact with us. That's one way that we can create interaction also provide a way for the user toc Some dynamic content. There's another. There's several other ways that we're gonna be going through the output content, so I'm going to get rid of the alert for now. So we're not gonna have that alert window popping up anymore in order to output some text to the document. And the document is that entire Web page that is constructed by the browser So all of these elements are included within the document object. So we select the document object and then using a method called right, which allows us to write string text to the document opened by the Web browser. So within the right, so those rounded brackets we can write a message, save the message, and when we go out to the page that content is written wherever we're referencing that coat . So whatever point that code is running, that's where you gonna see the message being output. So if I was to move this script tag up, I would now see it above the H one tag because it's being written out above, and this is being written out by JavaScript. So if you do an inspect on the source cord and check out the content of the source code, this is JavaScript. That's adding in the message here that's being visually shown to the user. There's some more options, with the DOM selecting the elements and updating content contained within them. So if we don't want to use the document right, because this is hard to control, where the content is gonna be output. And oftentimes, when you are coding, you want to be fairly certain of the outcome of your code and what it's doing, so document right is one way. But it's not the ideal way to output content on the page. The best way is to select that document object once again and then selecting the element by I D allows us to identify an element on the page. Let's go back in the page and all updates this element to have each one have an idea of message. So within here, as we're selecting the element by I d. We need to specify the i d value of that element that we're connecting it to. And then we have some options of what we want to happen here so we can update the inner HTML and then within the quotes, we can type our message. And the benefit of doing it this way is we've got full control over which element gets updated. And as the JavaScript code runs our HTML as well updates instantly with the JavaScript code running. And now we've got Lawrence Circus in the H one tag, and this again is referenced by the I. D of message. We're doing a whole lot on the document object because it's a really powerful part of connecting the HTML Web page elements to your JavaScript code and allows us to manipulate and create interaction on the pages. There's also another way to pass messages, and this is used for debugging primarily, and that's using the console in order to specify and passed messages via JavaScript. There's also console, and this could be more on how to debug. And I'm gonna be using it quite often. As we go through the lessons. Let's look at log. So once again, this is just as the get element by I d and the alert and the right this is gonna be a function that's gonna be pre defined actions, that the browser is going to know what to do with this. So I identifying that we want to right into the console and within the log function, we need to specify the message that we want to type in. So I'm gonna pass in a name into the log and we'll do our refresh and now opening up your developer tools. So you're not gonna see this message anywhere on the page? And of course, this is coming from before. So if you want to, you can comment that one out and run the code and you're not going to see the name written anywhere on the page. That means that the user coming in is not gonna be aware of that consul message. Unless, of course, they're a developer in the open up. The developer tools. They click the consul tab. And there you're going to see that consul message as well as the line of code that's being referenced. That's out putting that consul message So primarily, these are the four ways that we interact with users on the page. So now it's up to you. Try it out and you can create on alert with your name. Also right to the document using document dot right function and within the rounded brackets put a message within the quotes. Also, be mindful of the single and double quotes. And have you seen? We've used single and double quotes interchangeably. So as long as you're starting the quote with the same quote that you're ending with and you don't have any reference of that seem quote in the middle than you're fine. If you do have a different quote, a double quote, you can't close it off with a single quote. And if you have a single quote and if you have single quotes within the string value than you're also gonna have a problem there, and we saw that earlier, there's gonna be more on that coming up in the next lesson. Also, try out selecting the elements given element on I d. Select that element, update the inner HTML and then lastly, make sure you get familiar with using the console because there's a lot of that coming, so send yourself a message within that console and check it out within the browser as you run the court. 7. 6 Output Action Challenge: Hey, welcome back. I've got something fun for you. Plant for this lesson. It's gonna be a challenge. So taking what we've learned in the last lesson where we're using document, right, We're also selecting an element by I d. We're gonna select a website and apply some JavaScript code to the web site. But before we do, I want to show you something really need within the developer tools. So we already saw that we can open up developer tools that comes with every version of chrome. We were predominately looking within the console. And we also saw that when we disable JavaScript or if we select any of the elements on the page and do and inspect, we can see the source code, but within the console, if we do throw an error or if any of the JavaScript code is run, we get the script file with the line of code that actually ran and made this output. And if I select that we open up the tab of sources and then within sources, we see the source code from the script Js and we can also flip over to the index dot html file and we also see all of the original source code, and you also see, on the left hand side the folder structure that is being used. And this is coming off of our local drive, where I've got the directory called Web Dev and I've got these files that contained within it you can also select and you can copy the content there. So just by doing a simple command, see or clicking it and then copying the content, this can add the JavaScript file into your clipboard, and you don't actually have to go open up your editor and copy the court. So now what do you do when you've copied the code? You can create a code snippet, and this is a really neat way to add content. So going into the drop down. So there's these two greater than signs you can select from the drop down snippets, and that's going to open up the new snippet windows. Let me make that a little bit bigger. Let's hide the d bugger. So we've got some more space. So hiding the d bugger. So now I've got an option for a new snippet, and this is where you can create and save code snippets for later use. Let's create a new snippet and give this snippet a name tester one and paste the code that we just copied. And you're going to use this code in the upcoming challenge. So it's uncommon tid and I'm gonna actually leave this one commented it for now and save Tester, so I just did a control command s in order to save the file automatically saves when Ewan click on a Mac control Click it right, click it on a windows control click it and see that. So you also have an option to run the code, so that will run that code snippet, output the contents. And now whatever script is within the JavaScript is what's gonna be run and output on the pages. It's gonna run through this court. Now, the challenge in this lesson is to take that cord and select a website and run the code and I'll walk you through how to do that coming up. So positive video here tried it. So now that we've created US code snippet, we can go to another Web page. So I'm just going over to the Montilla developer page. I'm going to open up the developer, Consul. And I do see that I do have an element with an I. D. And we're looking for elements with I ds. When you're selecting a website, just make sure that it does have an i d. Within the source code s so that you can select the element. And now, going into sources, I'm gonna update this and select the element with the I d name and save it. So now what do you think is gonna happen when I run the code on the page? Let's try it and click the snippet press run. It runs the JavaScript on the page, and it also updates the content to have the name. But it looks like something went wrong, and it does look like that. It did throw on error. And that's because of the i. D. And this is what's gonna happen when Element it's looking for his missing. Have the element with the i. D. Because it looks like selecting the document, right? Overrode all of the html. And so therefore it's missing that I d. So it didn't give us an opportunity to update the code in there, so let me just say that, and I'm gonna run it one more time. So every time we run it, it's running this block of code that's not actually refreshing. And notice that the Web you are l. And not to worry. I haven't updated Montella's Web page. You can always refresh, and the changes air gonna once again load all of the HTML and all the source files that are associated with this file. This is just a snippet that we can run and we can update code on the page. So run it one more time, runs the alert with test message, runs the document rate where it writes the message. And then there's also the get element by i d. So we can try it by alternating. These can also save it as another scored snippet if you want, and we'll try running the code one more time and there's the alert. So this time it did look like it was able to select the element with that I D. And I'm actually not sure exactly where it was so purely you had more luck when you selected the element and selecting an I D that you could find on the page, but it is present somewhere within the source. Quote. It has made that update, adding in the name let's also try another website. So maybe a little bit more clear on another site that has a clear I d that we can select and we can pick on the Google home page looking for an element with an I. D. Let's try to find one. That's gotta mean I d area that we can locate and also find where we're gonna update. So it's try one more where we're going to go over to Google, and I can see that this div has an I d of mean. Let's select that element. So it's open up the code snippet and select the element with an I d of mean. And now this one we should be able to find fairly easily and let's run the code. Now we've updated on the Google website having their message on the pain so actually changed the way that this is looking within the browser check for any elements that have an attribute with an I D update, the main I D, or whatever the I D Value is selecting it and type in your name within the inner HTML. And also try the document right. In order to test ate all the different ways that we can have put content and then also check within the consul to make sure that that console messages being run. Hopefully, you're successful with your code snippet, and you could be ready to move on to the next lesson. We're gonna take a deeper look at JavaScript syntax and writing JavaScript code. 8. 7 JavaScript Variables: at the very heart and the very core of JavaScript are variables, and that's what we're gonna be covering in this lesson and imagine a way to label a piece of content. And then you can also reference that content multiple times within your code. And that's essentially what variables do, so you can kind of think of it as a box where you can put a bunch of stuff, apply a label to that box, and then whenever you want to get the contents of the box, then you just use whatever the label name is. And that's what a variable is. And then you can also within your code as it runs to the code, you can update the constants of the box to change the contents of the box and have different output. Let's check out what we did in the last lesson where we were out putting content into the console. We're getting the element by I d. Updating the HTML we also writing within the page, and we had a new alert. So all these times, except for the alert, we had to continuously rewrite this string of content. So if we use a variable we don't have to rewrite it that we can just reference that variable that contains that content in it. So it's drop my name into a variable, and I'm gonna give the variable a name of my name. And then let's assign a value to that variable so we'll just grab and you conduce single quotes or double quotes. This is gonna be a string value. So now whenever we reference my name, we're going to return back that value that's associated with it. Let's drop it into the alert and notice that I'm referencing the variable. So I no longer need quotes because if I do quote around it, then I just put my name instead of the contents of the variable. That's being reference with the variable name of my name, and we can also put it into the document that were writing. We can also assign it to the H in HTML and then also, I put it into the consul's Let's try it and do a quick refresh. So now the pop up alert has the value of the variable. That output there has the value of the variable we've written onto the page. The value of the variable and within the console. We've also written the value of the variable. So now if we come in and if we change it. So if, for instance, I was to change my last name, I don't actually have to go through all of my code and update it as it's being referenced with the variable name. And if I do change my last name for whatever reason, now all of the references to my name can still stay intact. And that's what we use variables, because they allow us to make updates with the variable by associating contents of the variable. And then we don't have to update all of the code either because it's just referencing this value. So if the value changes, then the output is going to change as well. So it's try that. So now we refresh it and we've got the new value. We've got the new value. We've got the new value, we've got the new value, and we only had to change it in one spot within the code. So we're able to update and declare a variable and a sign of value to that variable. Within the statement where we have the variable name assigned to my name or the contents off that variable. Now there are some rules for variable names, therefore mean rules. I'll give you some examples of those rules, and this one is not actually a rule. But it's, ah, good way to do it. And it's the suggested way to create your variable names. So if you're variable name is actually two words, you can't put a space, so you're gonna be breaking the rules if you put a space. It's not gonna make any sense to the editor that it's weeding through the JavaScript code. So it's expecting one value without a space. And instead of writing my name, which, in fact, someone else looking through the variable name would not be able to always decipher that this might be Mina me instead of my name. There's a lot of different interpretations. That's what we use what's known as Camel case, and we provide upper case characters so that the different words stand out better, and it's easier to see and visually see. There's also a few other rules, so when you are declaring a variable, you can start it with the character You can also start it with an underscore, and you can also start it with a dollar sign. And these are the only three types of characters that you can use in order to start the value. And then the subsequent characters can be letters or numbers, so you can have numbers afterwards. But you can't have numbers before because that's gonna throw an error. And within brackets, we see that it goes white when it's unreadable. Syntax that we've added, so you can't just add any character. Once again, it goes white, so that's not not allowed. You're not able to make that. You're also not only able to have the spaces, there's no limit to the variable name length, but it is suggested that you do something and right at something that would be meaningful, that you could reference it later on. So variable names are case sensitive. So my name and lower case, my name lower case would be different variables. You also can't use any of the reserved words in JavaScript. And as we've seen with alerts and so on, there are some reserved words that you shouldn't be using as a variable name, and there's a listing of the different reserved words for JavaScript that are available at the Mozilla Developer network. And in addition, there's gonna be future reserved words as well. So you need to avoid any of these words as well as words that typically might be used as functions so they can add to confusion when you are writing your coat, so avoid these words. Also avoid words that are commonly used for functions within JavaScript. And also make sure that you do follow the rules when you are naming your JavaScript parables. And besides that, you can name it whatever you want, so that's up to you. Create a variable. You can use the same my name that I have and then also a sign of value to it and then use that value within the court, and you could be ready to move on to the next lesson. We're gonna look at variables a little bit deeper, so some of more options for variables 9. 8 Let and Const JavaScript: in the previous lesson. We looked at var and we got introduced how we can set up variables and assign values to those variables. In this lesson, we're gonna be looking at some new keywords that we can use in order to declare variables. And there are some rules with these. So first, let's look at cost, and we can replace var with Const and save it. And when we refresh that string value that we're associating and declaring into the variable, and then we're using the variable in the same four spots that we were in the last lesson and everything is working as expected. So the difference with Const. Is that CONST is constant. It's not able to be changed, so you can't re assign a value so you can't take my name anymore and update the value of my name so it can't change off of what it was originally declared. And whatever the original value was that was assigned. So if we do do that, what's gonna happen is it's gonna throw an error, and that's why the JavaScript code didn't continue to execute because there was an error within the code, and that was within line to where we're trying to assign a new value to a constant. And if we change this box to var, save it, it's gonna work No problem, because with far we are able to re assign values that there is a reason. And there is a benefit to using Const and Constance well, as let which we are also going to look at another key word that we can use in order to declare variables they work within the bloc of code that they're assigned. So this can prevent accidental renaming or reassigning values whenever we're using Const Teoh variable name. So if we typically when we are creating applications, will declare the variable values and if we don't want them to change within that particular block, that's where we would use const. Because that would lock in and prevent us from accidentally renaming it. But if we do want to have the ability to rename it within the bloc of code, we can use let so only refresh. We see that let works perfectly fine. We're not throwing any errors, and let is similar to the way that bar functioned, allowing us to re assign values to the variable. So if you have values that are not going to be changed and are fixed, they used Const. But if you are planning on changing those values off the variable, then use let, As for scope of our declarations are globally scoped. That's why they're always available throughout the entire code. And when we are referring to blocks of code, that means that anything within a curly bracket is going to be a block of code. And we're gonna look at that as we go through the different methods that are available in Java script. You're going to see that the curly brackets are used quite often, so I'm going to do a simple condition and check to see if it's true. And if it is, then we're gonna set ah value of my name and declare a value, and this will be within the bloc scope of the curly bracket. Call it tester and then within the consul message will output my name and then will also use the my name in the rest of the script. So when we refresh it, we still have the value of my name as Lawrence Smith because we update it with in the second line of code, and we also see the value of Tester was also assigned to a variable with my name. And that's because this one lives in a different scope, a different block of code than this parent block of court. So if we remove out the declaration and we set, my name is equal to Tester, the results are going to be different because now it's knows that we're not declaring the value variable. It's expecting that the variable already exists, and if it doesn't exist within this block where we've got the curly brackets, it's gonna look to the parent block. So it's gonna look for the my name that's sitting within the parent block, and therefore it's gonna be assigning Tester to that value. And this is the same thing that we can do with CONST. That it works within the block level. So if we do ah const. It's not gonna throw any errors because that scope, that block of code is separated. So using Let and const gives us more control over how the variables are handled and how the content gets assigned. And the big difference is that between constant, let const. The variable is immutable. That means that can't be changed. It can't be re declared and it does require the initiative Isar, which was that first initial setting of the value. So even if we're to remove it, since we're not set setting, ah value for const, we don't have an initial Isar and we're going to see an error that gets throwing. And this is going to be different if we use let because it doesn't require that initialize er because of course, we can change it in the cold and reassigned values to it. So now it's up to you. Try it out. Try out the let try out the const. Get comfortable with using them and then also try them out within, ah, block of code and see what the difference is. Try to make the changes, try to re assign values to them within a block code. You can use the same one that I'm using where I'm just checking to see if the value of true is true, which it is. Then it's going to run this block a coat and this was just a simple illustration how we can set up a block of code using the curly brackets, and there's gonna be a lot more on this as you go through the luck. Upcoming lessons. 10. 9 Data Types: Whenever you plan on using a variable within your code, you need to declare it, and only one that we can't update and changed is const. So there's no point to declare a const without assigning of value to it. And we saw that in the last lesson. If we do do that, then it throws an error. So you can also just declare a variable Seacon, declare a bunch of variables and then use them as needed so you can use and initialize them . And this initially will just be initialized as undefined. So when I refresh the page, we see undefined everywhere that variable is called, and that means that this is undefined value. But we have declared the value of the variable and so undefined is different. Then if we don't declare the variable at all, and if we don't declare the very about all, then we throw on error. And that says that the error and this variable is not being defined. And what that means is that we didn't declare the variable and then we tried to use it. Find is actually a data type. So just as the strings that we've been using this is a data type that JavaScript uses, and what data types do is they specify, the kind of data that can be stored. JavaScript, unlike some programming languages, has dynamic data types, which change depending on what value is assigned to that variable. There's also several other different data types. So when we were assigning value of my name to the my name variable, this was a string value. You can also assign string values with double quotes, and here I'm just reassigning the value. So I'm declaring the variable up here assigning a value, and then I'm assigning a new value to the variable. So whenever it looks for the variable, it will look at the last value that was assigned to that variable. So now what we're getting is that last value that was assigned to the variable. So undefined is a variable data type, so you can actually set your variable too undefined and notice that I don't have quotes around it, and that's because this is a data type. But generally you're not going to do that because undefined means that the variable has been declared. And if you are declaring a bunch of variables that you want to use later on your code, and you do come across undefined than generally. That means that you forgot to assign value to it. And if you have created the variable that you should be looking Teoh, a sign of value to it. So even though you can do this, you shouldn't be doing it. And you should be setting a value to know off the variable if you don't have a value for quite yet, but you want to sign a value to it. And it's not that you don't want to come up with the undefined value. So when you do a sign null to it, this is another data type in JavaScript that allows us to assign values and so weaken Do know we can do undefined. We can also do the string, and this is also strength data type, and there is a way with a JavaScript method to be able to detect what type of data type. The current variable is type off, so specifying the keyword type of and then wrapping it within the rounded brackets. This will output into the console. The type of data type is that we're using, but we are declaring my name and let's update this to a string data type. The data type is gonna be as undefined and let me uncommon this. And if we're setting it as a string, the data type is going to come back as a string value. There's also another commonly used data type, and that's gonna be numbers. So let's, uh, set one up has my numb and mine, um, as well as the other data types that we just saw the undefined and no, they don't have any quote surrounded. And that's how you can distinguish strings from all the other data types because strings do have quotes around the content that's contained as a string for the variable. So now it's set as, uh, number value of 1000 and also notice the way that the console outputs strings versus numbers. The numbers are showing in blue, and I'll updates the type off to my numb so that we can see that one is a data type of number, and that's being showing within the console. There. You can also declare multiple variables at once, so comma separating them, you could declare multiple variables and using the colon just to separate them. So these are all going to just be undefined, cause I'm not assigning any values to them. But that's declaring them. And that means that we can use them at a later point. And that's how you can use one statement to declare multiple variables simply by comma separating them in the declaration. And this is gonna be a bowling Sobule. Ian's can either be true or false, and other than a primitive data type, all others are going to be objects in JavaScript. We're gonna look at more of those later on, and when I refresh it returns it back as a Boolean and also note that there's no quotes around a bowling and billions are commonly used for conditions, just as we saw in one of the earlier lessons that if we set boo to true, we can output a consul message within this block of code, so checking the condition and it's gonna put the message only if Booth is true and when we refresh that we're gonna output that consul message. If we set boo to false, then we're not gonna have any output in the console because that value is going to be false , So just leave it as true, create some variables, update the values of those variables and also create a message and output. That message, depending on whether you're bullying, is true or false. I put the message in the console just as we saw with this example. 11. 10 Challenge JavaScript Prompt: give me a quick lesson on JavaScript. Prompt, and what prompt does is. It displays a diet log with an optional message, prompting users to input some type of text. And then we can use that text, assigning it to a variable and then use it within the JavaScript code. So let's get to it and sitting up our variable to my name and then using the window prompt function. And this is similar to what we saw with the alert. You also can use it by default without the prompt, so you don't need to include the window object as this is already assumed. And then you can ask a question. I'll put a question mark at the end of their So what do you think is gonna happen here? Whenever JavaScript asked this question, What do you think is gonna happen with what is input? Form the user? So it's try it. And there we've got our prompt so very similar to what we saw with the alert. So you add in a value there, and it's assigning that value to the variable that is going to get returned back. So it's returned back that value from the prompt assigning the variable. So now if you look at the variable value of my name, it's going to see Lawrence. That's how you can use prompt in order to select content and a sign of variable with the response from the problem. Let's go back into the coat. We're gonna assign a variable called message and I'll say, Welcome to the page and with a comma and that's going to be the end of it. And what you can do is you can contaminate two values to string values together so you can take the value of Let's create another variable. Call it output so we can take the value of message. We can add it to the value of my name and then using the console. Let's output the result of the variable output. So let's refresh enter our name hit, okay. And within that first statement, we've added message together with my name, and the result for output is gonna be that string value. So now whenever you type output, it's gonna output that content. So I do have a challenge for you in this lesson. What I want you to do is to put this together and output the value into the document right into the get element by I d. And also into the console. Output the contents of the entire message. So ask for the user's name. Add in, ah, welcome message, identifying the user with the name and then create an output value for it. And there is also a shortcut that you can do here. So try to pause the video and I'll walk you through the solution coming up. So the challenge was to create a prompt, get the user's name, create a welcome message and then output it into the document as well as the consul. So I'm gonna comment all of this out. And this is just the feature within brackets where you can dio toggle of the comment and I'll create another variable. Just call it a person and a sign of value from prompt. And I just ask your name and they will also have a message. And this message will say welcome. And because we are picking up the person's name when we're assigning the value to message, we can at that point in Katyn, eat it together with the name, and that's given that if We don't want to use this message value anywhere else, because now we're assigning a value of welcome. Whatever the person's name is, that was dynamically. Input is now gonna be assigned to this variable. So let's try it and console. Log out the contents of message and I usually use the console before I out put it into the document. So we get the person's name I'll just put in test. So it's welcome test. That's exactly the output that we want to see on the page. So using the document right method, we can output message on the Peach and then also the document. Get element by i d. Select the elements I d on. That should be the rounded bracket and set the inner HTML to the contents of message. Now. Order here is important because if you try to use person and assigned the value of message to welcome person, but we don't have a value four person, we haven't declared it. We're going to throw an error, so keep that in mind that the order is important, that we have to get a value for person before you try to use it on the next line of code. So let's refresh type in the name. And now we've got the output message of welcome Lawrence being displayed in all three spots on the page. 12. 11 Template Literals : Hey, this list is going to be about assigning string values. We're gonna be looking at double quotes, single quotes and then back ticks with template liberals, which is going to solve that problem. So first, we've just got our message that we're declaring row putting to the consul writing on the page, and there were also us assessing and adding it to the inter html of the element with the I d of message. So it's construct this and assigned a value to message, and we're going to just do single quotes. I'll show you a bunch of examples, single and double. And if you want to output, it's my page. And then you see that and right away we know with brackets, its flagging this. It's turning it white. So that means that there is going to be an error with this coat. And now, if we go out to the Web page and if we're to refresh it, then that code actually wouldn't run because of the error because of the quotes that were breaking out of the string value. And we're not actually breaking back in, so we need a way to disregard this single quote that's we want within the string value and there is a way to break out of the quote. So if you still want to use the single quotes, you can backslash and this is gonna break out of the string and allow us to use that character, so allowing us to output that value. Also, we can use double quotes. A swell sets another option. So if we want to output that content with it, doing the backslash break, we can use the double quotes, so it will still work fine so it can get confusing. I'll give you an example and equaling output to the contents of message and then adding to it. And we're gonna be adding content using the single quotes and then within the content, there's going to be double quotes around. One of the words. I'll see what happens now in the console. Let's get the value of output. It's still gonna work because by default we're doing with double quotes. But what if we have double quotes within here and we refresh now? Do you think it's gonna work? Let's take a look at output so still working because we're assigning those values and we're captaining it together and the background. JavaScript understands that this is a string, so it's not looking at the single quotes or the double quotes, but it's just treating it as a regular string object. So this is also possible. But it can get fairly confusing, especially if you're doing some copying and pasting and pasting the string values into the variables. So this isn't gonna throw any errors because in the back, JavaScript is still reading this as a string value. And that's reading this as a legitimate string value. And it notes to add these characters to the contents of this character. That's why there's no errors that are being thrown. So there is a more modern option when you are setting and assigning the code, and that's to use the back tick and setting it up as a template literal. Let me show you what I mean. So let's set the value of message, and this is gonna be the key on most keyboards to the left of one those air back ticks and then within the back ticks. I can use single quotes and I can use double quotes, and I don't have to worry about breaking out of the quote. Let's try that and we see that it works No problem, and it's also provides us a cleaner way. Teoh add values and variables. So let's say, for instance, we've got person and we want to add this into the message. So for whatever reason we want to put it. It's my page, and then we want to put the person's name. So with the quotes, you would have to break out of the quotes just as we did over here. Used the plus, and you can concoct innate additional information, which can be kind of confusing if you have a single and double quotes and there's already double quotes within the string value. And also, if you wanted to put this on a new line, it's not gonna work easily. Whereas with the back ticks you can add it in and set it to a new line. It's gonna incorporate all of this white space that we've added in. It's gonna allocate that and added into the content that's being output. So now when I refresh it, it just treats it as one string object and using the template, liberals will make it more readable within the source code of the page, not affecting the output that the Web users are going to see within your Web page wanted to add in the value of person. That's also easy to do where we don't have to break out of the back ticks. We use the dollar sign in the curly brackets, and then we state the variable name, so we refresh it. It's adding in the variable, but we never had to break out of our back ticks. And it's also much cleaner within the source code. And there are times when you are programming that you might forget quote or might forget to break out of the string value. So using the back ticks and this isn't a virtue as the template literal. So using this method is a lot easier than having to break in and out of quotes where you could, where you might be more prone to making some errors. Quotes are very common errors. Treat string value output for your consul for your page and output on the page, and then also add in variable using the dollar sign and the curly brackets into the output of the string values 13. 12 Prompt Challenge: all right. I have a challenge for you for this lesson, and you're gonna have to code all of this from scratch. And that's to create a prompt. Ask the user's name and then pra pride, a welcome message with the user's name on the screen and doing all of this using JavaScript and the template liberals so you can pause the video here. I'll walk you through the solution. Hope you had an opportunity to try it. It, so it's first create, are variable and using user name and then using the prompt. It will ask the question, and there's actually bonus marks if you break it apart within different variables and ask using the variable within the question. And this makes your code more dynamic because whenever you want, change the question. You don't have to access the content contained within prompt because this is a separate action, and this action is just asking the question. So if you want the question to be dynamic or your plan on changing the question at any time , then just set it up as separate variables. Now, of course, you don't have to do it that way, but this is just better coating structure as you're developing your code. And if you do need to make changes, its gonna be a whole lot easier. So next we need to pick up the user name and then we also need a message and for this message were used in the template liberals. And we want to have a welcome message to the user name. That's the dollar sign in the curly brackets. And now we're referencing the call back information from the prompt. So whatever information got returned from the prompt and then lastly, we're selecting the document Reason that get element by i. D. And the idea of that element, I believe, is still message. If you change the I d, or if you have an assigned it, I d give the element and attributes with that I d. And that's gonna be referring to the one where we've got to each one. I'm going to actually get rid of the button so we don't need it within the source code. So setting up in selecting that element. And now we can update the inner HTML to the contents of message. I think we're ready to try, So it's refresh and we asked the user name, So whatever input they have here is going to get it put on the page using everything that we've talked about in the previous lessons. 14. 13 Type Conversion and Coercion: this lesson, we're gonna have some fun with type conversion and also type conversion coercion. So they do sound similar. And the difference is that when with type coercion, that means that JavaScript is converting the type and assuming whatever type of data that you want output and with type conversion, that means that we're assigning that different data types. So there are two different data types that we're gonna be working with, and the 1st 1 is gonna be my string value, So just have hello. And the 2nd 1 is gonna be my numb for numbers will have a value of 100. So when we output, these and all console log out both of them using the type of that we saw earlier, and we'll have one for string, and we'll also have one for the number. And while I put both of those into the console so initially when we load the page, what do you think is going to be output into the console? And if he said string and number, you're correct. That's exactly what we're out putting. So now let's try to you convert them to different data types. So what happens when we have, ah, value of my string. And we equal that too. My string. So we call it to itself, and then we add my string to itself as well. And we'll, consul lago out the value of my strength. So what do you think my string is gonna look like? And what type of data do you think it's gonna be? Output here, the refresh. And if said it's just gonna double the current string And now the new string is going to be the combination of its original value when it was going in your correct. So the way that it looks like it, it it signs of value to my string. And then it takes the value of the current value of my string, which is hello. And it adds hello to it and then now assigns the new value. Whatever is on the right hand side to what's contained within strength. That's what's happening there. But what happens if we take the my string and we add my number? So what do you think is gonna happen? What type of output can we expect? I also gonna put a space there because I don't like to crunch them together. And what type of output can respect what type of data type is my string gonna be? So let's refresh it and find it. So refresh and we see that the string gets converted into Hello 100. It stays as a string value and the number is still a number of value. So what happened here? And why did JavaScript automatically assume that this is going to be a string value? And also what happens if we have 100 in the string values? Let's try that. So now we get still a string, so it's contaminating the two strings together. So what's happening is it's not reading it as a string, but it's reading it as a number, and then when it places it within the string, it turns it into a string. So it's being treated as a string whenever it's being brought together, and this is what we refer to as coercion. So this is JavaScript coercion, and I'll just spell that out. That means that JavaScript is converting the type of value, so there's also a way for us to force the different value types. So if we take the my string and a sign of value of number, and this is going to be forcing it into a number value and my string. What do you think that value of my string is gonna be? And more importantly, what type of data type is it gonna be? So it's converted it into a number, and now it's, ah, number type because we've used conversion to convert the string into a number and probably say Okay, well, wait a minute. What happens here when I try to convert the word world into a number, so 100 was easy, But what happens here? We get this result that's n a N, which means not at number. So it's one way to tell if the contents of a string are a number, because they're going to be able to be converted into a number using the number method. You can also take a number and converted into a string. So let's take the mind numb and using string method, and then whatever the value of my num is gonna be now we're gonna be converting it into a strength. So we get that as a string that one string is now converted into a number and everybody is happy. So what happens if we take the my string and we convert it to a number and then we add another number to it? So what do you think the my string value is going to be and as well, what do you think that we're gonna put as a type off? So it's refresh, and if you said that, it's actually gonna add them together, so it's gonna give us 1100. You're correct and bonus points if you got it as a data type of number. So what happened here? We converted it, and we used conversion to convert the my string into a number. And then we added in together two different numbers. And this is just simple math with JavaScript. So it treated it as if we did 100 plus 1000 and returned back the result of 1100. That's how we can convert from strings to numbers and we can force the conversion. And then there's also JavaScript that does the coercion, which it automatically assumes. And it tries to match the best type of data type for the input. And there's also other methods. A swell to convert to a string. So now that my string is gonna be a number, let's convert it back to a strength. So were reassigned the value and then taking the my string value, which is actually a number. I know it's a little confusing there. We can use the two string method, and this is going to return a string representing the specified number object. And we need the rounded rockets in order to execute that. So now it turned it back into a strength to try and shoot. I get comfortable with this and coming up, I've got an interesting challenge for you. 15. 14 Type Challenge: Hey, this is a question that I often get asked by students, and this challenge is going to be about that question. So the objective is to use your JavaScript skills and create prompt and then from the prompt, we're gonna ask the users number or their favorite number and then in the console, we're gonna check the type off for the message and out. Let's refresh. So we're asking for a number, and when we get the type of for the number, it's a string. So we want to convert it into a number, and that's going to be the challenge to output it as a number instead of a string and then add it together instead of having two strings adding together. So let's ah, do the final output. So the output will be whatever the value of message is, plus the value of message is, And then in the next line, let's output output into the consul and see what the result is. So trying it now and what I want you to do is fix this so that adds the response of the prompt together instead of can captain eating them. So it's try it so 5 55 I get a result of 5555 instead of the 110 that I'm expecting. It's a positive video right up the code. Fix this issue and whenever whatever value the user puts into the prompt have it output as a number and added, actually together. So walk you through the solution and we have done quite a bit of the work already. So all we need to do is convert the response from the message into a number. There's also one other thing that I did want to note, which is really interesting because with JavaScript it can force this to be a number, and so we can output as a number. So if we were to multiply these together and let's us do five, so if we do five times five, it's gonna return it back as 25 which is interesting because it converts it into a number automatically, and then if it can't convert it into a number, the response is going to be any end because it's trying to convert it into a number. So it's trying to do the conversion automatically, and if they can't do the conversion returns back, not in number. So that's what the multiplication. But the difference is that whenever we have the plus sign, that's not necessarily division are addition that that is also concatenation with strings between two different string values. So that's why Javascript is unable to decipher if you're trying to add two strings together , contaminated them or adding two numbers together. So that's why it's important to note that this value needs to be converted into a number before this will work. So the solution is just that one line of code we're using number, and we're forcing the response of message to be a number. So let's try it and we'll do five. And now we get the two numbers being added together, and the type has automatically been converted or has been converted to a number type. So one more time will try that. Enter in a number so these two numbers need to be added together and returns back 20 16. 15 JavaScript Operators: this. Listen, we're going to be looking at different types of operators using JavaScript, so there is, Ah, nice list of the various operators and expressions over at the Mod Zilla Developer network . Now let's take a closer look at that arithmetic operators. So our arithmetic operators take numerical values, either liberals or variables, and then it returns the new miracle value. That's associate ID after that operator has been applied, and we can create some of those where we can. Consul lock out the value so we can do a five plus five, and we know that the response for that will be 10. Let's set up a few variables, and we'll set up value one to be five. Let's take value to and get that to be seven, creating value three and equal that to nine. Now we can try the various operators, so there's addition, which we've seen. There's also subtraction, so fatigue foul to subtract, Val one. That's gonna be the subtraction. There's also multiplication, so you can take those two values and multiply them. I'll just console, log out the differences. There's also a division so we can take a vow three and I'm going to just put a number value there of three. So Val nine. So we get a result of three as the returned response. And then lastly, there was one more here and this is the remainder operator. And the way that remainder operator works is if we take Val three and we get the remainder where the module lists of three. And also let's ah, try a few other ones. So Val to, and then Val one, it's gonna return back. Whatever the remainder of these values is. So refresh. And the 1st 1 because we were doing nine divided by three, there's no remainder. The next one we did seven divided by three, sweeter remainder of one and the last one we did five, divided by three. So only went in one time, and that gave us the remainder of to. There's also the order of precedence. So reme