1 00:00:00,510 --> 00:00:04,680 Hello and welcome to our conclave to work. 2 00:00:04,680 --> 00:00:12,070 We have to have some javascript in order to create some interaction. 3 00:00:12,300 --> 00:00:19,830 So this is what our cockily told looks like at the moment at the moment if you click on any of the buttons 4 00:00:20,000 --> 00:00:20,940 nothing happens. 5 00:00:20,950 --> 00:00:22,840 It doesn't get displayed. 6 00:00:22,950 --> 00:00:26,100 So what we are going to do here one thing to do. 7 00:00:26,150 --> 00:00:39,570 I am going to they can click event into the buttons so that when the button clicks javascript will take 8 00:00:39,570 --> 00:00:44,240 action and create some interaction. 9 00:00:44,290 --> 00:00:49,990 An event is physically something that happens to his team element. 10 00:00:50,100 --> 00:00:59,840 So when you use javascript inside hastier more web pages the javascript can react to the events. 11 00:00:59,850 --> 00:01:05,800 An example of an event is when a button is clicked. 12 00:01:06,060 --> 00:01:12,780 So when you click on a button that is known as an event you want javascript to do something. 13 00:01:12,780 --> 00:01:24,790 When that event happens in order for that to happen we need to touch on Click event into the button. 14 00:01:25,020 --> 00:01:32,220 So what that would do when you click on the button what ever value you placed inside that click event 15 00:01:32,880 --> 00:01:36,990 it will respond to the button click. 16 00:01:36,990 --> 00:01:44,700 So let's test that with one of the buttons and see if that works we'll just replicate the same process 17 00:01:44,730 --> 00:01:46,730 to the rest of the button someone to start with. 18 00:01:46,730 --> 00:01:47,970 Is there a button here. 19 00:01:48,300 --> 00:02:00,330 So inside the button here I am going to show us expand this opening tank and touch on Click event so 20 00:02:00,330 --> 00:02:05,670 you do that by typing in on a click. 21 00:02:08,260 --> 00:02:11,540 See is upper case. 22 00:02:11,580 --> 00:02:12,520 All right. 23 00:02:12,520 --> 00:02:17,740 So that's the On Click event happening give it a value. 24 00:02:18,010 --> 00:02:20,650 Can send two equals two. 25 00:02:21,350 --> 00:02:24,910 So it's going to function in a way like an attribute. 26 00:02:25,000 --> 00:02:31,230 So in between the quotes I'm going to have cash. 27 00:02:31,270 --> 00:02:38,290 What will happen when someone clicks on the button so when someone clicks on the button I want the form 28 00:02:38,290 --> 00:02:42,610 to be called the name of my form. 29 00:02:42,610 --> 00:02:44,620 It's called Carl. 30 00:02:44,860 --> 00:02:53,380 So when the button is click it's going to call this form which this card is then going to reference 31 00:02:53,650 --> 00:02:56,300 the display which is this one here. 32 00:02:56,560 --> 00:03:01,330 So I'm going to do dot display. 33 00:03:03,220 --> 00:03:09,740 And also I wanted to display the value on the calculator button. 34 00:03:09,850 --> 00:03:17,120 So I type in value and when I had an assignment operator. 35 00:03:17,410 --> 00:03:19,190 This is known as an assignment. 36 00:03:19,210 --> 00:03:21,350 Operate on plus equations. 37 00:03:21,370 --> 00:03:25,950 What that does is an addition assignment operator. 38 00:03:26,190 --> 00:03:30,590 It all had value to a variable. 39 00:03:30,670 --> 00:03:37,840 So let me say that and let's test how that works then I'll just do the same for the other button so 40 00:03:38,100 --> 00:03:40,340 I just refresh. 41 00:03:40,400 --> 00:03:42,280 I click on this. 42 00:03:43,580 --> 00:03:44,160 Okay. 43 00:03:44,190 --> 00:03:48,740 Hasn't shown up which means something has not gone right. 44 00:03:48,860 --> 00:03:56,750 K. I know what I've done wrong here now because I did not specify the value here for it to display this 45 00:03:57,200 --> 00:03:57,980 assignment. 46 00:03:58,000 --> 00:03:59,540 OPERATOR What is a plus minus. 47 00:03:59,540 --> 00:04:05,050 Basically it as value to variable and I have not specify the value. 48 00:04:05,090 --> 00:04:09,520 That's why it's not working so why need to do inside this equals 2 here. 49 00:04:09,830 --> 00:04:19,010 I need to specify the value which is going to be zero so I enclosed out in single quotes. 50 00:04:19,010 --> 00:04:21,910 Now if I see that and try again. 51 00:04:22,340 --> 00:04:24,900 Hopefully that should work. 52 00:04:26,320 --> 00:04:26,850 There you go. 53 00:04:26,860 --> 00:04:28,600 You can see the LOSE there are there. 54 00:04:28,600 --> 00:04:32,780 It's not that big but you can see it now which means it's working. 55 00:04:32,860 --> 00:04:33,810 So what I'm going to do. 56 00:04:33,810 --> 00:04:40,630 I'm just going to replicate the same thing to the other buttons by touching this one click event to 57 00:04:40,630 --> 00:04:41,930 each of the button here. 58 00:04:42,160 --> 00:04:49,540 So when someone clicks find a button it all trigger off it to display will reference the form and to 59 00:04:49,540 --> 00:04:50,820 display it. 60 00:04:50,830 --> 00:04:53,660 Which is a reference to this name. 61 00:04:53,740 --> 00:05:06,450 Which is the name of the form and also the value on the button and then it all displayed have had tacked 62 00:05:07,130 --> 00:05:09,470 on Click event. 63 00:05:09,670 --> 00:05:22,630 The bottom line 27 multiplication is done using the asterisks symbol so you can see the asterisk symbol 64 00:05:22,630 --> 00:05:23,930 here. 65 00:05:24,130 --> 00:05:33,880 Multiplication is done on line 29 where we've got this C C basically is the clear button so we want 66 00:05:33,880 --> 00:05:36,490 to clear the display to calculate. 67 00:05:36,580 --> 00:05:41,740 You press the send button and I've set the value to you close to blank. 68 00:05:41,740 --> 00:05:44,180 You can say this to single quotes here. 69 00:05:44,330 --> 00:05:51,850 Meant blank so when you press the button the clear button which is the C it will clear the display to 70 00:05:51,880 --> 00:05:58,360 this value which is Blank on line 30. 71 00:05:58,450 --> 00:06:08,950 I've got the course too but I have not use addition. 72 00:06:09,010 --> 00:06:20,590 Assignment operator in that is I've used it in the others but I have not used it in line for others 73 00:06:20,740 --> 00:06:24,880 so it's online online 2019 that is on line 29. 74 00:06:24,880 --> 00:06:27,720 There is no Edition assignment or protocols. 75 00:06:27,820 --> 00:06:34,650 I don't want to store in advance I just want to clear this screen so when people click on this button 76 00:06:34,650 --> 00:06:39,290 it clears the screen has not attached addition. 77 00:06:39,310 --> 00:06:40,900 Assignment operator. 78 00:06:41,080 --> 00:06:44,400 However on line 30 I am left out. 79 00:06:44,390 --> 00:06:53,840 But instead I have used the java script function. 80 00:06:53,980 --> 00:06:56,600 Notice here be about function. 81 00:06:56,770 --> 00:07:06,530 The function basically is used to evaluate or execute argument inside a function. 82 00:07:06,750 --> 00:07:12,210 You can see here for the round function here inside the parentheses. 83 00:07:12,340 --> 00:07:16,100 I have added the comments and these are the arguments. 84 00:07:16,190 --> 00:07:25,270 The calm which is the form here display which is this import display and then the value. 85 00:07:25,540 --> 00:07:30,450 What value represents whatever value you press. 86 00:07:30,460 --> 00:07:32,640 So all bottoms up different values. 87 00:07:32,650 --> 00:07:41,140 For example if I punch two plus two That's what those values are free to say whatever value I compute 88 00:07:41,200 --> 00:07:44,080 in here to evaluate that. 89 00:07:44,080 --> 00:07:51,730 Inside this argument display that's what this function will do to evaluate. 90 00:07:52,000 --> 00:07:57,430 Execute the argument inside this vital function. 91 00:07:57,780 --> 00:07:59,370 To 1. 92 00:07:59,530 --> 00:08:06,760 I just want to point out the deficient in Javascript is by the slash symbol. 93 00:08:07,010 --> 00:08:14,590 Okay so even though I have represented the symbol differently the actual sign you need to do division 94 00:08:14,680 --> 00:08:17,270 is the for this flash here. 95 00:08:17,410 --> 00:08:21,040 So without doubt it or not to the division. 96 00:08:21,040 --> 00:08:29,350 So in terms of functionality the javascript part of the skocpol Utah is physically done. 97 00:08:29,560 --> 00:08:34,420 So if I say that then we can test that out and see if everything works. 98 00:08:34,610 --> 00:08:38,810 All right so let's do a quick calculation here. 99 00:08:39,130 --> 00:08:41,090 Let me open that up again. 100 00:08:41,380 --> 00:08:43,970 So let me do for example list 2. 101 00:08:45,480 --> 00:08:46,700 To. 102 00:08:47,970 --> 00:08:48,940 Plus. 103 00:08:50,270 --> 00:08:56,120 To you can see as I click on the button you can see it highlights the code and fire the course to sign 104 00:08:56,140 --> 00:08:58,640 you can see the Who Wants to go see it. 105 00:08:58,650 --> 00:09:00,400 It leads to four. 106 00:09:00,550 --> 00:09:04,540 And the evaluation is done using this vital function. 107 00:09:04,540 --> 00:09:08,670 That's what he computes the value that had. 108 00:09:08,870 --> 00:09:10,580 And it gives me this. 109 00:09:10,610 --> 00:09:18,140 This is the output in this this play area in the next video. 110 00:09:18,180 --> 00:09:27,380 I'm going to make a calculator look pretty unpresentable than it is at the moment. 111 00:09:27,490 --> 00:09:30,290 So that's what we're going to do in the next video. 112 00:09:30,340 --> 00:09:31,600 Thank you for watching. 113 00:09:31,600 --> 00:09:32,330 Bye for now.