CODE.IO
212 subscribers
47 photos
3 videos
13 files
28 links
๐Ÿš€ Welcome to Code. io! ๐Ÿ’ป
Your go-to place for coding challenges, tutorials, and tech tips! ๐Ÿง‘โ€๐Ÿ’ป๐Ÿ‘ฉโ€๐Ÿ’ป
Join us for:
๐Ÿ”ฅ Daily Coding Challenges
๐Ÿ“š Helpful Tutorials
๐Ÿ’ก Programming Tips & Tricks
๐ŸŒ Tech News & Updates

Letโ€™s code, learn, and grow together!
Download Telegram
Want to make your web pages interactive?
Mastering DOM manipulation is essential! ๐Ÿ’ปโœจ

The DOM (Document Object Model) represents the structure of your HTML page.

With JavaScript, you can:

๐Ÿ”น Access elements:
 const heading = document.getElementById("main-title");


๐Ÿ”น Change content:

heading.textContent = "Hello, DOM!";

๐Ÿ”น Update styles:

heading.style.color = "blue";

๐Ÿ”น Create elements:

const newDiv = document.createElement("div");
document.body.appendChild(newDiv);


๐Ÿ”น Listen for events:

button.addEventListener("click", () =>alert("Clicked!"));

#JavaScript #DOM #WebDev #Frontend Join For More
๐Ÿ’กThe DOM isnโ€™t part of JavaScript โ€” it's provided by the browser! JavaScript just gives us the tools to work with it. ๐Ÿคฏ
๐Ÿ˜3
When you realize security is kinda important๐Ÿ˜œ๐Ÿ˜†
๐Ÿ˜1
๐Ÿš€ JavaScript Strict Mode:

Did you know JavaScript has a "strict mode" that helps you write safer and more optimized code? ๐Ÿ”

What is 'use strict'?

Adding 'use strict'; at the top of your script or function enforces stricter parsing and error handling, preventing common mistakes.

Benefits of Strict Mode:

โœ”๏ธ Catches silent errors by turning them into throw errors
โœ”๏ธ Prevents accidental global variables
โœ”๏ธ Disallows duplicate parameter names
โœ”๏ธ Makes eval() and arguments safer
โœ”๏ธ Restricts deprecated features

How to Use It?

Simply add this at the beginning of your script or function:

'use strict';


function testStrict() {
let x = 10;
console.log(x);
}


๐Ÿ”— Pro Tip:

Always use strict mode for cleaner, more reliable JavaScript!

#JavaScript #WebDev #CodingTips programming

Code.io
Hey future devs! ๐Ÿ‘‹

Iโ€™m planning a FREE 30-day JavaScript course for absolute beginners: 1 topic/day (Variables, DOM, Projects, etc.) Daily tasks + mini-projects Zero to hero in 30 days! Would you join? Vote below! ๐Ÿ‘‡
Anonymous Poll
61%
โœ… Yes! Iโ€™m in.
16%
๐Ÿค” Maybe
23%
๐Ÿšซ Not now
๐Ÿง  Day 1: Setup and Intro to JavaScript

Setup: What we need?

1. Install Nodejs: We don't need it now but for later use to run js with out the browser.
Download here
To confirm if you installed node on your computer open cmd/powershell and type node -v and it show the current version of node

2. ๐ŸŒ Browser: I recommend chrome

For now we use the browser console
after you install chrome
ctrl + shift +j to open the console on windows
Mac: Command + Option + J
install node js
โœ…Check the if you installed node correctly
Open the console Manually or just type Ctrl+Shift+J๐Ÿ™ƒ
Welcome to the console โ€” where the magic begins! โœจ
Got any questions about the basic setup? Drop them in the comments below!๐Ÿค“
๐ŸŒŸ What is JavaScript?

JavaScript is a programming language used to make websites interactive.
While HTML builds the structure and CSS styles it, JavaScript brings it to life.

