Commit 018b62df authored by russfeld's avatar russfeld
Browse files

Ch 1 and 2

parent 2aaeec59
{
"cSpell.words": [
"embeddable",
"mousedown",
"serializable",
"situationally",
"transpilation"
......
......@@ -45,8 +45,7 @@ You should see a new panel open in your browser, and under its 'elements' tab th
![The Elements tab of the Chrome Developer Tools]({{<static "images/1.2.2.png" >}})
Collapsed nodes can be expanded by clicking on the arrow next to them.
Try moving your mouse around the nodes in the DOM tree, and you'll see the corresponding element highlighted in the page. You can also _dynamically edit_ the DOM tree from the elements tab by right-clicking on a node.
Collapsed nodes can be expanded by clicking on the arrow next to them. Try moving your mouse around the nodes in the DOM tree, and you'll see the corresponding element highlighted in the page. You can also _dynamically edit_ the DOM tree from the elements tab by right-clicking on a node.
Try right-clicking on the `<h1>` node and selecting 'edit text'. Change the text to "Hello Browser DOM". See how it changes the page?
......
......@@ -81,7 +81,7 @@ Much easier than `document.body.firstElementChild.firstElementChild` isn't it?
## Manipulating DOM Elements
All HTML elements in the DOM also implement the [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) interface, which also provides acccess to the element's attributes and styling. So when we retrieve an element from the DOM tree, we can modify these.
All HTML elements in the DOM also implement the [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) interface, which also provides access to the element's attributes and styling. So when we retrieve an element from the DOM tree, we can modify these.
Let's tweak the color of the `<h1>` element we saved a reference to in the `header` variable:
......
......@@ -52,11 +52,11 @@ An important takeaway from the discussion of the event loop is that the actual p
However, JavaScript _does_ retain many of the benefits of concurrency within its model. For example, when the DOM is loading and encounters an element referencing an external resource (i.e. a `video`, `img`, `link`, or `script` element), it triggers a request to retrieve that resource through the browser. The browser does so _while the JavaScript code continues executing_. When the resource is fully downloaded by the browser, it creates a `'load'` event with the details, and adds it to the JavaScript event queue. Multiple files are therefore downloaded _concurrently_, but our JavaScript handles the results one-by-one in a single-threaded manner.
Think of the JavaScript event loop as a busy manager that only works on one thing at a time. He might send several workers out to get information. When they return, they form a line in front of his desk and wait patiently. Once he finishes the task he has been working on, he takes the report from the first worker in line, and starts doing what he needs to do with the returned information. Once he finishes that, he has the second employee report, and so on.
Think of the JavaScript event loop as a busy manager that only works on one thing at a time. The manager might send several workers out to get information. When they return, they form a line in front of the manager's desk and wait patiently. Once the manager is finished with the task they have been working on, they take the report from the first worker in line, and starts doing what is needed to be done with the returned information. Once the manager finishes that, the next employee will report, and so on.
## Common Events
There are many kinds of events in JavaScript; you can find a complete list in the [mdn docs](https://developer.mozilla.org/en-US/docs/Web/Events). However some of the ones you will likely find yourself using are:
There are many kinds of events in JavaScript; you can find a complete list in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/Events). However some of the ones you will likely find yourself using are:
* [load](https://developer.mozilla.org/en-US/docs/Web/Events/load) - Triggered when a resource (i.e. an image, video, stylesheet, script) has finished loading. You can also listen for the load event on the `document` itself; here it will be triggered after _all_ the resources on the page are loaded.
......@@ -84,7 +84,7 @@ setTimeout(function() { console.log("Hello time!")}, 3000);
You will notice that the [setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) method takes a function to execute at that future point in time, much like attaching an event handler. The second argument is the number of milliseconds in the future for this event to occur. The timer works like an event, when the time expires, a corresponding event is added to the event queue, to trigger the delayed function.
An important side-effect of this approach is that you only know the timer's result won't happen _before_ the delay you specify, but if the JavaScript vm is engaged in a long-running process, it may be longer before your timer event is triggered.
An important side-effect of this approach is that you only know the timer's result won't happen _before_ the delay you specify, but if the JavaScript virtual machine is engaged in a long-running process, it may be longer before your timer event is triggered.
For events you need to do on a regular interval, use [setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) instead. This will invoke the supplied function at each elapsing of the supplied interval. It also returns a unique id that can be supplied to [clearInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) to stop the timed event.
......
......@@ -39,7 +39,7 @@ $('#popup').show();
But if the JQuery library isn't loaded yet, the `$` is not defined, and this logic will crash the JavaScript interpreter. Any remaining JavaScript will be ignored, and your page won't work as expected. But re-writing that to trigger after all resources have loaded, i.e.:
```javascript
window.addEventListener('loal', function(event) {
window.addEventListener('load', function(event) {
// This code only is executed once all resources have been loaded
$('#popup').show();
});
......
......@@ -65,4 +65,7 @@ It is also acceptable to have no body - this is commonly the case with a GET req
The HTTP/1.1 request definition can be found in [W3C RFC 2616 Section 5](https://www.w3.org/Protocols/rfc2616/rfc2616-sec5.html#sec5)
{{% /notice %}}
{{% notice tip %}}
You can see a live demonstration of making a manual HTTP request using telnet in the [CIS 527 Textbook](https://textbooks.cs.ksu.edu/cis527/3-core-networking-services/13-http/)
{{% /notice %}}
......@@ -15,7 +15,7 @@ indicates to the browser that this content will expire June 12, 2019 at 8AM Cent
Note that response headers are a subset of _message headers_ that apply specifically to requests. As we've seen there are also message headers that apply only to HTTP requests, and some that apply to both.
As HTTP is intended as an extensible protocol, there are a _lot_ of potential headers. IANA maintains the [offical list of message headers](https://www.iana.org/assignments/message-headers/message-headers.xhtml) as well as [a list of proposed message headers](https://www.iana.org/assignments/message-headers/message-headers.xhtml). You can also find a categorized list in the [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)
As HTTP is intended as an extensible protocol, there are a _lot_ of potential headers. IANA maintains the [official list of message headers](https://www.iana.org/assignments/message-headers/message-headers.xhtml) as well as [a list of proposed message headers](https://www.iana.org/assignments/message-headers/message-headers.xhtml). You can also find a categorized list in the [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)
While there are many possible response headers, some of the more commonly used are:
......
......@@ -18,7 +18,31 @@ Installed:
* .NET 6.0 SDK and Runtime: https://docs.microsoft.com/en-us/dotnet/core/install/linux-ubuntu#1804
* `sqlite3`
NOTE! You MUST symlink the node installed by NVM to the /usr/local/bin folder.
NOTE! You MUST symlink the node installed by NVM to the /usr/local/bin folder. That is the easiest way to make it the default version of node. This will need to be updated each time node is updated through NVM.
Use `which node` to find the path, then update in this command:
`sudo ln -s /home/codio/.nvm/versions/node/v16.15.0/bin/node /usr/local/bin/node`
\ No newline at end of file
`sudo ln -s /home/codio/.nvm/versions/node/v16.15.0/bin/node /usr/local/bin/node`
Installed the following global Node packages:
* `ansi-to-html`
* `https://github.com/cis526-codio/avow` (Custom library by Nathan)
* `axios`
* `cheerio`
* `es6-promise`
* `highlight`
* `jest`
* `jest-cli`
* `jquery`
* `phantomjs-prebuilt` (note: I could not get the default `phantomjs` package to install properly)
* `showdown`
Use `npm install -g --force <package>` to install packages globally. They will be in the `/home/codio/.nvm/versions/node/v16.15.0/lib/node_modules/` folder.
To add these packages to the node path, each autograder references a script in this location: `/etc/profile.d/nodejs.sh`. So, on the stack, create that file with the following content:
```bash
export NODE_PATH=/home/codio/.nvm/versions/node/v16.15.0/lib/node_modules/
```
Update the path above to match the node version. This file will need to be created as root and given execute permissions `sudo chmod a+x nodejs.sh`
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment