Skip to content

Commit 8e6a139

Browse files
Stephen LeeStephen Lee
Stephen Lee
authored and
Stephen Lee
committed
edit content wording
1 parent 191be78 commit 8e6a139

File tree

19 files changed

+74
-118
lines changed
  • 01_Introduction to JavaScript Development
    • 00_Dynamic HTML/00_What is DHTML?
    • 01_Intro to JavaScript
      • 00_Why use JavaScript?
      • 01_JavaScript Advantages
      • 02_What Can JavaScript Do?
      • 03_JavaScript Engines
      • 04_Using JavaScript Code
      • 05_When is JavaScript Executed?
    • 02_Node.js Overview
      • 00_JavaScript in the console
      • 01_Installing Node.js on Windows
      • 02_Adding Node.js to Path on Linux and OS X
    • 03_JavaScript Syntax/00_Syntax
    • 04_Standard Javascript Objects
    • 05_Debugging in JavaScript

19 files changed

+74
-118
lines changed
Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,3 @@
1-
What is DHTML?
2-
- **Dynamic HTML** (**DHTML**)
3-
- Makes possible a Web page to react and change in response to the user’s actions
4-
- DHTML consists of HTML + CSS + JavaScript
1+
DHTML, or Dynamic HTML, consists of HTML, CSS, and JavaScript. DHTML makes it possible for a web page to react and change in response to the user's actions.
52

6-
DTHML = HTML + CSS + JavaScript:
7-
8-
- **HTML** defines Web sites **content** through **semantic** tags (headings, paragraphs, lists, …)
9-
- **CSS** defines **'rules**' or **'styles**' for **presenting** every aspect of an HTML document
10-
- **Font** (family, size, color, weight, etc.)
11-
- **Background** (color, image, position, repeat)
12-
- **Position** and **layout** (of any object on the page)
13-
- **JavaScript** defines dynamic behavior
14-
- **Programming logic** for interaction with the user, to handle events, etc.
3+
HTML defines Web sites content through semantic tags (headings, paragraphs, lists, …) while CSS defines 'rules' or 'styles' for presenting every aspect of an HTML document. These include font size, font color, background color, background position, layout, etc. JavaScript defines dynamic behavior through programming functions for interaction with the user and to handle events such as clicking a button.
Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
**JavaScript** is a front-end scripting language developed by Netscape for dynamic content:
2-
- Lightweight, but with limited capabilities
3-
- Can be used as object-oriented language
4-
- Embedded in your HTML page
5-
- Interpreted by the Web browser
1+
JavaScript is a front-end scripting language developed by Netscape for dynamic content. JavaScript is:
2+
- lightweight, but with limited capabilities
3+
- can be used as object-oriented language
4+
- embedded in your HTML page
5+
- interpreted by the Web browser
66

7-
**Client-side**, **mobile** and **desktop** technology:
8-
- Simple and flexible
9-
- Powerful to manipulate the DOM
7+
JavaScript's client-side, mobile and desktop technology is simple and flexible. It can access and edit all the elements of an HTML document using the HTML DOM.

01_Introduction to JavaScript Development/01_Intro to JavaScript/01_JavaScript Advantages/00_.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
**JavaScript** allows interactivity such as:
1+
JavaScript allows interactivity such as:
22
- Implementing form validation
33
- React to user actions, e.g. handle keys
4-
- Changing an image on moving mouse over it
4+
- Changing an image just by moving your mouse over it
55
- Sections of a page appearing and disappearing
66
- Content loading and changing dynamically
77
- Performing complex calculations
Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1 @@
1-
JavaScript can:
2-
- Can handle events
3-
- Can read and write HTML elements and modify the DOM tree
4-
- Can validate form data
5-
- Can access / modify browser cookies
6-
- Can detect the user's browser and OS
7-
- Can be used as object-oriented language
8-
- Can handle exceptions
9-
- Can perform asynchronous server calls (AJAX)
1+
JavaScript can handle events and read/write elements and modify the DOM tree. It can also be used to validate form data and access/modify browser cookies. Other benefits include detecting the user's browser and OS. As mentioned previously, it can handle exceptions and perform asynchronous server calls using AJAX.
Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1 @@
1-
Depends on Browser:
2-
- V8 in Chrome
3-
- Chakra in IE
4-
- Spidermonkey in Firefox
5-
- JavaScriptCore for Safari
6-
7-
Services:
8-
- Memory Management / GC
9-
- Just-in-Time Compilation
10-
- Type System
11-
- etc.
1+
There are different JavaScript Engine depending on the browser you use. For example, Chrome has V8, Internet Explorer has Chakra, FireFox as Spidermonkey, and Safari has JavaScriptCore. All of these JavaScript engines helps your browser by supporting memory management, garbage collection, in-time compilation and much more.
Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1 @@
1-
The JavaScript code can be placed in:
2-
- `<script>` tag in the head
3-
- `<script>` tag in the body - not recommended
4-
- External files, linked via `<script>` tag the head
5-
- Files usually have **.js** extension
6-
- Highly recommended
7-
- The **.js** files get cached by the browser
1+
When using JavaScript with HTML, the JavaScript code can be placed in a `<script>` tag in the header or as a `<script>` tag in the body (not recommended). An alternative will be to linking it to a `<script>` tag in the header as an external file. This is highly recommended as some javascript code can go beyond 100-200 lines. These files usually have a .js extension and will get cached by the browser. The code below contains a simple program that print "Hello" to the console in the terminal.
Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
JavaScript code is executed during the page loading or when the browser fires an event:
2-
- All statements are executed at page loading
3-
- Some statements just define functions that can be called later
4-
- No compile time checks
1+
JavaScript code is executed during page loading or when the browser fires an event. All the statements in JavaScript are executed at page loading, even if most of the statements are just functions that are not used until the user interacts wit the site.
52

