You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Improvment suggestions after august workshop (#37)
* Some updates to the instructions, a lot is just markup.
* Suggestions to improve level1.js
* A few more details to level1.js
* Suggestions to improve level2.js
* Suggestions to improve level3.js
Copy file name to clipboardExpand all lines: README.md
+32-20Lines changed: 32 additions & 20 deletions
Original file line number
Diff line number
Diff line change
@@ -6,48 +6,60 @@ An introductory JavaScript workshop for beginners.
6
6
7
7
Check on slides, click [here](https://goo.gl/5HNvxD)
8
8
9
-
10
9
## Feedback
11
10
12
11
To leave feedback click [here](https://docs.google.com/forms/d/e/1FAIpQLSdoOaviRIqsDPi1ZPTvTDVEzeQrSiEoDhsS0tmAIQZmkLkvxw/viewform?c=0&w=1)
13
12
14
-
15
13
## How to use
16
14
17
-
If you are familiar with git, you can clone this repository to your machine and simply start working
18
-
through files starting from README.md file, after that jump to js/level1.js file.
15
+
If you are familiar with git, you can clone this repository to your machine.
19
16
17
+
If you don't know what git is, relax. You can easily download the folder on your machine - go to
18
+
the 'releases' tab over the yellow line on the page and click the link 'Source code (zip)'.
19
+
Unzip it (Extract) and open the folder, don't open files inside the .zip.
20
20
21
-
If you don't know what git is, relax. You can download the folder on your machine - go to
22
-
'releases' tab over the yellow line on the page and download folder 'Source code (zip)'.
23
-
Unzip it and start from README.md file, after jumping to js/level1.js file.
21
+
Start from the `README.md` file, then open `js/level1.js`.
24
22
23
+
To see the web-page in your browser, open `index.html` by double clicking on it, if you see
24
+
an option 'open in browser' then choose that. Preferably use Chrome, but Firefox and Safari will work as well.
25
25
26
-
To open the web-page in your browser go to _index.html_ file and double click on it, you will see
27
-
an option 'open in browser'. Preferably use Chrome, but Firefox and Safari will work as well.
26
+
Follow the instructions in `js/level1.js` and type code in your Text Editor (this is where your code lives and you can write, edit and delete code).
28
27
29
-
Follow the instructions in _level1.js_ file and type code in your Text Editor (it is where your code lives and you can write, edit and delete code). In order to see anything that you console.log(), you need refresh the web page and the result will be in web console on the page (you can directly write javaScript code here as well and see the result straight away, but as soon as you refresh the page all the code will be gone, that is why we use Text Editor).
28
+
In order to see anything that you edit, you need to save the file and refresh the web page. The result of any console.log() statement will be in the _browser console_.
|**Chrome**| Any | right-click the page and select `Inspect`, switch to `Console` tab in the developer tools |
34
+
|**Chrome**| Mac | press `COMMAND + OPTION + J`|
35
+
|**Chrome**| Windows | press `CONTROL + SHIFT + J`|
36
+
|**Firefox**| Any | right-click the page and select `Inspect Element`, switch to `Console` tab |
37
+
|**Firefox**| Mac | press `COMMAND + OPTION + K`|
38
+
|**Firefox**| Windows | press `CONTROL + SHIFT + K`|
39
+
|**Safari**| Mac | go to the menu bar and open `Safari > Preferences > Advanced >` and tick the box `Show Develop Menu` at the bottom, restart Safari, now you can right-click on the page and select `Inspect Element` to see the console. |
40
+
|**Safari**| Mac | press `COMMAND + OPTION + C`|
31
41
42
+
The console/developer tools will appear at the bottom or on the right side of the screen.
43
+
44
+
You can write JavaScript code directly here and see the result straight away, but as soon as you refresh the page all the code will be gone, this is why we use a Text Editor in order to save our code.
32
45
33
46
## Structure
34
47
35
-
-CSS folder - contains css files that are responsible for styles and how our project looks on the web.
48
+
-`css` folder - contains css files that are responsible for styles and how our project looks on the web.
36
49
37
-
- img folder - a place where we can store images that we will use on our web-page.
50
+
-`img` folder - a place where we can store images that we will use on our web-page.
38
51
39
-
-Js folder contains javaScript files that makes our project work, it defines content and makes a static page functional.
52
+
-`js` folder contains JavaScript files that makes our project work, it defines content and makes a static page functional.
40
53
It contains 3 files:
41
-
-_level1.js_ - basics with explanations(comments, variables, functions, if/else statements)
42
-
-_level2.js_ - more complex javaScript with explanations(arrays, loops)
43
-
-_level3.js_ - html, css and how manipulate them with javaScript (selectors)
44
-
45
-
-_index.html_ - a file responsible for the structure of our project
54
+
-`level1.js` - basics with explanations (comments, variables, functions, if/else statements)
55
+
-`level2.js` - more complex JavaScript with explanations (arrays, loops)
56
+
-`level3.js` - html, css and how manipulate them with JavaScript (selectors)
46
57
47
-
-_Readme.md_ - a file with explanations and any information about the project, how to run it, what it is for etc
58
+
-`index.html` - a file responsible for the structure of our project
48
59
49
-
-_cheat-sheet.md_ - a file with a qui
1E79
ck overlook for key namings and their explanations
60
+
-`Readme.md` - a file with explanations and any information about the project, how to run it, what it is for etc
50
61
62
+
-`cheat-sheet.md` - a file with a quick overlook for key namings and their explanations
Comments are some notes that you can leave for yourself or another person, a note that a computer will not read. You can write a comment on a new line or on the same line after code as so:
47
+
Comments are notes that you can leave for yourself or another person, a note that a computer will not read. You can write a comment on a new line or on the same line after code as so:
54
48
55
49
```
56
-
// I’m your comment
50
+
let variableName; // I’m your comment
57
51
```
58
-
Single line comment starts with `//`
59
-
Multi line comment are placed between `/* .. */`
60
-
52
+
Single line comments start with `//` and continue for the entire line
53
+
Multi line comments are placed between `/* .. */` and can end at any point on a line
61
54
62
55
## function
63
56
64
-
A separable, reusable piece of code. It takes some input, does some manipulation on it and returns us an output.
65
-
57
+
A separable, reusable piece of code. It takes some input, does some manipulation on it and returns an output.
66
58
67
59
### to declare function
68
60
@@ -72,19 +64,18 @@ To create a function
72
64
73
65
A value input that functions can accept
74
66
75
-
76
67
## if/else statement
77
68
78
-
`if` used to decide which lines of code to execute, `else` - to give alternative set of instructions.
69
+
`if`is used to decide if lines of code should be executed, `else` - gives an alternative set of instructions.
79
70
80
-
Example:
71
+
Example:
81
72
82
73
```
83
74
if (x > 5) {
84
75
console.log("X bigger than 5");
85
76
}
86
77
else {
87
-
console.log("X smaller than 5");
78
+
console.log("X smaller than or equal to 5");
88
79
}
89
80
```
90
81
@@ -94,53 +85,46 @@ else {
94
85
95
86
It repeats code over and over again until some condition is met.
96
87
97
-
98
88
### for loop
99
89
100
-
This loop is similar to ‘while loop’, just with a set amount of repetition. You declare counter in the statement as so:
90
+
This loop is similar to ‘while loop’, just with a set amount of repetition. You declare counter in the statement as so:
101
91
102
92
```
103
93
for (let i = 0; i < 5; i++) {
104
94
do something 5 times
105
95
}
106
96
```
107
97
108
-
109
98
### infinite loop
110
99
111
-
A loop that does not stop and it’s a loop that you need to avoid. Each loop should have some condition so it can stop.
100
+
This is an error which means that a loop does not stop.
112
101
102
+
In order to avoid this error each loop should have some condition so it can stop, and contain some way to trigger the condition.
113
103
114
104
## object
115
105
116
106
A collection of properties
117
107
118
-
119
108
## event
120
109
121
110
A type of object that is created when a user interacts with a web page. For example, JavaScript creates an event when a user clicks on a button.
122
111
123
-
124
112
## CSS
125
113
126
114
Stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen. It is presentation.
127
115
128
-
129
116
## HTML
130
117
131
118
Stands for Hyper Text Markup Language. It is a structure of the elements on the page.
132
119
133
-
134
120
## DOM
135
121
136
122
Stands for Document Object Model. It defines the logical structure of documents and the way a document is accessed and manipulated.
137
123
138
-
139
124
## scope
140
125
141
126
Scope is the set of variables, objects, and functions that you can access.
142
127
143
-
144
128
## console
145
129
146
-
A method of interacting with the system. In order to write to the browser console, you could use console.log(‘Hello World’). This would write Hello World in the browser console.
130
+
A method of interacting with the system. In order to write to the browser console, you could use console.log(‘Hello World’). This would write Hello World in the browser console.
Copy file name to clipboardExpand all lines: index.html
+5-4Lines changed: 5 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -21,15 +21,16 @@ <h2>Let's do some interactive coding today!</h2>
21
21
<main>
22
22
<div>
23
23
<p>On <ahref="https://www.google.com/chrome/browser/desktop/index.html">Chrome</a> and <ahref="https://www.mozilla.org/en-GB/firefox/new/">Firefox</a>,
24
-
to open the Browser Console, invoke the context/rightclick menu and select <i>'Inspect'</i>. The console will
24
+
93C6
to open the <i>Browser Console</i>, right-click the page and select <i>'Inspect'</i>. The console will
25
25
appear at the bottom or on the right side of the screen.</p>
26
26
<p>If you're ready for a shortcut, press <i>'<abbrtitle="Command">CMD</abbr>+<abbrtitle="Option">OPT</abbr>+J'</i>
27
27
on Mac, or <i>'F12'</i> on Windows</p>
28
-
<p>On <ahref="https://support.apple.com/en-au/HT204416">Safari</a>, go to <i>'Safari > Preferences > Advanced >'</i>
29
-
and tick the box Show Develop Menu in menu bar, restart Safari, and now you can double click on the page and
28
+
<p>On <ahref="https://support.apple.com/en-au/HT204416">Safari</a>, go to the menu bar and open <i>'Safari > Preferences > Advanced >'</i>
29
+
and tick the box <i>'Show Develop Menu'</i>, restart Safari, now you can right-click on the page and
30
30
select <i>'Inspect Element'</i> to see the console.</p>
31
31
</div>
32
32
</main>
33
+
33
34
<footer>
34
35
<div>
35
36
<ul>
@@ -55,7 +56,7 @@ <h2>Let's do some interactive coding today!</h2>
0 commit comments