The JavaScript Console [w/ subs]



00:00:00 – so there's going to be a pretty quick
00:00:01 – video about the chrome JavaScript
00:00:03 – developer console so before we actually
00:00:06 – dive into writing JavaScript code in the
00:00:08 – syntax we're going to start by figuring
00:00:10 – out where we write the code and so in
00:00:13 – chrome one of the places we can do that
00:00:15 – is a JavaScript developer console so as
00:00:18 – we mentioned a few times chrome has
00:00:20 – great developer tools some of which
00:00:22 – we've already seen like the HTML and CSS
00:00:25 – inspector you can click the magnifying
00:00:29 – glass quick an element view the HTML we
00:00:33 – can edit things in HTML and we can edit
00:00:36 – and view the CSS so we've seen that
00:00:39 – before to get here we can right-click
00:00:42 – and inspect element we can also go to
00:00:45 – view developer developer tools and
00:00:51 – there's a shortcut here that you see
00:00:52 – command option I so that's to get to the
00:00:56 – elements tab but you'll notice there's
00:00:58 – another tab over here it says console so
00:01:01 – this is the JavaScript developer console
00:01:03 – so in a nutshell this is a place where
00:01:06 – we can go and write javascript in our
00:01:09 – browser so developers don't write for
00:01:12 – JavaScript applications in this console
00:01:14 – here just like developers don't write an
00:01:17 – entire style sheet in the browser using
00:01:20 – the CSS inspector what you use it for is
00:01:23 – interacting with CSS or understanding
00:01:26 – how something works or testing something
00:01:28 – out and then you go make the changes in
00:01:30 – your CSS file so down the line will do
00:01:33 – the same thing for JavaScript will use
00:01:35 – the console to play around the things to
00:01:37 – test things out but then we'll actually
00:01:39 – implement a full javascript file that
00:01:42 – persists and that we save to our to our
00:01:44 – machine rather than just in the browser
00:01:46 – so we are going to start out by writing
00:01:48 – JavaScript inside of the chrome console
00:01:50 – and that won't last very long
00:01:52 – it's just going to be a quick easy way
00:01:54 – for us to get up and going without
00:01:55 – having to focus on setting up a project
00:01:58 – so they have our files and linking them
00:01:59 – together correctly will just open up a
00:02:02 – browser and types in Java secure so to
00:02:04 – illustrate how the JavaScript console
00:02:06 – work i have some pre written code that
00:02:08 – i'm going to paste in and
00:02:09 – cute before I do that though i just want
00:02:12 – to point out that the focus here is not
00:02:14 – on the syntax so don't panic
00:02:17 – we're going to spend lots of time going
00:02:18 – over how this code work in future videos
00:02:21 – what is the focus here is the process so
00:02:23 – all i want you to understand i can put
00:02:25 – some code here it doesn't matter what
00:02:27 – the code actually does just put some
00:02:29 – code there and then i can hit enter and
00:02:32 – it will be executed
00:02:33 – so this code happens to do simple
00:02:35 – animation it adds 5 pixels to the width
00:02:38 – of the image every 100 milliseconds so
00:02:41 – haven't done anything yet as soon as i
00:02:43 – hit enter though it starts running
00:02:45 – likewise i can type other code so here's
00:02:49 – a very simple program just going to pop
00:02:52 – up a little message for me
00:02:54 – hello everyone and i hit enter and that
00:02:59 – pop-up is executed and that code runs so
00:03:03 – that's all i want to show about the
00:03:04 – JavaScript console you can pop it up on
00:03:07 – any page using command option j or by
00:03:12 – going to view developer JavaScript
00:03:15 – console or by opening up the elements
00:03:18 – inspector and clicking on console we're
00:03:21 – going to spend a lot of time here


Video Url:
http://youtu.be/To-rRBW1Xxg

(Visited 1 times, 1 visits today)

Comments

comments