6-
Function calls or code can be attached as "event handlers" via tag attributes:
7-
- Executed when the event is fired by the browser
3+
Function calls or code can be attached as "event handlers" via tag attributes that are then executed when the event is fired by the browser. For example, clicking a button could screen could trigger a piece of code in the JavaScript to do something. (i.e. change the color of the button). The code below has a method called `alert` that will send an alert message to the browser when it is run.
Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1 @@
1-
**Node.js** is a server-side platform that uses JavaScript
2-
- Runs the V8 JS interpreter
3-
- Allows creating end-to-end apps with JavaScript
4-
- Usable to test & learn JavaScript Syntax
1+
Node.js is a server-side platform that uses JavaScript. It is an cross-platform JavaScript run-time environment that executes JavaScript code outside the browser. Node.js is built on Chrome's V8 JavaScript Engine and helps create end-to-end apps with JavaScript. You can use Node.js to test & learn JavaScript Syntax locally on your terminal.
Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
1-
Visit the Node.js website: https://nodejs.org/
2-
- **Next** -> **Next** -> **Next** -> …
3-
- Make sure Node.js is added to **PATH**
4-
- Node.js is installed on the machine and can be used through the CMD/Terminal
5-
- In the CMD/Terminal run `node -v`
6-
- Should return the version, if node is installed and working
7-
8-
- Go to **Computer** -> **Properties**
9-
- Go to **Advanced system settings**
10-
- Go to **Advanced** -> **Environment Variables**
11-
- Go to **System Variables** -> **Path** -> **Edit**
12-
- Add to the end:
1+
Steps for installing Node.js on Windows:
2+
3+
1. Visit the Node.js website: https://nodejs.org/
4+
5+
2. Download Node.js to your computer
6+
7+
3. Make sure Node.js is added to PATH
8+
9+
4. In the CMD/Terminal run `node -v`, which should return the version of you node if node is installed
10+
11+
5. Go to Computer -> Properties
12+
13+
6. Go to Advanced system settings
14+
15+
7. Go to Advanced -> Environment Variables
16+
17+
8. Go to System Variables -> Path -> Edit
18+
19+
Add to the end of the file:
20+
1321
```
1422
;C:\Program Files\nodejs\
1523
```
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
It probably already exists.
1+
Installing Node.js to your Mac/Linux:
22

3-
Otherwise
4-
- Open `~/.bashrc` (or `~/.zshrc`)
5-
- Find the Node.js path
6-
- Usually it is `/usr/bin/node`
7-
- Add the Node.js path to `~/.bashrc`
3+
Node.js probably already exists on your Mac/Linux. If not, go to the Node.js site and download it there. If you have an older version of Node.js, also go to the website to download the latest stable release. If you cannot find the Node.js even after installing it, check your bash profile and make sure Node.js exists as a PATH variable.
Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
The **JavaScript** syntax is similar to **C#**
1+
If you've ever learned C-Sharp, JavaScript syntax shouldn't be a problem for you. Otherwise, the list below gives you a rough idea of the syntax used in JavaScript.
2+
3+
Syntax used for:
4+
25
- Operators (`+`, `*`, `=`, `!=`, `&&`, `++`, …)
3-
- Variables (typeless)
6+
- Variables (`var myVariable = 5`)
47
- Conditional statements (`if`, `else`)
58
- Loops (`for`, `while`)
69
- Arrays (`my_array[]`) and associative arrays (`my_array['abc']`)
7-
- Functions (can return value)
10+
- Functions (`function myFunction{}`)
11+
- can return value
Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1 @@
1-
Standard Pop-up Boxes:
2-
- Alert box with text and **[OK]** button
3-
- Just a message shown in a dialog box:
4-
- Confirmation box
5-
- Contains text, **[OK]** button and **[Cancel]** button:
6-
- Prompt box
7-
- Contains text, input field with default value:
1+
There are three standard pop-up boxes, alert box, confirmation box, and prompt box. The alert box contains text and an "OK" button that shows a message in a dialog box. The confirmation box contains text, an "OK" button, and a "cancel" button. The prompt box contains text and an input field with a default value. Run the program below to see all three pop-up boxes one by one.

