[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.77,0:00:02.61,Default,,0000,0000,0000,,- [Voiceover] Now I'm going\Nto walk you through the basics
Dialogue: 0,0:00:02.61,0:00:05.72,Default,,0000,0000,0000,,of using jQuery in your web page.
Dialogue: 0,0:00:05.72,0:00:09.00,Default,,0000,0000,0000,,The first step is to actually\Ninclude the jQuery library
Dialogue: 0,0:00:09.00,0:00:11.54,Default,,0000,0000,0000,,using a '<script>' tag
Dialogue: 0,0:00:12.23,0:00:16.12,Default,,0000,0000,0000,,Now before, we put JavaScript\Ninside of our '' tag,
Dialogue: 0,0:00:16.12,0:00:20.28,Default,,0000,0000,0000,,but this time, I'm going\Nto add a 'src' attribute.
Dialogue: 0,0:00:20.28,0:00:24.39,Default,,0000,0000,0000,,And I need to set that to a URL.
Dialogue: 0,0:00:24.39,0:00:26.57,Default,,0000,0000,0000,,What should that URL be?
Dialogue: 0,0:00:26.57,0:00:28.63,Default,,0000,0000,0000,,If I was working on my own computer
Dialogue: 0,0:00:28.63,0:00:30.09,Default,,0000,0000,0000,,and have downloaded jQuery
Dialogue: 0,0:00:30.09,0:00:32.52,Default,,0000,0000,0000,,into the same folder as my web page,
Dialogue: 0,0:00:32.52,0:00:36.47,Default,,0000,0000,0000,,I could just write 'jquery.js' here.
Dialogue: 0,0:00:36.47,0:00:39.41,Default,,0000,0000,0000,,But that won't work here on Khan Academy.
Dialogue: 0,0:00:39.41,0:00:43.10,Default,,0000,0000,0000,,Here, I need an absolute URL of jQuery
Dialogue: 0,0:00:43.10,0:00:45.88,Default,,0000,0000,0000,,on an online server somewhere.
Dialogue: 0,0:00:45.88,0:00:50.08,Default,,0000,0000,0000,,And there is a list of\Nthose URLs in jquery.com,
Dialogue: 0,0:00:50.62,0:00:52.74,Default,,0000,0000,0000,,and I have one of them\Nhere I'll just paste in.
Dialogue: 0,0:00:52.74,0:00:54.43,Default,,0000,0000,0000,,There we go.
Dialogue: 0,0:00:54.43,0:00:56.12,Default,,0000,0000,0000,,All right. Now I wanna\Npoint out a few things
Dialogue: 0,0:00:56.12,0:00:58.03,Default,,0000,0000,0000,,about this URL.
Dialogue: 0,0:00:58.03,0:01:01.82,Default,,0000,0000,0000,,The first thing is that\Nit starts with 'https'.
Dialogue: 0,0:01:01.82,0:01:05.23,Default,,0000,0000,0000,,That means that it is a secure URL.
Dialogue: 0,0:01:05.23,0:01:09.23,Default,,0000,0000,0000,,We only allow you to\Nbring in secure resources
Dialogue: 0,0:01:09.23,0:01:11.21,Default,,0000,0000,0000,,in Khan Academy web pages
Dialogue: 0,0:01:11.21,0:01:15.34,Default,,0000,0000,0000,,and that's generally a good\Npractice in web development.
Dialogue: 0,0:01:15.66,0:01:18.86,Default,,0000,0000,0000,,Okay. The second thing\Nis that this is located
Dialogue: 0,0:01:18.86,0:01:22.75,Default,,0000,0000,0000,,on a Google server: googleapis.com.
Dialogue: 0,0:01:22.75,0:01:25.38,Default,,0000,0000,0000,,This server is called a CDN,
Dialogue: 0,0:01:25.38,0:01:27.92,Default,,0000,0000,0000,,a content delivery network,
Dialogue: 0,0:01:27.92,0:01:29.41,Default,,0000,0000,0000,,which means that it's optimized
Dialogue: 0,0:01:29.41,0:01:32.62,Default,,0000,0000,0000,,for serving static files\Nlike JavaScript libraries
Dialogue: 0,0:01:32.62,0:01:35.39,Default,,0000,0000,0000,,and serving them very quickly.
Dialogue: 0,0:01:35.39,0:01:38.16,Default,,0000,0000,0000,,Now this Google server is one that I trust
Dialogue: 0,0:01:38.16,0:01:41.30,Default,,0000,0000,0000,,and generally, you should\Nalways trust the servers
Dialogue: 0,0:01:41.30,0:01:43.00,Default,,0000,0000,0000,,you bring scripts in from
Dialogue: 0,0:01:43.00,0:01:47.24,Default,,0000,0000,0000,,since they could potentially\Ndo nasty things to your page.
Dialogue: 0,0:01:47.40,0:01:50.01,Default,,0000,0000,0000,,Okay. The third thing is\Nthat there's a version number
Dialogue: 0,0:01:50.01,0:01:53.81,Default,,0000,0000,0000,,in this URL: 2.1.4.
Dialogue: 0,0:01:53.81,0:01:56.40,Default,,0000,0000,0000,,The jQuery library is\Nin active development
Dialogue: 0,0:01:56.40,0:01:59.02,Default,,0000,0000,0000,,and they often release new versions.
Dialogue: 0,0:01:59.02,0:02:00.99,Default,,0000,0000,0000,,The numbers farther to the left
Dialogue: 0,0:02:00.99,0:02:03.28,Default,,0000,0000,0000,,represent major version changes
Dialogue: 0,0:02:03.28,0:02:05.76,Default,,0000,0000,0000,,versus the numbers farther to the right,
Dialogue: 0,0:02:05.76,0:02:08.13,Default,,0000,0000,0000,,which represent minor versions.
Dialogue: 0,0:02:08.13,0:02:10.35,Default,,0000,0000,0000,,I'm using jQuery 2 here,
Dialogue: 0,0:02:10.35,0:02:12.30,Default,,0000,0000,0000,,which works in modern browsers
Dialogue: 0,0:02:12.30,0:02:14.48,Default,,0000,0000,0000,,but doesn't work in IE8.
Dialogue: 0,0:02:14.48,0:02:15.64,Default,,0000,0000,0000,,On your own site,
Dialogue: 0,0:02:15.64,0:02:19.63,Default,,0000,0000,0000,,you can decide which version\Nto use based on what you need.
Dialogue: 0,0:02:19.63,0:02:22.81,Default,,0000,0000,0000,,All right. So we have jQuery included.
Dialogue: 0,0:02:22.81,0:02:24.97,Default,,0000,0000,0000,,Now, let's actually use it
Dialogue: 0,0:02:24.97,0:02:28.27,Default,,0000,0000,0000,,inside another '<script>' tag.
Dialogue: 0,0:02:30.23,0:02:33.31,Default,,0000,0000,0000,,Every JavaScript library exposes functions
Dialogue: 0,0:02:33.31,0:02:35.36,Default,,0000,0000,0000,,and they give their functions names.
Dialogue: 0,0:02:35.36,0:02:37.01,Default,,0000,0000,0000,,We have to look in the documentation
Dialogue: 0,0:02:37.01,0:02:39.26,Default,,0000,0000,0000,,to find out what those function names are
Dialogue: 0,0:02:39.26,0:02:41.76,Default,,0000,0000,0000,,and what they actually do.
Dialogue: 0,0:02:41.76,0:02:45.44,Default,,0000,0000,0000,,Well the jQuery library\Nexposes one main function
Dialogue: 0,0:02:45.44,0:02:47.52,Default,,0000,0000,0000,,and it has a very short name.
Dialogue: 0,0:02:47.52,0:02:50.64,Default,,0000,0000,0000,,It's just the dollar sign.
Dialogue: 0,0:02:50.64,0:02:52.26,Default,,0000,0000,0000,,That means that the first thing we write
Dialogue: 0,0:02:52.26,0:02:53.56,Default,,0000,0000,0000,,is dollar
Dialogue: 0,0:02:53.56,0:02:56.53,Default,,0000,0000,0000,,then two parenthesis,\Nbecause it's a function,
Dialogue: 0,0:02:56.53,0:02:59.41,Default,,0000,0000,0000,,and of course, semicolon.
Dialogue: 0,0:02:59.41,0:03:01.93,Default,,0000,0000,0000,,Now it's nice that this\Nfunction name is so short
Dialogue: 0,0:03:01.93,0:03:05.76,Default,,0000,0000,0000,,because we'd be calling\Nthat function an awful lot.
Dialogue: 0,0:03:06.23,0:03:08.93,Default,,0000,0000,0000,,There are lots of things we\Ncan pass to that function,
Dialogue: 0,0:03:08.93,0:03:10.30,Default,,0000,0000,0000,,but for this intro example,
Dialogue: 0,0:03:10.30,0:03:15.25,Default,,0000,0000,0000,,I'm just going to pass a string 'h1'.
Dialogue: 0,0:03:16.32,0:03:17.70,Default,,0000,0000,0000,,Now, when I've done this,
Dialogue: 0,0:03:17.70,0:03:19.72,Default,,0000,0000,0000,,this tells jQuery to find
Dialogue: 0,0:03:19.72,0:03:23.10,Default,,0000,0000,0000,,all of the 'h1' elements on the page
Dialogue: 0,0:03:23.10,0:03:28.05,Default,,0000,0000,0000,,and return them as a\NjQuery collection object.
Dialogue: 0,0:03:28.15,0:03:29.31,Default,,0000,0000,0000,,Now that I've done that,
Dialogue: 0,0:03:29.31,0:03:33.23,Default,,0000,0000,0000,,I can call other methods\Non the jQuery object
Dialogue: 0,0:03:33.23,0:03:37.20,Default,,0000,0000,0000,,in order to manipulate all the\N'h1' elements that it found.
Dialogue: 0,0:03:37.20,0:03:39.94,Default,,0000,0000,0000,,Like if I want to change the\Ninner text of all of them,
Dialogue: 0,0:03:39.94,0:03:43.36,Default,,0000,0000,0000,,I can call the 'text' function
Dialogue: 0,0:03:43.36,0:03:46.04,Default,,0000,0000,0000,,then pass it a string.
Dialogue: 0,0:03:47.24,0:03:48.49,Default,,0000,0000,0000,,It's happening.
Dialogue: 0,0:03:48.49,0:03:49.79,Default,,0000,0000,0000,,Yes!
Dialogue: 0,0:03:49.79,0:03:50.80,Default,,0000,0000,0000,,And we're done!
Dialogue: 0,0:03:50.80,0:03:53.03,Default,,0000,0000,0000,,That is our first bit of jQuery.
Dialogue: 0,0:03:53.03,0:03:56.91,Default,,0000,0000,0000,,So we included the jQuery\Nlibrary with the '' tag,
Dialogue: 0,0:03:56.91,0:03:59.82,Default,,0000,0000,0000,,told jQuery to find all\Nthe 'h1s' on the page,
Dialogue: 0,0:03:59.82,0:04:03.64,Default,,0000,0000,0000,,and then asked jQuery to\Nchange the text of all of them.
Dialogue: 0,0:04:03.64,0:04:06.33,Default,,0000,0000,0000,,If you keep going, we'll\Ngo through much more
Dialogue: 0,0:04:06.33,0:04:07.65,Default,,0000,0000,0000,,in more detail,
Dialogue: 0,0:04:07.65,0:04:11.12,Default,,0000,0000,0000,,more ways to select and\Nmanipulate elements,
Dialogue: 0,0:04:11.12,0:04:14.35,Default,,0000,0000,0000,,using jQuery to respond to\Nuser events on the page,
Dialogue: 0,0:04:14.35,0:04:18.56,Default,,0000,0000,0000,,plus fun stuff with animation and effects.