London, Shoreditch
The 7th week at Makers was a revisit to Javascript and I really appreciate it. For now I can still say I’m more comfortable in using Ruby than Javascript and I hope to improve the balance between the two. Comparing to week 5 which was the first week into Javascript, this week was more of heavy lifting, as we were asked to wrestle with some underlying language concepts that are not well understood in Javascript (Closures/Module pattern/Dom just to name a few).
So here are the goals for this week.
- Build a front-end app in Javascript (without using jQuery, first go at NPM)
- Work competently in Javascript (Using module pattern to encapsulate code, more practice in javascript syntax, etc)
The approach I found to be particularly useful in this week is comparison. Compare Javascript with Ruby, compare DOM + Javascript with jQuery.
For example, when learning the module pattern, and since there’s no module in javascript( I know there is class in ES6 but I’m not there yet…), it is useful to compare the JS module pattern with Ruby module:
- They both create a piece of reusable code
- They both present an interface but hides its state and implementation
Obviously there’s also distinct difference. For example in module pattern you will also see:
- immediately invoked function expressions
- closures
But I found it easier to branch out to the differences once you understand the common place between the concepts.
Another example is NPM vs. Gem. NPM is just as Bundler, and Node packages function in a similar way to Ruby’s Gems.
I also appreciate the hard way of not using jQuery this week (using DOM+ Javascript instead). It definitely helped to de-magic jQuery and understand the flow underneath. Clearly, jQuery is a great tool, but I guess you wouldn’t want to rely on it too much, at least not without knowing it’s just another layer on Javascript.
There were inevitably some hurdles during this week, which I still need to take care of. One of them being hoisting for example.
I do understand the concept of hoisting, however when it comes to practice, there was some confusion. Inside the module pattern, I was initially using(var) FunctionA= function () {}, however, when I tried to access it from outside, I got an error warning “FunctionA is not a function”. I have to then change it into function FunctionA() {}.
Researching on this, I got a hypothesis that function FunctionA() {} is "hoisted" to the top of the current scope (my module pattern) before execution. For the latter function FunctionA() {} however, the variable declaration is hoisted, but not the assignment, which will cause an error if I call it before assign it again. I will validate my theory during practice next week.
So that’s all for this week. See you next week：）
==========Highlights of the Week=============
A. Bare minimum HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- page content -->
</body>
</html>B. NPM
NPM is a node based package manager, that will help you to organise and version control Node Packages on your machine and in your projects. Npm is the equivalent of Bundler from the Ruby world. Node packages function in a similar way to Ruby’s Gems.
It is possible to install a package globally (i.e. to make a command available to you on the command line), locally within a project, and locally within a dev environment.
If you haven’t already, install Node with brew install node and follow any additional instructions. The simplest way, much like creating a Gemfile, would be to use a package.json file created with npm init.
Here’s what we get if we run npm init in a folder called testProject and follow the on-screen instructions, hitting enter every time:
package.json
{
"name": "testProject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}To install a package into your project, for instance if you wanted to use a package called hapi in your application, you would use npm install hapi --save. The --save option tells npm to install the package into the project inside a folder called node_modules, and will also update your package.json.
If you want to install a package that is needed by anyone developing your app, but is not needed to run the app, then you have another option. For example, if you wanted to use the test framework ‘jasmine-node’, you would enter npm install jasmine-node --save-dev.
C. DOM
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects.
A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.
API = DOM + JavaScript
The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates.
When you create a script–whether it’s inline in a <script> element or included in the web page by means of a script loading instruction–you can immediately begin using the API for the document or window elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page.