01_Introduction to JavaScript Development/04_Standard Javascript Objects/01_Built-In Browser Objects/00_.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,6 @@ The browser provides some read-only data via:
77
- `screen`
88
- Holds the user’s display properties
99
- `browser`
10-
- Holds information about the browser
10+
- Holds information about the browser
11+
12+
These objects will only be used if you were to work with HTML and websites.
Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
The `Math` object provides some mathematical functions.
1+
The `Math` object provides some mathematical functions such as rounding, exponents, sine, cosine, tangent, etc. These functions may or may not benefit you depending on the program you are writing and the intended use.
2+
3+
The functions `Math.random()` and `Math.floor` are shown below in the sample code to illustrate a random number generator for numbers in between 1 and 100. There are many other functions you can use in the Math Object that are documented online at your disposal. Make sure you always call the function using `Math.someMethod()`, not just `someMethod()`. You will not be able to use the functions in the Math Object without referencing it in your code. Play around with the random number generator below and try to print random numbers in between 50 to 100 instead of 1 to 100.
Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
The `Date` object provides date / calendar functions:
1+
The `Date` object provides date / calendar functions as shown below. The default output of the `Date()` looks something like this:
2+
3+
Fri Aug 17 2018 18:16:34 GMT+0800 (Hong Kong Standard Time)
4+
5+
The code below shows three examples of the use of Date object. The second and third example uses `setTimeOut()` and `setTimeInterval()`, two advanced methods that will help you continuously run a function over a certain interval or to create your own timer tell the program when to run a certain function. We will not go in depth with the two methods, but feel free to research these two methods if you are interested as it could potentially help you in the future if you ever work with websites.
Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
Modern browsers have **JavaScript** console where errors in scripts are reported
2-
- Errors may differ across browsers
1+
Debugging is the act of identifying and fixing errors in your program. Modern browsers have JavaScript console where errors in scripts are reported. This can be found via right clicking the site and selecting "Inspect Element". You will then see a console screen where errors are printed (if any).
32

4-
Several tools to debug **JavaScript**
5-
- Microsoft Script Editor
6-
- Add-on for Internet Explorer
7-
- Supports breakpoints, watches
8-
- **JavaScript** statement **debugger**; opens the script editor
3+
Errors may differ across browsers as each browser has their own JavaScript Engine. There are several tools you can use to debug JavaScript. Microsoft Script Editor is a convenient add-on for Internet Explorer that supports breakpoints and watches for debugging. If you are using other browsers, debugging it locally own your computer or searching for an add-on or a online text editor is how you would approach debugging. Firefox has Firebug, which we will talk about in the next section.
Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
Firefox add-on for debugging JavaScript, CSS, HTML
2-
- Supports breakpoints, watches, **JavaScript** console editor
3-
- Very useful for CSS and HTML too
4-
- You can edit all the document real-time: CSS, HTML, etc
5-
- Shows how CSS rules apply to element
6-
- Shows Ajax requests and responses
7-
- **Firebug** is written mostly in **JavaScript**
1+
Firefox has a convenient add-on for debugging JavaScript, CSS, HTML. Firebug supports breakpoints, watches, and has a JavaScript console editor for JavaScript debugging.
2+
3+
You can edit the HTML, CSS, and JavaScript documents real-time and to see how the three different pieces of code interact with each other to create the site. For more advanced users, Firebug also shows Ajax requests and responses. Interestingly enough, Firebug is written mostly in JavaScript.
Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
**JavaScript** can also be debugged with **Node.js**
2-
- Open Terminal/CMD
3-
- Run
4-
```bash
5-
npm install -g node-inspector
1+
As mentioned previously, JavaScript can also be debugged locally with Node.js. Node.js has it's own debugger that can be called using the `inspect` keyword. Here's how you will debug a JavaScript file:
2+
3+
1. Open Terminal/CMD
4+
2. Navigate to the folder of the file to debug
5+
3. Run
66
```
7-
- In CMD/Terminal, navigate to the folder of the file to debug
8-
- Run
9-
```bash
10-
node-debug FILE_TO_DEBUG
7+
node inspect filename.js
118
```
12-
- A browser opens with the code, and it can be debugged
9+
4. You will then see the debugging screen. This is what you will be using later. Type control c twice and exit the debugger.
10+
5. Go back to your JavaScript file and add the statement `debugger;` to create a breakpoint
11+
6. Run step 3 again and a breakpoint will occur

01_Introduction to JavaScript Development/05_Debugging in JavaScript/03_JavaScript Console Object/00_.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
The `console` object exists only if there is a debugging tool that supports it
2-
- Used to write log messages at runtime
1+
If you are editing JavaScript locally or through node.js, you can also use the `console` object. As shown in previous examples, `console.log` prints something to the console when called. If you are familiar with Java, it's just like debugging with the `System.out.print()` statement.
2+
3+
You can use this function to write log messages at runtime to identify where the error in the program occurs. Below are some methods of the console object:
34

4-
Methods of the `console` object:
55
- `debug(message)`
66
- `info(message)`
77
- `log(message)`

0 commit comments

Comments
 (0)