๐Ÿง  What can JavaScript do?
Show alerts and messages
Handle button clicks
Create games
Validate forms (like checking if a name was entered)
Change content on the page without reloading

๐ŸงชExample:
alert("Hello, world!"); // Try this one on your console.
๐Ÿ”ธ JavaScript Execution

Inline โ€“ inside HTML tags (not recommended for maintainability)
Internal โ€“ inside <script> tags in the HTML file
External โ€“ linked via .js files (best practice)

Browsers ๐ŸŒ like Chrome interpret and run JavaScript instantly like we are doing right now.
๐Ÿง  JavaScript Data Types

In JavaScript, data types tell us what kind of data weโ€™re working with. There are two main categories:

๐Ÿ”น 1. Primitive Types

String โ€“ Text
๐Ÿ‘‰ "Hello"
Number โ€“ Numbers
๐Ÿ‘‰ 42, 3.14
Boolean โ€“ True or false
๐Ÿ‘‰ true, false
Undefined โ€“ A variable that hasnโ€™t been given a value yet
๐Ÿ‘‰ let x;
Null โ€“ Intentionally empty
๐Ÿ‘‰ let y = null;


2. Non-Primitive (Reference) Types

Object โ€“ A collection of key-value pairs
๐Ÿ‘‰ { name: "John", age: 25 }
Array โ€“ A list of values
๐Ÿ‘‰ [1, 2, 3, 4]
Function โ€“ Reusable blocks of code
๐Ÿ‘‰ function greet() { console.log("Hi!") }
Checking Data Types
To check the data type of a certain variable, we use the typeof operator.
Comments

Comments are important in making your code more readable. There are two ways of commenting:

Single line commenting
Multiline commenting


// commenting the code itself with a single comment
// let firstName = 'Yared'; single line comment
// let lastName = 'M'; single line comment


Multiline commenting:

/*
let location = 'AddisAbaba';
let age = 200;
let isMarried = false;
This is a Multiple line comment
*/
๐Ÿง  JavaScript Variables

Variables are containers that store data in memory. where we keep different types of data (like numbers, text, etc.).

๐Ÿงช Declaring Variables
let โ€“ when the value can change

const โ€“ when the value wonโ€™t change


โ—๏ธ Avoid using var โ€“ it's outdated and can lead to bugs due to weird behavior (weโ€™ll talk about that later in scope).

Example:
let age = 25; // can be updated later
const PI = 3.14; // constant value, doesn't change

โœ… Rules for Naming Variables

To create valid variable names, follow these rules:

No starting with numbers

โŒ 1name โ†’ โŒ
โœ… name1 โ†’ โœ…

Only letters, digits, $, and _ are allowed

โŒ my-name โ†’ โŒ
โœ… my_name or myName โ†’ โœ…

Use camelCase (recommended)

โœ… userName, totalAmount

No spaces

โŒ user name โ†’ โŒ
โœ… userName โ†’ โœ…
Day 1 Exercise๐Ÿ‘Œ๐Ÿพ
Data Types in JavaScript
โค2๐Ÿ‘1
๐ŸŸฅ๐ŸŸฅJOIN OUR DISCUSSION GROUP๐ŸŸฅ๐ŸŸฅ
https://t.me/code_IO_Et
๐Ÿ“ฝ Looking for YouTube channels but donโ€™t know which ones to follow?
We got you covered! ๐Ÿ“ฝ


๐Ÿ’ก Here's a curated list of YouTube channels we highly recommend for learners:

๐Ÿ”— Traversy Media
๐Ÿ”— Net Ninja
๐Ÿ”— Fireship
๐Ÿ”— Web Dev Simplified
๐Ÿ”— Anson The Developer
๐Ÿ”— Programming With Mosh
๐Ÿ”— Telusko
๐Ÿ”— Amigos Code
๐Ÿ”— Derek Banas

๐Ÿ“Œ Join our Telegram channel for more awesome resources and updates!

๐Ÿ”— Click here to join
๐Ÿ‘2