Scribd
Upload
4 views10 pages

JavaScript Tutorial 10 Pages

This document provides an introduction to JavaScript, covering its importance in web development, basic syntax, and fundamental concepts such as variables, data types, operators, loops, functions, arrays, objects, DOM manipulation, events, and asynchronous programming. It emphasizes best practices for writing JavaScript code and suggests further study in modern frameworks and tools. The document serves as a comprehensive guide for beginners looking to understand and utilize JavaScript effectively.

Uploaded by

Tina
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views10 pages

JavaScript Tutorial 10 Pages

This document provides an introduction to JavaScript, covering its importance in web development, basic syntax, and fundamental concepts such as variables, data types, operators, loops, functions, arrays, objects, DOM manipulation, events, and asynchronous programming. It emphasizes best practices for writing JavaScript code and suggests further study in modern frameworks and tools. The document serves as a comprehensive guide for beginners looking to understand and utilize JavaScript effectively.

Uploaded by

Tina
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

1.

JavaScript Introduction
JavaScript is one of the core technologies of the web. Together with HTML and CSS, it allows developers to
HTML structures content, CSS styles it, and JavaScript adds behavior such as clicks, animations, validation

Why learn JavaScript?


• Runs in every modern browser
• Useful for front-end and back-end development
• Large ecosystem and community
• Great career value

Basic example:
<script>
alert("Hello World");
</script>
2. Variables and Data Types
Variables store information for later use.

Use:
let name = "Tina";
const age = 30;
var oldStyle = true;

Common data types:


• String
• Number
• Boolean
• Null
• Undefined
• Object
• Array

Template strings:
let msg = `Hello ${name}`;
3. Operators and Conditions
Arithmetic:
+, -, *, /, %

Comparison:
==, ===, !=, >, <

Logical:
&&, ||, !

if (age >= 18) {


[Link]("Adult");
} else {
[Link]("Minor");
}

Use === when possible because it checks both type and value.
4. Loops
Loops repeat actions.

for (let i = 0; i < 5; i++) {


[Link](i);
}

let n = 0;
while (n < 3) {
n++;
}

for...of works well with arrays:


for (const item of [1,2,3]) {
[Link](item);
}
5. Functions
Functions group reusable logic.

function add(a, b) {
return a + b;
}

const multiply = (a, b) => a * b;

Benefits:
• Reuse code
• Improve readability
• Easier testing

[Link](add(2,3));
6. Arrays and Objects
Arrays store lists:
const fruits = ["apple","banana"];

Objects store key-value data:


const user = {
name: "Tina",
role: "PM"
};

Access:
[Link]
fruits[0]

Useful methods:
push, pop, map, filter, find
7. DOM Manipulation
DOM means Document Object Model.

Select elements:
const btn = [Link]("#save");

Change content:
[Link] = "Saved";

Add event:
[Link]("click", function() {
alert("Clicked");
});
8. Events and Forms
JavaScript is often used in forms.

const form = [Link]("form");

[Link]("submit", function(e) {
[Link]();
[Link]("Form blocked for validation");
});

Common events:
click, change, input, submit, keydown
9. Async JavaScript
Some tasks take time, like API calls.

fetch("/api/data")
.then(r => [Link]())
.then(data => [Link](data));

Modern style:
async function load() {
const r = await fetch("/api/data");
const data = await [Link]();
}
10. Best Practices
• Use const by default, let when values change
• Prefer === over ==
• Write small reusable functions
• Use meaningful variable names
• Handle errors with try/catch
• Keep code formatted consistently
• Learn browser dev tools

Next steps:
Study ES6, modules, Vue, React, [Link], and testing.

You might also like