Skip to content

Commit daf8058

Browse files
author
Tanya Butenko
committed
main structure
1 parent 1ba144c commit daf8058

File tree

5 files changed

+422
-0
lines changed

5 files changed

+422
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.idea/

‎css/main.css‎

Whitespace-only changes.

‎index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>NodeGirls JavaScript Workshop</title>
6+
<link rel="stylesheet" href="css/main.css">
7+
</head>
8+
<body>
9+
<header></header>
10+
<section></section>
11+
<footer></footer>
12+
13+
<script src="js/level1.js"></script>
14+
</body>
15+
</html>

‎js/level1.js‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
//Level 1
2+
3+
/* Comments.
4+
Let's start with comments - notes that people can read and computers will ignore.
5+
They will help us up to guide you through the javaScript introduction journey.
6+
There is a multi-line comments, like this one and also you can leave a single line comment
7+
right in your code, example below. If you need to write some notes use comments starting with '//'
8+
*/
9+
10+
//I'm your one-line comment
11+
12+
13+
/* Let's start with getting your code on the screen.
14+
There is few ways you can do it and we will look into few of them:
15+
- console.log('Hello World!'); - this line of code will print 'Hello World!' to the browser's console.
16+
P.S: To see browser's console you can do right click in the window of you browser(Chrome, Firefox etc)
17+
and select 'Inspect' or 'Inspect element' after that a console will appear on the bottom of the page.
18+
- alert('Hello girls!'); - this line of code will pop-up a small window in your browser with text 'Hello girls!' in it,
19+
but you need to refresh opened page first.
20+
*/
21+
22+
23+
//TODO: Now try to create an alert with any phrase you like.
24+
25+
26+
27+
28+
29+
//TODO: After alert works for you, comment it out and refresh the page - it should not pop-up anymore.
30+
31+
//TODO: What you say about trying console.log your message to browser? Send any message you like.
32+
33+
34+
35+
36+
37+
/* Variables.
38+
Variable is a place to store information. To create(declare) a variable use a keyword 'var', as follows:
39+
var variableName;
40+
So, we created a variable named variableName, but it has no information/value inside, it is empty. To give value(initialize)
41+
to variable follow next step:
42+
variableName = 'Hello world!';
43+
We also can create and give value to variable in one step, as follows:
44+
var newVariable = 1;
45+
As you noticed we can give different types of values to our variables - strings, numbers, booleans etc.
46+
String - is a set of characters, word or phrase that we wrap into quotes, see 'hello world!' in previous task.
47+
Numbers - either integers or floats(decimals).
48+
Boolean - it represents logical values - True or False
49+
*/
50+
51+
//TODO: Now create two empty variable named numberOne and numberTwo
52+
53+
54+
55+
56+
/*
57+
You also can use your variables to represent information that it has inside.
58+
Example:
59+
var hello = 'Hello World';
60+
alert(hello);
61+
It will pop-up alert box with string 'Hello World!'
62+
*/
63+
64+
//TODO: Create 2 variables, 1 with your name and 2nd with your age and display them with alert pop-up box
65+
66+
67+
68+
69+
70+
//TODO: Don't forget to comment alerts if you don't want them to pop-up every time
71+
72+
73+
/* Arithmetic operators
74+
There is a bunch of different operators in programming. We will look through arithmetical operators now.
75+
They are standard arithmetical operators (+, -, /, *, etc) that you can use to do math with your numbers.
76+
Example:
77+
var sumOfNumbers = 1 + 3;
78+
alert(sumOfNumbers);
79+
It will pop-up alert box with number 4
80+
*/
81+
82+
//TODO: Create 3 variables, 1st variable named ten with value 10 inside, 2nd variable named three with value 3. And finally 3d variable named multipleOfNumbers that will be equal 1st variable multiply by 2nd variable. And in the end console or alert value of multipleOfNumbers
83+
84+
85+
86+
87+
88+
/* Functions
89+
Function is a separable, reusable piece of code. Some action that you want to do. It takes some input(arguments), do some manipulation
90+
on it and return the output with key-word 'return'.
91+
To create a function you need do following:
92+
var functionName = function(argument){
93+
return argument * 2;
94+
};
95+
So, our function will take 1 argument and return argument multiplied by 2. But for now it will do nothing as we need to call for our function.
96+
To call the function we do so:
97+
functionName(10);
98+
Now we will call our function with argument that is 10. And our function will return us 20. To see what our function
99+
returns us we can console.log it, for example.
100+
*/
101+
102+
//TODO: It's your turn to create a function.
103+
//Step 1 - Name it 'add' and pass in two argumnets (num1 and num2).
104+
//Step 2 - This function should return us a summ of num1 and num2.
105+
//Step 3 - Call the function with numbers 2 and 3. To see result you can alert it or console.log it - to be sure that it works right.
106+
107+
108+
109+
110+
111+
112+
//TODO: Great, you made it! Now let's do another function named 'subtract' and pass 2 arguments num1 and num2.
113+
//Call on it with numbers 5 and 1 and console.log the result.
114+
//PS: do you know that instead of numbers you can create variables that store those numbers and pass them as an arguments to your function, try it up.
115+
116+
117+
118+
119+
120+
121+
122+
123+
/*If-else statements
124+
What if we want our program to make a decision which function it should run? In this case we can use conditions.
125+
If spider is big, action should be - run and save your life, but if it is tiny you can simply walk away.
126+
Same with code, you can give 'if' condition to machine to make a decision what part of code to run.
127+
Structure:
128+
if(condition){
129+
do this
130+
} else {
131+
do something else
132+
}
133+
Example:
134+
var number = 7;
135+
if (number > 7) {
136+
console.log('Our number is bigger then 7');
137+
} else {
138+
console.log('Our number is smaller then 7');
139+
};
140+
*/
141+
142+
/*Comparison operators
143+
You remember we were talking about arithmetical operators and that we have different operators in programming, so
144+
here comes time to introduce you comparison operators that we can use to compare values(>, <, <=, =>, ==, !=).
145+
Most of them you know from math classes in school, some of them can be new for you, so '==' is checking equality, if two values are equal.
146+
'!=' - checks if they are not equal.
147+
PS: Don't mix up '=' and '==' as they have different meaning.
148+
*/
149+
150+
//TODO: So now we have 2 functions from previous task - add and subtract. Let's tell machine to decide what action to run
151+
//depending on arithmetical operator(+,-,/, * etc). If operator is '+' we should use add function, else - subtract function.
152+
//Step 1, create a variable called operator and let it be equal to '-'
153+
//Step 2, create if/else statement based on what operator we have,
154+
// if we have operator equal to '+' we call add function with any two numbers, else subtract function with any 2 numbers.
155+
//Don't forget to console.log it to see the result
156+
157+
158+
159+
160+
161+
162+
163+
164+
165+
166+
167+
168+
169+
170+
171+
172+
173+
174+
175+
176+
177+
/*If - else if - else
178+
Hm, but what if we have 4 arithmetical operations in our calculator? Well, we can use if - else if - else structure.
179+
Example:
180+
var number = 7;
181+
if (number > 7) {
182+
console.log('Our number is bigger then 7');
183+
} else if (number < 7){
184+
console.log('Our number is smaller then 7');
185+
} else {
186+
console.log('Our number is equal to 7');
187+
};
188+
*/
189+
190+
191+
//TODO: Let's create 2 more functions and name them divide and multiply. After that let's extend our 'if else' check that we already created by
192+
// checking if it is equal to '/' - call 'divide' function, if it is '*' call multiply function,
193+
// else console.log - "Sorry, we don't know this operator".
194+
195+
196+
197+
198+
199+
200+
201+
202+
203+
204+
205+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
206+
//Congratulations! You have finished Part 1 of JavaScript Basics! Stand up, stretch your legs, celebrate your achievement.//
207+
//Next step will be following up the instructions in advanced.js file. //
208+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

0 commit comments

Comments
 (0)