1 00:00:00,720 --> 00:00:02,660 All right, let's write some JavaScript. 2 00:00:02,660 --> 00:00:05,480 Now I'll teach you the parts you need to know to get started with JavaScript 3 00:00:05,480 --> 00:00:09,720 development like, common data types, variables, arrays, objects, loops, 4 00:00:09,720 --> 00:00:11,150 functions, and more. 5 00:00:11,150 --> 00:00:13,920 The most common place you'll encounter JavaScript and 6 00:00:13,920 --> 00:00:17,770 the easiest place to try out JavaScript programming is in a web browser. 7 00:00:17,770 --> 00:00:21,710 In fact, JavaScript got its start in the browser back in 1995. 8 00:00:21,710 --> 00:00:25,870 Browsers have a built-in JavaScript interpreter that reads, understands, and 9 00:00:25,870 --> 00:00:27,970 runs the instruction in a JavaScript program. 10 00:00:29,120 --> 00:00:31,470 To get started now, all you need is your browser and 11 00:00:31,470 --> 00:00:34,010 the console built-in to the browser's developer tools. 12 00:00:34,010 --> 00:00:35,240 I'm using Google Chrome. 13 00:00:35,240 --> 00:00:39,620 So once you have a tab open in Chrome, you can find the developer tools in the top 14 00:00:39,620 --> 00:00:44,810 right menu by going to More Tools then clicking Developer Tools. 15 00:00:44,810 --> 00:00:49,260 You may have you used dev tools before to inspect the HTML and CSS of a web page. 16 00:00:49,260 --> 00:00:53,330 So here in the console tab you can write and run JavaScript. 17 00:00:53,330 --> 00:00:56,720 Now don't worry about every bit of JavaScript code you'll see in this video. 18 00:00:56,720 --> 00:01:00,000 You don't have to understand everything or most of what I'll cover. 19 00:01:00,000 --> 00:01:02,210 If you pick up just enough to get started learning and 20 00:01:02,210 --> 00:01:03,800 writing JavaScript, that's great. 21 00:01:03,800 --> 00:01:05,700 In order for JavaScript to do anything, 22 00:01:05,700 --> 00:01:10,390 it must be given information to work with, we call that information data. 23 00:01:10,390 --> 00:01:13,120 JavaScript supports a number of different data types. 24 00:01:13,120 --> 00:01:15,300 Now, I'm not gonna cover all of them here, but 25 00:01:15,300 --> 00:01:18,440 I will cover common data types like numbers and strings. 26 00:01:18,440 --> 00:01:23,160 For example, a number like 20 is a numeric data type. 27 00:01:23,160 --> 00:01:27,040 And numbers in JavaScript are used for making calculations like adding, 28 00:01:27,040 --> 00:01:32,090 subtracting, computing total costs, even keeping track of a game score and more. 29 00:01:32,090 --> 00:01:35,930 And numbers can be whole numbers or numbers with decimal points, so for 30 00:01:35,930 --> 00:01:42,780 instance if I type 20 + 50.5 into the console, and press the Enter key. 31 00:01:42,780 --> 00:01:46,892 The console runs this code and prints the total, 70.5. 32 00:01:46,892 --> 00:01:50,989 And JavaScript provides arithmetic operators like the plus sign that perform 33 00:01:50,989 --> 00:01:55,896 all common mathematical calculations like addition, subtraction, multiplication, and 34 00:01:55,896 --> 00:01:56,530 division. 35 00:01:56,530 --> 00:01:58,712 So, go ahead and try a few other calculations on your own. 36 00:01:58,712 --> 00:02:03,345 One of the easiest ways to clear the console is by control or 37 00:02:03,345 --> 00:02:07,200 right-clicking in the console and selecting Clear console or 38 00:02:07,200 --> 00:02:11,370 clicking the Clear console icon just above the console output. 39 00:02:11,370 --> 00:02:14,090 Another common data type in JavaScript is a string. 40 00:02:14,090 --> 00:02:18,685 Strings are used for words, sentences, and other text in your program. 41 00:02:18,685 --> 00:02:22,156 And you write a string as a series of letters, numbers, and 42 00:02:22,156 --> 00:02:25,712 other characters inside single or double quotation marks. 43 00:02:25,712 --> 00:02:29,556 So for example, in between quotes, 44 00:02:29,556 --> 00:02:34,144 I'll type the message hi, my name is Guil. 45 00:02:34,144 --> 00:02:38,630 Now I'll write a simple command that uses this string to 46 00:02:38,630 --> 00:02:41,670 display a dialogue box to users. 47 00:02:41,670 --> 00:02:45,200 I'll use the JavaScript alert function for this. 48 00:02:45,200 --> 00:02:48,970 Alert is a browser specific function or command used to pop up and 49 00:02:48,970 --> 00:02:50,750 alert dialogue in the browser. 50 00:02:50,750 --> 00:02:55,740 So between the parenthesis you'll provide alert the message to display. 51 00:02:55,740 --> 00:02:58,489 I'll pass it the string, hi, my name is Guil. 52 00:03:03,954 --> 00:03:06,350 I'll add a semi-colon to the end. 53 00:03:06,350 --> 00:03:09,544 And when you run this code by pressing the Enter key, 54 00:03:09,544 --> 00:03:14,347 it opens a dialog box in the browser and displays a message, hi my name is Guil. 55 00:03:14,347 --> 00:03:18,900 So what I've written here is a JavaScript statement. 56 00:03:18,900 --> 00:03:19,960 And throughout this video, 57 00:03:19,960 --> 00:03:24,080 you'll notice that all JavaScript statements end in a semi-colon. 58 00:03:24,080 --> 00:03:29,124 While alert only displays a message in a dialog box, browsers 59 00:03:29,124 --> 00:03:35,724 also provide a simple command that captures input from site visitors, prompt. 60 00:03:35,724 --> 00:03:40,140 Prompt lets you ask a question and get a response from the user. 61 00:03:40,140 --> 00:03:43,751 And like alert, you provide a message between the parenthesis. 62 00:03:43,751 --> 00:03:47,640 So I'll pass prompt the string, what is your name? 63 00:03:50,880 --> 00:03:54,800 When I run this code, the browser prompts me to input some text 64 00:03:54,800 --> 00:03:56,800 before I can interact with the rest of the page. 65 00:03:56,800 --> 00:04:00,532 So in the dialog box, I see the message, what is your name? 66 00:04:00,532 --> 00:04:05,950 I'll type Guil and click OK or press Enter. 67 00:04:05,950 --> 00:04:09,270 And notice how my response shows up in the console. 68 00:04:09,270 --> 00:04:13,400 The browser captures the response and returns the value, the string Guil.