Course's Objectives 1. What is JavaScript capable of. Of which parts it is comprised. Where it can be used outside of the web apps, and how it is structured in the web app landscape? 2. How many possible ways exist to include it in our HTML document? How are these ways called and which is the most preferred and why? 3. What is the console and why should we care?  4. How to add JavaScript comments?  5. What are data types and why it important to know them? 6. What are variables? What are they good for?

What can i do with JavaScript?   1. Add Interactivity to your web pages. With JS you can make your application accept input from the user and make something with it. That means you can make your app think, make decisions and act differently depending on the input it receives. This input can be anything, user preferences or even sensitive data that comes from a web form, cookies, whcih browser the user uses to access your app and many many more. 2. Communicate with the server. Send data to a server, thus you can save the information that you have gathered from the user into a safe place. If the user comes back you can retrieve this data and offer him based on that a more 'personalized' experience. Authenticate users, so they can perform actions to your application only after they have logged in. 3. Manipulate data, transform it, apply changes or make calculations and create an ending result. 4. Present this result to the end user. This is not exactly part of JS as a language but for now it is well connected to it.    Good to know: i) High-level programming language ii) Nothing to be confused with Java (entirely different languages) iii) Uses C-like syntax (familiarities with c, c++, c# and Java, but not Ruby or Python).  

JavaScript Content   JavaScript unofficially is comprised of 2 parts.  The language itself, or the 'Logic' core part, and a bunch of methods that deal with DOM manipulation (those are called Web API's). How to deal with HTML elements and CSS properties in other words. The logic part is mandatory to learn in order to make the necessary calculations, transformations or alteration in terms of data, make decisions, execute code periodically and many more. In order to print these results for debugging purposes, a developer normally uses browser's console. Attention: The logic part is necessary to be mastered before proceeding to the presentation part, since the latter uses many, if not all the functionalities of the first part to do it's job. Once the logic part is mastered instead of presenting the results to console and to ourselves we need to learn how to present them to the end user, by appending the result to the page. This is done by the 'presentation' part or better the Web API's part.

How to connect JS with our HTML document?   There are 3 ways to include a JS script to your webpage. Inline, internal and external. Let's take a look at each,and see how. 1. Inline JavaScript. Include different javascript code for every html element. Highly inefficient and not recommended. Wasted performance. Direct connection though. Take notice that you must have placed an external script to the head of your HTML file (see external js for that).

Internal JavaScript A second way is to include a <script> tag inside your html document. This provides a JavaScript execution context. Inside the opening and closing <script> tags, we can embed our JS code. Note: If you want to apply some JS code that interacts and alters HTML elements on the page, you need to include the <script> tag AFTER  the elements have been loaded! 

External JavaScript file   Writing JavaScript on it's own file and call this file at the end gives us a massive performance boost, as we don't affect  the presentation and the appearance of our page with scripts and code that it could run later. As the picture suggests, we introduce a <script> tag by specifying the source path. There inside we write exclusively JS without mixing documents, languages and technologies.

Make console your best friend Console is the place where browser gives us the opportunity to run, debug and inspect the process of our JS code. It's a very common place to live and it's highly used for testing purposes. We can access console directly from the browser developer tools (depending on the browser you use, ctrl + shift + i for most of them). Through JS script we can run the function console.log() in order to print something directly to the console. What goes inside the parenthesis is exactly what will be printed.

Get familiar with console Exercise yourself by printing to console your age at once, then your name. Do this one time by using internal JS and one by using totally external. Take care of the connection from the beginning and see the results. p.s. Pay attention to different data types!

JS Comments   Javascript comments fulfill the same purpose with HTML and CSS comments. We write comments only to document our code, so if another member of our team has to read our code, in order to go further, doesn't have to spend much time understanding it. The comments agains are not going to be executed, and they will be ignored  during execution phase. There are 2 ways for writing a JS comment:   a) A Single line comment: // This is a comment b) A multi line comment: /* See picture above for that, this is multi-line comment, got it? */

Arithmetic Operators One of the most basic operations we can perform with JS is Math operations. Exactly like in Math, in order to perform different operations we use different operators. These are the most commonly used Arithmetic JS operators, that allow us to perform basic math.   1)  +   For addition 2)  -   For subtraction 3)  *   Multiplication 4)  /   Division 5)  %   The remainder of the division. This is called as the  modulo operator and has nothing to do with percentage.  p.s. When your operation is comprised of more than one operations, then the order of precedence is the same as in regular math. Multiplication and division, first addition and subtraction last. You can change the order of execution by grouping operation inside parentheses like in regular math.  You can take a look at the full JS list operators order of precedence list here. There are additionally two more operators, the increment and the decrement operator. These are very useful while working with numbers, and we want to update the value of number to what it was until now, plus one. Then we can use the ++ sign in front of the variable.  For example: var a = 10; a++; console.log(a) // prints 11. The line a++ is equivalent to a = a + 1, so not only increases the value, but also assigns the value to variable in order to update it. That's why increment and decrement operators are assign type operators and not strictly arithmetic, although they perform an arithmetic operation partially. The same for the decrement operator (though -- is used instead) to decrease the value by one. * Perform 3 actions for each operator specifically and print the results to console. Before every new operator, comment out what exactly does the operator that follows. At the end you should have 15 logs to console and 5 comments. 

