 Alright folks, let's get started, we've got a lot of ground to cover, laying down our base for web security, we've got to learn how to write web apps, so let's do a web app and a web server, or a website I should say, the other one was a good question, you all Right, so yeah, one of the key difference is a website merely, or yeah, a website merely gives you a document, which is essentially static or as a web application is going to give different people different content, it's going to dynamically change based on how you interact with it. So, we talked about, we have our HTTP request that the web server gets, then there's some backend web application that that request gets sent to, the web application which you can think of as server side code, this is a code that does not run on your browser that you have no control over, that is doing some sort of processing, then sending your response back to the web server, and finally sending HTTP response back to the client, usually in the form of HTML, there's actually an interesting story about how old school like in the mid 90s they made chat applications without using Ajax or any kind of asynchronous functionality, because what they would do is they would have, the HTTP response would be a GIF, and a GIF is a series of image frames, and what they would do is they would keep that open, so you would display the GIF in the browser, and then when somebody typed something in, the server would create a new frame, send it to everybody, and that's what would show up as the new message. So, they got this really cool asynchronous like a sure to your program model before all this crazy JavaScript stuff that we have nowadays. So, one of the original languages for writing web pages, and it's important, or sorry, web applications, and as we talked about, you can actually write a web application in any language, why is that? It's just something I say that it's true, therefore it's true. What was that? It runs on the server. Yeah, it runs on the server, right, whenever the web developer wants to run the app as long as it can parse HTML and spit back, parse HTTP and spit back HTML, it can fundamentally be any language. So, ASP was one of the original in 1996, and the basic idea is it kind of takes this templating approach to server-side web application programming. The idea is you have text in HTML, and then you have actual tags of the server-side code and the interpreter interprets to actually execute and do dynamic things. So, we'll see an example in a second. Basically, so everything, so ASP, everything in between the less than and the percent symbol, that is not an HTML tag, that's a tag to the ASP engine that says, interpret whatever's in here as ASP code. So, this code checks, gets a name from request.query string. So, what is it like if this is query? Where's that value coming from? What was that? From the request object. Wow, from the request object, but where does it come from? From the server. From where? From the request. What was that? From the request. The request. From the client? Yeah, so the request from the client is what kind of a request? It's kind of a request. Well, we don't know, but we know it's an HTTP request, right? And so, it's going to have query parameters. So, in the, so the request, so the other nice thing that these web application frameworks do is they parse the HTTP request so you don't have to parse it yourself every single time. So, you can just say, give me whatever was sent as, for the name. So, this would be in the query part of the URL. So, either a get or a post request, although the semantics here make you think it's probably part of the query. So, part of a get with the query path of the UI. And get in the, so return whatever the name is and say, if the name is equal to, was it not equal? I think this is not equal to, so if it's not empty output. So, now the important thing is everything that's not in between these special ASP tags is output as is. So, this means that the interpreter is going to just output welcome in bold and write response dot write the string name. So, just write out whatever that name is in the URI. So, what's this else correspond to? This if, right? Even though it's in a different code block or different ASP tags, right? It corresponds to that original if. And then otherwise they'd say, hey, you didn't provide a name. Like, what are you doing? And then end if. So, the idea here is it's kind of like a template, right? You have your template of this is what the HTML output should be. But fundamentally, as we'll see more in the HTML, in the PHP examples that further this idea, it's really just concapping in strings is what's happening here, right? So, basically everything in between, you can kind of think of it as if there's an additional command in between every ASP tag that says response dot write whatever that text is. And that would be the equivalent program. But it's a little bit nicer to kind of read it this way. So, PHP, PHP has one of these really fun recursive acronym names where PHP stands for the PHP hypertext processor. And the idea is PHP kind of took this idea and really ran with it. So, it was released in 1995, first as a series of CGI scripts as C binaries. Yeah, so kind of what's insane about PHP is the level of use it has on the broad internet, on the web. So, one of the things in the PHP's history is that PHP 3.0 was installed on approximately 10% of the web servers on the internet. That's pretty cool. If you could write software that ends up on even 1% of machines on the internet, like you've made a pretty big impact. And so, PHP has a long series, there's even PHP 7 now and it's grown and incorporated all of the lovely features of object orientation and all that kind of fun stuff. So, it's actually the latest version of PHP 7. And the insane thing about the popularity, so this shows a graph of the popularity of PHP from 2002 to 2012. And so, some interesting things. You can see what's this, over 100 million websites as of January, it was probably about 2011. Like, host names use that, active sites, IP addresses. So, you can see that PHP is still, and this may be, I know, difficult to understand that not everybody's writing an application in the crazy latest Node.js. And whatever insert, go, or rust, or whatever the new hot language is, like there's still a lot of PHP applications out there. And it is still by far one of the most popular servers I've ever written languages. Which is good for us because as we'll see, it has a lot of features that tend to allow developers to write buggy code. So basically, PHP is going to work the same way as ASP. So there's going to get .php file, there's usually a one-to-one mapping between the URI request and the PHP location on the hard drive. And every page is going to be parsed and interpreted for every single request. Which is actually great when you're developing, because you just go in, edit the PHP file on disk, make the request, and the new version gets updated. So you don't have to deal with pushing a new version of the whatever server or Java thing you're using to get reloaded. So it is a completely new language with a C-like syntax, which will mess you up because it's definitely not C code. And it has a lot of, it's kind of a mix between something dynamic like Python, but even though it has its own weirdness. And one of the interesting things is the language custom designed to build web applications. It's not really meant to run on a router to move packets around. You can do that. Actually, what was this? Yeah, hey guys, I mean I've seen some cases of PHP creatively used to do certain problems. Anybody write any of their homework one assignments in PHP? That would be interesting. And the language adds a C group organically over time where they just kind of added features and functionality and added object orientation. So for an example, so this is a basic, this is actually the basic HTML5 web page. So everything, just like I said before, everything outside of the special PHP tags is just output directly. So there's actually no interpretation or anything that's happening here. And in PHP, PHP tags are noted with the less than symbol, the question mark, PHP, and then PHP code inside of that until it's a terminating tag, which is the, what's this, question mark and greater than symbol. So this PHP code at runtime, right? So once this request is made Apache talks to the PHP interpreter and says, hey, this is the request that's made. The interpreter will execute all this output back to the browser, all that HTML, and then evaluate this echo, which is going to output the paragraph tag, hello world and paragraph tag. Okay, some of the PHP features, it's dynamically typed. What does that mean? Yeah, so what that means is that the web developer, you don't specify that this variable is an integer and this variable is a string, which means that object variables can have multiple types. It's determined basically at runtime. It has string variable substitution, which I wish Connor was here because I don't even know what's named about the usefulness of this. Dynamic includes or requires, this is something that's really interesting about using code reuse. Super globals, variable variables, and register globals. So some super interesting things. Okay, so PHP has different types of syntax, single quotes, simple strings. Okay, so the other thing about PHP, so it took, I believe, it could be a Perl program that's in there. Perl, I think Perl's a language that starts variables with dollar signs as I go. Okay, I'm saying some dots. So, yeah, so PHP kind of got that inspiration. So all variables begin with the dollar sign. So this is declaring a variable called juice, which has the value apple string. Cool. Now, of course, we want to use that in our strings in terms of output. So we can echo double quote, he drank some dollar sign juice juice. And when PHP is interpreting that double quoted string, it's going to substitute whatever the value is for dollar sign juice into that string. Other languages have this functionality? What was it? Cipher. So here's a hand. Yeah. Cipher. I can hear you. Cipher. What language is that for? Cipher. Cipher. Okay. Yeah. So the idea is, and it's built into the language. So you can even do things like define an array of different types of juices. You can have apple, orange, and then you can have, so the other thing about PHP is you have arrays are also dictionaries. So you have, there's not a different concept of this is an array or this is a list and this is a dictionary. So this has a array value of zero of apple, one of orange, and Kool-aid one is purple. So you can do things like he drank some dollar sign juices bracket zero to zero index into an array. You can also, let's see. Yeah. So then you can do juices and use brackets to reference a element of your dictionary. And finally, you can include inside curly braces. So those curly braces are not actually output, but it allows you to use single or double quotes inside of your variable substitutions. So all of these at runtime are going to give you different outputs here. So what? What makes this good or bad from a security standpoint? Does it have anything to do with security? Would it be possible to inject values into? In what sense? If you're looking at a variable, can you reroute where you're looking? So could you, let's see. What input does this page take? It's in the form. What was that? It's in the form. Is that it? No. It was a question. This code, does this code take any user input? No. Can you send any input to this PHP file to change the output? No, why not? These are all constant variables that are constantly set and being output. So you can't just, if your input's not being used, you can't really change anything. You can't make it. If you can edit this file, you change maybe one of these string sets outputting. At that point you shouldn't inject whatever code you want anyways. So you can't fundamentally change the code that's being executed. You can't make it alter its variables. So really the problem kind of comes from this makes analyzing PHP code when you're looking at it very tricky because you can have, well especially if the other feature we'll look at, but you can have inside these strings you have to know what things are actually constants and what things are dynamics because some of these things could depend on other variables that depend on other variables that then depend on user input, which is how an attacker could get their input into the application. So we'll see other examples of that. The other thing is, so in a lot of languages, let's say like C, how do you use code that is written in another file or in another module? Yeah, what do you do with the header file? Yeah, you include it, right? You include it, which means, well in C it just means it's basically like pasted in and the linker later will figure out where those functions are defined and you can't find it, it's going to throw an error. Have you ever, can you write, you write C code that includes a file based on user input? I'd say no or probably not and there may be a super insane thing that you could do, but that's going, so you need to write, which makes sense because your C has a very distinct, you're writing the code, you're compiling it and then you're linking it and then you rush, right? So going back to load something else, then you'd have to go back in that life cycle. In PHP, PHP has two functions include and require, where include says basically and it's literally a paste, so it's like take this PHP code and basically paste it right here in this file and require says do the same thing if that file doesn't exist, throw an error. The trick is that string that is passed through include or require could be dynamic and could depend on user input or could be computed at runtime or you could go through all of the PHP files in a certain directory and include every single file dynamically. So for instance, so here's a good example, so this is something I took from WordPress, so this is in, I don't remember which file, but here at the bottom it's calling the require function, it's calling directory name of underscore, underscore file, which is a constant value that will be whatever that current file is. The directory in the file hits it and then the other thing that's fun about PHP is it uses the dot operator or string concatenation instead of a plus, so it's concatenating a value computed at runtime wherever this file is currently located and including wp-blog-header.php. And that in and of itself is going to say, have a check if this wp-blog-header is not set, so it hasn't already loaded the headers, then set wp-blog-header to true and require once wp-load, call wp, and then include, now this absolute path is a constant that's hopefully going to find somewhere, so you can include type of loader dot php. So you have all of this, so the other thing, this is why this is difficult, is that you're trying to statically analyze this code and say, what does this do? Well, you actually need to know about all of these files that are being loaded and here it's kind of easy because these dirt file names are all going to be relative inclusion, but this can be very, very tricky here. There are others, so php also offers, so it used to actually ship in very, very insecure default configuration, but you'll find actually a lot of instances where web applications will intentionally ship with older versions of php, or they change the configuration to support these things. So one thing for instance is a php setting called allow url include, which, I mean I guess it sounds like a good idea, but the idea was, well, wouldn't you want to be able to put into and include some http url that the server side code will then go fetch, get that content and interpret that and execute it as php? Why would that be useful? Yeah, third party library, right, that would actually be, we actually will get to JavaScript, it happens all the time in JavaScript. What's the downside here? How do you verify that you're using the code you think you're getting? Yeah, what if I'm using, so what's the security mechanisms that ensure when I'm making an http request from one machine to another that the content they send me is exactly what I receive, checksum? Is that a security mechanism? No, if I can alter the payload, I can alter the checksum, right? So we've seen that and we've done that, we've done crazy art attacks and we've looked at all those things, right? So somebody could do that along the way, inject code and that code is now running on our server, which is running our web application, which contains all of our, or has access to all of our user data, right? So, fundamental here, pulling in random code and executing it in your web application is a very bad idea. And so, as we'll see, this actually can be a security problem in applications. Another interesting feature of PHP is the size of the idea of super-global, so if you're probably like, global variables were cool, super-global are even cooler. And the idea is this is a lot of variables that are defined by a dollar sign underscore and then it all caps. So dollar sign underscore server is in dictionary and auto-populated with a lot of parameters from the request. So, for instance, in this case, excuse me, it has request method, so this would be, again, a post as we saw. You can, and this is from the WP comments post.php, so this is word press code we're looking at here. And so basically it's saying, so what is this first check doing here? Yeah, so it's checking if the request is not a post, do what? Post request of this page. So it's telling it's setting headers so these are PHP functions to send PHP headers. So it's sending an HTTP 11405 method not allowed. And if it is, so now we know the exit, so the exit is going to halt execution so there's no more server-side code. And then finally it will look at and check. So dollar sign underscore post is a super-global that's populated with all of the post parameters that are sent. Where are post parameters sent in the HTTP request? In the body, yes. So these are only in the body. Cool. So it's checking. If it's set, so it's checking if it's set, then cast it to an integer and set it to comment post ID, otherwise it's zero. Then get that post, so presumably this is some code that talks to the database to get a post. It then checks if the comment status is an empty, then do this blah blah blah and WordPress is complicated, we're not going to go into it. That's probably one of the most complicated applications. So the other cool PHP feature or weird is variable variables. So what would a variable variable be? Variables are already variable. Why are variables variable? Because they can store a lot of different types, right? So what a variable variable be? What was that? A variable is a variable that can store different variables or different values, but it can't really store, it's not really a variable variable. What was that? A struct. A struct? Why would a struct be a variable variable? A struct is a type of variable that has essentially subtypes, right? So we'll look at this and see if this makes sense. So we can have some PHP code, we'll set a variable A to be hello. Is A a variable variable? It's a regular variable assignment. Can you change whatever value is in variable A from making an HTTP request? Can you ever change the value of variable A? No, why not? It's constant code. Every single request you make, no matter what you send, A will always be zero. We haven't looked at the rest of the code. Other stuff may happen, but I'm going to hammer that home because I see that a lot when people, I say where is this, where is an exploit and they'll circle this line and be like this is a SQL injection. Like this is a constant string assignment. There's no way you can do anything. Okay, then I can say dollar sign, dollar sign A equals world. That's weird. Yeah, and then I can say echo dollar sign A, space dollar sign hello. What should this output? Hello world, why? Yeah, this is legit code. This code runs. So this dollar sign, dollar sign A, how's it work? Yes, creating in the local scope, in the scope a new variable of name hello or name of whatever's inside the A variable at that point in the program execution. So it creates a local variable called hello, dollar sign hello, and it sets it to the value of world. So you can do things like echo, now there exists a variable after this point called dollar sign hello. So you can say echo dollar sign A, space hello, this would say hello world. You can do echo dollar sign A, space dollar sign and then our curly braces, dollar sign A. So this is again, so it's saying look up whatever dollar sign A is, which is hello, and then output the variable name hello in the local scope at this point. Can you do three? Variable variable variable. I'm not sure what that would mean. So I'm not willing to go that far deep in this variable process, but if you think of a way that would be useful, I believe that I have to get too crazy. I guess you should throw it in. And so another feature that PHP had originally that has since been moved to a non-default configuration value, but you'll still find old software that enables this. So if we looked at this code here, how do you get the post parameters that are sent in a request? Yeah, the super global variables, but how do you actually access that? Yeah, so just like this post, dollar sign A score post bracket, but you have to use it like a dictionary, you have to say exactly the way. But man, that's a lot of typing you have to do, because every time you have to say you want this post parameter. And so the idea behind registered globals is wouldn't it be great if PHP pre-populated your variable scope with all of the names that are sent as either query or post parameters with their values. So if we look at the documentation it says register the environment get post cookie server variables as global variables, which means that PHP would automatically inject variables into your script based on the HTTP request. So looking back at this, so this is again everything outside of PHP tags is going to be output as is. Now with PHP tags we say if dollar sign name and dollar sign comment, then open a file for a pen called user underscore feedback, write to that file name, comment, and then a new one, and then close the file and that go feedback submitted. And then output a form with an input type of text. Name an input name of comment and an input type of submit. So if register globals is on when you first visit this page what's going to happen? Because of course visit this page I mean you make an HTTP request for this PHP file. You'll see a form, right? Will you see feedback submitted? No. So then you type in name you type in comment, you hit enter then what does your browser do? So you make an HTTP post request to the same URL that you're at or the URL that you're at and it's going to put the name as a post, so it's going to put in the body of that post request name equals whatever and comment equals whatever you put in URL encoded. And so because you have super global, you have register globals on because man it's so difficult to say dollar sign numbers for a post name. You can just use name which will be pre-populated so this name, so PHP is creating this name value based on the HTTP request that you're making. So it parses the request it says okay there's a there's a post parameter called name so I'm going to create a variable called name and I'm going to set it's value to be foo over what I'm going to put in a variable comment and set it to be whatever that value is so you and your code only need to check if there's dollar sign name and dollar sign comment. It's actually kind of a nice, I mean a handy feature if it wasn't so terrible, but cool. Okay and we talked about so how do web applications establish state for sessions with user browsers. So what? Cookies. Yes, they're cookies. Not enough? So is about it this way, how much data would you say you have on Facebook for those that use it? Is all of your data stored in your cookies? No, that would be absurd. And any time you include your cookies you have to start over, there'd be no memory of you anywhere. So fundamentally a web application wants you to store state. You can store things about the users. We're learning more and more about how much state they're storing, which it may be a surprise to some of you about these websites. And they want to store persistent state. So where do you store the state? When you're writing a GUI application where do you store state? You can store the class system in a database in memory. I mean you could source it up in memory. You can hit a limit at some point. But you'll hit a limit to all these things. Right? So a file system may be flat where you can use JSON file or XML file. A database. So why is a database one of the most common ways of storing data? In a web application. Easier to manage the data than a file system? Yes. I can use LS to query data in a file system pretty easily. Cheaper? I don't know if you paid for a Oracle license. They're pretty expensive. Faster to access? Faster to access? Faster to access? Faster to access? Faster to access? Faster to access? Faster to access? Faster to access? Faster to access? What was that? Faster to access the time of random access to a specific record? What other things? Authentication? Authentication, you may have one multiple-user. You can get authentication on the file system now. You all are using a file system on the binary server? It allows separation of concerns. You can run it on a separate machine. So that's a good point. If we had a popular web application. One machine is not enough. We have to run multiple PHP applications just to keep up, or multiple servers running the same PHP application just to keep up. Now if they're each storing state on their local system, we have to make sure that every user request is routed to the correct machine if you think. But if we separate that, now we can have a database server which may have different constraints than the actual server. And we can run that database server with an awesome rating. Whatever, the web server, front-end server can kind of do whatever. That's a good point. Anything else? What? Transaction management. I can't hear you. Transaction management. Ah, transaction management. Why is that useful? Yeah, so this is one of the ways you want your bank to be using a file system to keep track of your money. Sure. It depends on which way to air, right? They would not want to. They will not. So yeah, the question is what happens? So we know fundamentally one of the things about a web application is any user can make a request at any time. And even a single user can make multiple concurrent requests that are going on at the same time. So what if I have a bank website or web application and I make a request to transfer $1,000 from my account to two different accounts and I only have $1,000 on my account. If you're using a file system and they want to open whatever, if you're doing it wrong, then you can end up with a case where you just created $1,000 out of thin air because you took out $1,000 but each one actually transferred those $1,000. So you want some way to manage transactions and deal with this crazy distributed nature of the web and a database has built-in functionality for that. And fundamentally that's what it's built for. You also get to recognize things with a database making sure that after you commit the transaction that the next and follow-in requests to the database will see that transaction. So you don't have any weird issues. So anyways, yes, it's a good discussion. And fundamentally web apps use databases. It's also acid compliant. So what do those terms mean? Yeah, atomicity, consistency, isolation and durability. So these are good things. I'm just going to be on my own. So this is why everybody moved to no-SQL databases like MongoDB and said wow they're so much faster and so much more flexible. Not realizing that they gave up a lot of these acid guarantees and then they freak out when they lost all their data. I think I hacked the total. Oh, interesting. Yeah, that's, it happens. I wouldn't pick on them just for getting hacked but I'll pick on them. I'll pick on people who use them without realizing the technical trade-offs they're making. I mean that's more of what I have a problem. Concurrency, separation, concerns, yeah perfect. These are all good things. The cons are definitely, there are cons here. They're more complicated to build and deploy. You have to make sure you have the database server running. You have to configure it correctly. Out of the box these things don't work 100% correctly. And finally, you know, if we review the tech that we've learned so far, we had URIs, HTT, HTML. We just did PHP and now you have SQL that you're throwing on top of there, right? But there's a lot of different technologies. And so stuff gets complicated. So the classic LAMP stack is basically Linux, Apache, MySQL and PHP. So this is the standard kind of web application installed. And this is really, so they're all open source software. They're all free. And this is, I believe, part of the reason why PHP is used so much as a web application language because it's very easy to get started. It's insanely easy. You can go get those for like $5 a month and run whatever PHP code you want. And this is actually a good way of thinking about the outrunning system because you can swap this out if you don't like Linux or you don't like Apache, you want to do NGINX, whatever. You're going to swap out that component. It's not too crazy. Cool. So MySQL is currently the second most used open source relational database. What's the first? I guarantee you, you're running this right now. SQLite. Yes, why SQLite? Mobile devices. Mobile devices. Android uses SQLite internally to manage configurations. I believe iOS does too. And I think Firefox does. A bunch of software does. So literally, yeah, MySQLite is used by like, I don't know, an insane number of people. It's hard to put it up about how many people actually use it. So MySQL, though, is first released May 23, 1985. Interesting tidbit is that Sun, so Sun was the original manufacturer, developers of Java. They're the ones who developed Java. And Sun eventually purchased MySQL for a billion dollars in January of 2018. So that's a lot of money. A billion dollars is a lot. For an open source database, which I think is pretty cool. So a brief rundown of SQL. We're not going to go into the details here. You can spend a long time studying this. You can even study at an abstract level what a database does and how to do everything in write queries and all that stuff. I just use it. The basic idea is you have a few operations. You want to get stuff from the database with a select. You want to change things in the database with an update. You want to create new things in the database with an insert. And the third or fourth one would be you want to delete stuff from the database. But honestly, modern applications will never delete things. What do they do instead? What? So you have a column called, it is deleted. It defaults to zero. And then when the user says they want to delete something, you just change that to a one. They're like, yep, it's definitely deleted. Which is how anybody delete their Facebook account and then go back and reactivate it. Now, it's imagine writing everything appears exactly as it was. So the interesting thing is, so SQL is a well defined language that has standards. And each SQL implementation engine, MySQL, Postgres, SQL Lite, all have slight differences on the functionality they offer. And even some differences in syntax, which I think can be interesting. So some examples. So this is a query select start from users where username equals atom. So this is selecting from the user's table. So you have a database. It has multiple tables. Each of those tables will have multiple columns. So this is saying, give me everything. So all columns from the user's table where the username column is equal to atom. You can do things like ordering things. You can say select start from book where price is greater than 100, order by title. You can even have sub queries. So you can select the ISBN title price from book where the price is less than selecting the average price from the book, order by title. And the SQL engines are very good about parsing these queries and optimizing and executing that. There's like a whole awesome research field on how to make them better at doing these things. Inserting. So insert into table example columns, field one, field two, field three, where the values here are test and null. Update. So this is changing a column. So update table example, set field one. So this is changing column field one to be update value where field two is equal to n. So this will update every single column. And you can do crazy unions, which say basically return as your results the union of these two queries. So run this select statement against table one. Run this select statement against table two. Put the results all together and return them to me. And it's very complicated. Like every time I look more in this language and these databases, they do more and more stuff. So using pdp in my SQL, the other thing that often happens is you have user names and passwords associated with your database. Why do you want that? Yeah, so you can audit things. You can give different access control to different users. You can say, well, the web user should only have access to this table and then maybe there's a reporting software that runs once in every while and that only needs read access. It doesn't need to write any documents. So you want to connect to the local host using this user name and password and then selecting a database. So selecting some database, let's say example. And so this is using a query. It's using an sprintf, which is the standard basically C version of this function to select first name, last name, address, age, from friends. So from the friends table where first name is equal to going to be the first name parameter and last name is the last name. And then call the bicycle query function, check the results, and then loop over each result and this will return a dictionary or I guess a PRA where it has first name equal to the first name. Column and address equal to the address column. Cool. Okay, now we're almost there. We're almost to the modern web. We're starting to build up technologies now. So the original HTML that we talked about had images, tables, font sizes, different forms. It had styling. We don't talk about styling at all because it's whatever. I don't know. Making things look good is something else. You can learn that on your own. But content was fundamentally static. What do I mean by that? Content was static. You're using some crazy web application, right? You made a request to the server. It processed some code in PHP or whatever. Spit back an HTML page to you. Your browser will be parsed and displayed. Nothing fancy here. Is your, or most applications you're used to using are your desktop, like your desktop GUI application static? Let's build an application. What? I don't know, any application. It can be static. So think about in the version of HTML, the web that we talked about, when does the content change? The state changes? How does the state change? So you're a user. Type in some URL. The browser and the HTTP request, the web server does some processing on the server side. Send you back an HTML page. And then what happens? The PHP code changes. The PHP code already ran and gave you an HTML page. But then when you submit forms and things like that? Yes, you have to do something, right? You have to click on a link. You have to submit a form. And then you get a different HTML page back. But fundamentally, you have to do something. You have to click on something, right? Which is very much different than, like, a... most applications, right? So you're interacting with... even your email client or whatever, right? It's showing you new messages as they come in, not after you click the refresh button to see if there's any new messages. And so this is a page of the original Yahoo. So this is what I mentioned, Yahoo was literally just a kind of yellow pages or an index of things. This is actually really fun. I think this is the way back machine of the web archive. You can go look at websites throughout time, so you can see, like, what Facebook looked like in 2004 or what Yahoo looked like in 1992. Oh, no, 96. This is in the URL. 96. The first version of Amazon? Does this look a lot different than modern Amazon? They still sold books. Does anybody even buy books on Amazon? Yeah. You guys have textbooks on Amazon? Yeah. Okay. Interesting. I've heard the questions about that one honestly. Right, this is how they started. Isn't it crazy to think about, like, one of the leading cloud providers of infrastructure started out as a purely book retailer through the internet through one of the... I guess for the time this is a very advanced website. This is Ulta Vista. Anybody remember Ulta Vista? In 1996. So you would get this content, and nothing would happen until you clicked one of these links or you filled out that field and hit Enter. It was constantly very much a static process. And this is the version of Google from 1998. This actually hasn't changed much, which I don't know is cool or scary. But the HTML has changed a lot. If you check out the HTML of Google, it's doing some pretty crazy stuff now. But actually, fundamentally, I've heard actually a story. I don't know if you... Does anybody use the I'm Feeling Lucky button? You do? It's three Cs. Who knows where that's going to take you? Oh, that's a lot of credit to Google. Okay, well, I guess that doesn't make sense. I did hear a talk. This was a while back, so the data may be out of date, but they basically said only 10% of the people actually use the I'm Feeling Lucky button ever. But for some reason, people, if they took it away, they always prefer the version with the I'm Feeling Lucky button. And they liked Google and used Google more with the button, even if they never used that button. I don't really know what that says about people. Is that like an A.B. test? I don't remember if it was an A.B. test or if it was like people in a lab or whatever. I feel like it was a story effort for people at Google, but yeah, I don't know. The data on that is super old and it's been corrupted in my brain, so feel free to refresh that story. And so, right, this actually is very... And the fact that, you know, HTML and the web was able to get this far where we had complex things like Google that was searching and indexing the entire web in 1998, it's kind of a testament. And so even though HTML was really designed as a way to describe a text document with hypertext links to other documents, right, this is where the web concept comes from. But, you know, people wanted not only, you know, fancy animations and how do I make... Actually, one of the major goals was how can I make a web application that is as functional as a desktop movie, right? Because you have a lot of benefits from moving to a web application, right? Anyone could use it with a web browser, but you just click a thing, you wait, load, display your content, and you have to click another thing to load to see your content, right? It was very much a waiting game and it was not very interactive. So, in comes JavaScript. So JavaScript was invented essentially as a client-side scripting language. So when I say client-side scripting language, what does that mean? It runs in your browser. Did you all know this? Every single website you're running is down... Your browser is downloading code and running it on your machine. You should be more scared. It's actually a crazy idea. So it was created by a guy named Netscape in 1995 as live script. This was the original name. It was renamed to JavaScript in December of 1985. Anybody have a hypothesis of why? I know this is Java. What? In about 10 javas there are computer and you're going to see basic code. Yeah, so they created a language that has almost nothing to do with Java. It's a slightly similar syntax just because they're both based off of C. But if you look at the language JavaScript, it has almost literally nothing in common with Java. Yet Java, I know it may be hard to put yourself in that mind frame, but Java used to be super popular, like insert whatever new popular language X is in 1995. And they Netscape wanted to piggyback off of that popularity by naming their language JavaScript. And so, yeah, this is a kind of nice quote I pulled. Now it's JavaScript. An open cross-platform object scripting language for the creation and customization of applications on enterprise networks and the internet. I don't know that any of those words are true. It's not really an object, I think there are objects. Anyways, yeah, the more real definition for Wikipedia, it's a prototype-based scripting language with dynamic typing first-class functions. Does that sound like Java at all? No, Java is an object-oriented static type language and just recently has first-class functions. Yeah, the super interesting thing, like Microsoft in 96 implemented support for JavaScript, but to deflect the trademark discussion of whether Java the language was trademarked, they changed it to JScript to avoid some Java trademark. And finally, JavaScript was submitted to the Ecoma International Standardization and so it's called, the standardized version of JavaScript is called EcomaScript and it's gone through several refinements since then. So it is not a standard with syntax and everything, because it used to just be like whatever Netscape did, what it was the popular browser, that's what JavaScript was, and then when Internet Explorer was the popular browser, it's whatever Internet Explorer did. It is, for better or for worse, the language of the web. Like, you cannot learn and know Web technology without understanding JavaScript. So that's a 7, I think we just got to 7 technologies, because JavaScript is insanely important. And it's been, I mean, everything supports JavaScript just like PHP, which is kind of interesting, JavaScript kind of evolved along the way where browser vendors would create some cool JavaScript feature that websites would start taking advantage of. And so, JavaScript has to be backwards compatible with HTML, so why is that? Yeah, so the entire point, right, so why we talked about why we want JavaScript, we wanted to do some of that AI stuff to the browser. Right, so, you'd think a part of it is JavaScript needs to edit and change kind of the HTML content. But funnily enough, the browser needs to somehow receive that JavaScript and execute it, and needs to do so in a way that it's not going to bring old browsers that don't support JavaScript. So the idea was they created a script tag, so you would send essentially a JavaScript inline in the HTML page sent to the browser in between script tags. And optionally, so this used to be a thing you would do is put your JavaScript inside an HTML comment, which would mean that if the browser didn't understand JavaScript, it would ignore whatever was in there and not display it. But this is definitely not used anymore because basically everything supports JavaScript. And so you can do things like so you can declare variables with the var keyword, so you can have a var name equals prompt is pops up a prompt window enter your name you can say if name is null, do this document.write, so document.write writes out to the HTML document and change the dynamic runtime otherwise you can customize your greeting to say welcome to my site name. You can also specify the type so this is where you can specify different types of languages and there is a bit of an experimentation in supporting other languages but JavaScript 1 it's the deal. So if you go to this it will pop up a window so that's the JavaScript executing I can put my name and it will say welcome to my site, Adam, dynamically. So the important thing is that this code, this JavaScript code is not running on the server this is included in the HTML page that is sent from the server to my browser where my browser parses this, interprets it and now with modern JavaScript compilers translates it into X86 or whatever my system is code and then runs it. When is document.write put it? So the document.write so we'll talk about it in a second but these are prompts and documents the document object are all interfaces for JavaScript to talk to the browser right so they only have meaning in context of this browser but something like var name equals string foo that would be like standard JavaScript that has semantics that work everywhere but this part that interactions with the browser print through the interesting part. Another important thing so similarly actually it is surprising I never realized this connection so just like we talked about with third party libraries and PHP you may want to include a remote resource you do the same thing a lot in JavaScript so the idea is you would include a script tag but now with an attribute of source SRC and you would point that to either an absolute or a relative URL and that your browser will then go make another HTTP request for that URL fetch it and then interpret that as JavaScript code whatever is returned and it's exactly the same as if it's directly on a page or not it really doesn't matter cool so the document object model is done so this is what we talked about this is the interface through which JavaScript code interacts with the browser sorry with the HTML content on the page so for instance how do we write things or change things or change the style of things so that we click on something we can I don't know make a button appear or not appear or whatever all of this is through the document object so we can traverse query we can do we can handle events so we can set on click or on error handlers that occur whenever an event happens the document object model what the browsers how the browsers talk to the JavaScript has evolved a lot over time yeah so it's one of these living standards now that are kind of dependent on the browsers and what they implement so you have to go look that up exactly what things mean and frankly it becomes a bit of a mess especially if you want to deal with older browsers like I don't know Eric if you're working with an organization that supports Internet Explorer 6 which is still insanely old but sometimes you still have to support you have to write JavaScript code that actually can handle all of these different types of browsers so example of the DOM here we have our standard HTML5 web page we have now an h1 tag so it's a header tag it says DOM example we have an empty div with the idea of insert here and then at the bottom we have some JavaScript code that's going to create a local variable called hr with document.createElementHR so it's going to create a JavaScript create a DOM object that represents an HR element right and we are then going to get so we're going to use document getElementById insert here so it's going to query the DOM it's going to look for the element that has an idea of insert here which is going to return that div and that object has a method called appendChild to add something as its child so we talk about HTML as a tree so we're going to add that as a child to this div and we're going to append this HR and HR is a horizontal line there should be a line through there where that line does not exist in the HTML on the page and we could do this in response to a user event or whatever kind of stuff we want so if we go there we'll see a beautiful line yeah magic stuff right here okay so yeah so this is really good I like this if you ever want to if you've done web programming and want to laugh you can look at what crazy cross browser issues have happened Internet Explorer does not place ampersand nbsp semi-colon orational character 160 you need to replace its unicode equivalent slash u00a0 so which nbsp it's a non-breaking space but that's the h&l entity's encoding of a certain character so it's saying only in a certain browser and probably a certain version of this browser you need to actually encode it differently depending on what browser you're using and not only Internet Explorer it's not the only one in Firefox it dynamically created input field inside of form created using .com.green element does not pass its value on form submit it actually seems like a big problem right so you have to then code around that in a specific browser to make sure that you're dynamic so think about a form so you used a form right that has a button that says add additional element maybe it's number of names or whatever and you add that and then it gets dynamically added there through javascript but then in this version of Firefox when you hit submit it wouldn't actually submit those values document.getElementId in Internet Explorer return element even if the element name matches Mozilla only returns element if id matches so that's super annoying so use jQuery that's like the short version here so this is why jQuery is one of the most popular libraries it basically gives you a nice interface to query the DOM and it deals with all of these insane issues across all browsers and it will even work up to Internet Explorer 6 I don't know it's hard to convey how awesome jQuery is so there's another idea so the DOM is really if you think about it the javascript interacting with the HTML of that page that it's on but there are other things we want to do with javascript for instance we may want javascript to redirect the user to somewhere else like change the URL on the bar and so those are kind of not really under the DOM because that's not really to do with the document we've got it's part of the name the document is all about the HTML document but that's kind of a browser level feature so there's other idea of a DOM and there's no real standard here so it's super annoying something is changing the name of the window so whatever is on the your tab that name closing a window if you're done with the window setting a location to be somewhere else these are things you should be aware of that exists okay important difference javascript the language is defined as standard it has semantics you can write a program in javascript and especially now with something like Node.js you can run a javascript program that executes completely on the server side and never even thinks about HTML right because there's no DOM there's nothing to interact with it's just code executing as if you write or any other type of code so this is an important thing to keep in mind that really trips people up we think javascript is just this thing to talk to the browser but it's actually its whole language so server side code even when we talk about database queries so this is a super interesting thing about something like MongoDB is that it actually uses database queries so you can yeah all the database queries are written using snippets of javascript code and so you're actually sending javascript and sometimes you write this in Node.js so you have a javascript program that is creating strings to send to the database engine which interprets that string and has javascript to execute to perform the query flash so flash is kind of dead thankfully but it used a javascript like language even Java applications you can run Java if you want to be in super meta you can run a javascript inside Java and I don't know if they kept going with this idea on Windows but the WinRT idea was you would write a web application using javascript you'd run a Windows application using HTML and javascript and that would modify the page or actually a lot of we've done some research into this and a lot of we looked at Android specifically but a lot of applications are just essentially an embedded web browser with HTML content and javascript code so this stuff is javascript is actually used in a ton of places alright so brief crash course in javascript so almost everything in javascript is an object objects you can see it in arrays so basically and alright so somewhat like this we have an object which has properties and values so here we have a property of name test is foo and you have a property of num is 50 and the really weird thing about javascript is you have multiple different types of syntax to access these properties so you can access them as if it was a dictionary as we think of in other languages so here I'm setting object foo equal to itself totally fine so what's this going to output so console.log you can think of as kind of like a printf or an echo of the javascript world so what's this going to output yeah it's going to output the object itself because it's going to output an object test which is foo and then it's going to look up object foo and we just said object foo is equal to the object itself so it's going to write its own object out and then we can set object num is equal to 1000 and we can console.log object num we can see all these here we did console.log object object test so the cool thing is you can use any browser to test these things out you can just usually there's developer tools you can enable and look at the javascript console and type whatever you want and run stuff so javascript you can do recursion you can have a function factorial and a super weird thing about javascript you're not familiar with it so what are most languages like C how do scoping rules in C work scoping what are scoping rules now how long is a variable valid for so you have a variable declaration what scope is it valid for so in C what's the scoping rules between block level scoping between curly braces so you can find a variable inside of an if statement and it's only valid inside that if statement what about javascript no that would be that would be even crazier it's not a free throw function level the function level yes at the function level which means that if you want to do scopes you just include blocks like more curly braces and you can actually do this in C to create a scope without if or anything else you can just add curly braces but here in javascript a variable is valid in the entire function in which it's declared if it's not declared in a function that's considered a global variable so the interesting thing in here so the difference here is I'm defining a function called factorial here I'm defining a variable called create function and then I'm creating and on the left hand side I'm defining this variable on the right hand side I'm defining an anonymous function and I happen to be setting that variable equal to that anonymous function so in this function I can have a variable count equals zero and I can return from that function so this is what you have functions as first class citizens which are super cool you can return functions from functions you can pass functions into functions and from here you can return plus plus count so I can call create function and what is going to be inside variable I and C a function that does what when I call it I can return count and then increment it so if I call increment what's this going to return yes one and then increment two and then and now it happens when I call variable increment two equals create function it's going to return a new function and now it happens when I call ink two so it's going to call one so let's look at this one two three one so why is that so the idea here is closure we're just going to briefly talk about the idea is you're creating an anonymous function you're creating a function so this inner function that has no name that we're returning return function return count plus plus count that count variable references this count which is valid only in this function so the idea is it closes over that variable and so every reference to every call to this specific instantiation of this function refers to that same variable count but if we create a new function that now created a new instance of a new variable count that that inner function closes over and returns so they're both referring to their own different copies of the same variable just like you have functions that have different local parameters so in this you can kind of think of it and essentially what it does is it kind of creates references as if it was a parameter but in a complicated way other crazy things about JavaScript have you ever wanted to take a string and make it execute as if it was a program so you are in luck so JavaScript has functions like eval which take a string and then pass it to the JavaScript engine to take that string parse it as if it was JavaScript and then execute it as if it was JavaScript and in case one function was too restricting you can dynamically create functions from strings you can set a string to be interpreted as JavaScript and executed every second see a few things like this you can say variable foo is equal to the string bar you can then have an eval of a string and inside that string says foo is equal to add up and then log the variable of foo so what's this going to upload because that eval is turning that string into JavaScript code and of course the string can be dynamically created and it can be all kinds of fun stuff so yeah you can look through these examples ok and there it's pretty good so then we get back to talking about why we actually use JavaScript and then what we've done with all the lines