13. Introduction to JavaScript (ES6)

BootCamp by Dr.Angela

1. Introduction to JavaScript

• Why it was created : Created by Brendan Eich, To enable interactive web pages instead of only server-rendered content
• ECMAScript : A standard that defines how JavaScript should work across different environments
• JavaScript vs Java
  • JavaScript: Interpreted language (like Python, Ruby)
  • Java: Compiled language (like C/C++, Swift)
• Evolution : Initially used for front-end only, Now used for full-stack development

2. JavaScript Alerts – Adding Behaviour to Websites

• Console : Used for testing code line by line
• DevTools : Sources → Snippets → New Snippet (run full scripts)
• Basic structure : alert("Hello");
• Function + Message + Execution
• Best Practices
  • https://github.com/rwaldron/idiomatic.js
  • https://en.wikipedia.org/wiki/The_Elements_of_Style

3. Data Types

• String (use quotes), Number, Boolean (true, false)
• typeof() : Returns the data type of a value

4. JavaScript Variables

• Example : var name = "Value";
• prompt() : Displays an input popup for the user

5. Naming Conventions for Variables

• Do not use reserved keywords
• Cannot start with a number
• No spaces allowed
• Only _ and $ are allowed as special characters
• Use camelCase : First word lowercase, next words start with uppercase
• Tip : Clear console(Empty Cache and Hard Reload)

6. String Concatenation

• Use + to combine strings
  • ex) "Hello" + " " + "World"

7. String Length

• name.length; : Returns the number of characters

8. Slicing Strings

• name.slice(x, y); : Extracts characters from index x to y-1

9. Changing Case

• name.toUpperCase();
• name.toLowerCase();

10. Basic Arithmetic & Modulo

• +(Addition), -(Subtraction), *(Multiplication), /(Division), %(Modulo, remainder)
• Use parentheses () to control order

11. Increment & Decrement

• x++;(increment), x--;(decrement)
• x += y; x -= y; x *= y; x /= y;

12. Creating and Calling Functions

• Create a function : function func() {};
• Call a function : func();
• Naming rules are the same as variables
• Tip : Ctrl + F → find and replace

13. Parameters and Arguments

• ex) function getMilk(money) {}
  • Parameter: variable inside the function (money)
  • Argument: actual value passed when calling the function
• Reference : https://www.w3schools.com/jsref/jsref_floor.asp

14. Outputs & Return Values

• return : Sends a value back from the function
  • ex) function add(a, b) { return a + b; }