Working with strings   Strings are a different data type. Strings is a series of symbols added together. These symbols can be anything, letters, special  characters and even numbers. A string is initiated by being inside quotes (' '). It doesn't matter if they are single or double quotes, as long as you stick to the rule that you use as a closing quote, the same type that you used as an opening quote. Whatever lies inside the quotes will be printed exactly as it is. #what_you_see_is_what_you_get   Print 5 strings as they are to the console. Then print strings that represent a math operation inside the quotes? What can you tell? Do you see the result of the operation or the string itself?   Attention! Try the string concatenation '+' operator. Is there any difference when working with numbers and when working with strings? Why? Print 3 times an addition between: 1) A number and a number 2) A String and a number 3) A string and a string   What are the results?

The 'Typeof' keyword   JS gives us the opportunity to check for the type of data of every data structure when we want. This is done by the typeof keyword and is followed by the value. The returned value is the name of the type of the value. For example 'string', or 'number' etc. ex. console.log(typeof 10); // returns "number" Bring the last exercise with the 3 different concatenations, but modify the code in such a way, so you print the type of the result instead of the result itself. What can you see?

Creating Variables   Variables act like a placeholder. Instead of typing values all the time again and again we can create variables and store values inside them. Then instead of typing again the value we can fetch the value by calling the variable's name. Each variable must have an identifying name, then we can assign a value to it by using the '=' operator. This takes whatever lies to the right part of the equation and assigns this value to the name of the variable to the left.    In order to retrieve information that has been stored to a variable you just call the variable with it's own name. Variables are created with the use of var keyword, followed by the name of the variable and then the assignment operator with the corresponding value. For example:  var myAge = 30; var myKidsAge = 10; var jakeBecameFatherAt = myAge - myKidsAge; console.log(ageIBecameFather);   Notice that a whole operation's result can be also stored into a variable, thus we don't need to call the whole operation again. Just the variable which holds the result of it. There are some rules when it comes to JavaScript variable creation. The most important are: 1. JavaScript is case-sensitive. Be careful of uppercase or lowercase letters. The variables must be referenced exactly as they were named. 2. You are allowed to start with a letter or _ (underscore), but anything else is prohibited.  3. Your variable name cannot be a JavaScript reserved keyword. Find more about this in the link below. http://www.informit.com/articles/article.aspx?p=131025&seqNum=3   Variables can be reassigned a value at any point without the var keyword. Var keyword is being used only for the initialization of the variable. Of course variables can hold values of different variables. (Only exception regarding the re-assignment part is the const keyword, but nothing to concern us for now).  // Things to do next: Add a console.log after creating each variable and check the data type of each variable this time. After that, create a new script that converts 5 different temperatures of your choice and returns the equivalent degrees in Kelvin. Given that a kelvin temperature is the celsius temperature with 273 degrees added. Find if a number is an odd number or an even number with what you have learned today. You need to know some math to solve this (and a specific operator maybe).    

What comes next?   1. Comparison operators 2. Boolean values 3. Make decisions 4. If statements  5. Nested if statements 6. Switch case breaks 7. Ternary operators