Scribd
Upload
599 views

Javascript

The document contains code examples and notes from JavaScript classes. It covers various JavaScript topics like variables, data types, operators, conditional statements, functions, objects, DOM manipulation, and a rock-paper-scissors game project. Key concepts discussed include variable declaration and assignment, comparison and logical operators, if/else statements, functions, objects and properties, built-in objects like Math, JSON, localStorage, and the document object model. Methods like querySelector, getElementById, innerHTML, addEventListener are demonstrated for DOM manipulation.

Uploaded by

Eswaramoorthy Seenu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
599 views

Javascript

The document contains code examples and notes from JavaScript classes. It covers various JavaScript topics like variables, data types, operators, conditional statements, functions, objects, DOM manipulation, and a rock-paper-scissors game project. Key concepts discussed include variable declaration and assignment, comparison and logical operators, if/else statements, functions, objects and properties, built-in objects like Math, JSON, localStorage, and the document object model. Methods like querySelector, getElementById, innerHTML, addEventListener are demonstrated for DOM manipulation.

Uploaded by

Eswaramoorthy Seenu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

(18.99+20.95+7.99)*0.

4.793

Math.round((1899+2095+799)*0.1)/100

4.79

Math.floor(((1899+2095+799)*0.1)/100)

Math.round(((1899+2095+799)*0.1)/100)

alert('hello');

'hello' +3

'hello3'

'$' +20.95+7.99

'$20.957.99'

'$' +(2095+799)/100

'$28.94'

'iteam (' + (1+1) + '): $' + (2095+799)/100

'iteam (2): $28.94'

"I'm learing javascript"

"I'm learing javascript"

'i\'m learning javacsript'

"i'm learning javacsript"

alert(' hello \nman')

popup hello

man

alert('how is he\"mala asked me\" \phe is fine\"I replied\" ')

undefined

`hello`

'hello'

'purpose of backtick'

`interpolation`

'interpolation'
`iteam (${1+1}): $${(2095+799)/100}` No of iteams('+(1+1)+')total cost $'+(5+3)

'iteam (2): $28.94' 'No of iteams(2)total cost $8'

`some `no of iteams(${1+1}) cost $:${5+3}`

text` 'no of iteams(2) cost $:8'

'some \ntext'

"use\'...' by default... if we need interpolation use`...`"

"use'...' by default... if we need interpolation use`...`"

Class 05
1. Variable = a way to save values
2. Re-assign a variable
3. Created the cart Quantity feature
4. Shortcuts for re-assigning and best practices
5. Naming conventions and best practices
6. 3 ways to create a variable: let , const, var
7. Ex 2.42

Variable re assigning shortcuts

+=2 ; variable =variable +2

-=2 ; variable =variable-2

*=2 ; variable =variable*2

/=2 ; variable =variable/2

++ ; variable =variable + 1

--; variable =variable - 1

Naming Conventions

camelCase --- cartQuantity

PascalCase --- CartQuantity

kebab-case --- cart-quantity (not work in JavaScript work in html,css)

snake_case --- cart_Quantity (not work in JavaScript work in other)

'const' cant change this where as 'let' can be chaned

Class 06- BOOLIAN


1. Boolean values (true,false)
2. If-else statement
3. Comparison operation(>,<,=,….)
4. Logical operators
5. Truthy and falsy values
6. Shortcuts for if else statements

Greater than >

Less than <

>=

Equal to ===

Not equal to !==

Rock Paper Scissers

Divide 0 to 1 into three parts (0 to1/3 ; 1/3 to 2/3; 2/3 to 1) and assignee each part for R/P/S

Order of operation

1. BODMAS
2. Comparison
3. Logical operation (AND--&&-- Both are true;
4. OR || any one is true ;
5. NOT ! flip the value)

In if else all elements will be present only inside the curly brackets called ‘scopes’

‘Var’ will not obey scopes

‘Truthy’ value

False – 0 ‘’ NaN undefined null

All other are truthy value

Shortcuts for if-statement

? – ternary operator – replace for if-else

&& - Guard operator - replace if

|| - Default Operator –

! – not

const result = 7 ? 'truthy': 'falsy';


console.log (result)//shortcut fot 'if - else'

6 && console.log('res'); // shortcut for 'if'

const message = 8 &&`hello`


console.log(message)
const currency = 0 || 'USD'
console.log(currency)
Class 07- FUNCTION
Doubts
Function , return?
Function allows to reuse code

Class 08- OBJECTS


1. Objects = group related values together
2. Added a score to rock paper scissors
3. Built-in objects (JSON, localStorage)
4. More details (null, auto-boxing ,references)
5. Shortcuts( destructuring , shorthand property, shorthand method)

inside the object you can put multiple values, it is another type of value

( red – object; blue- values; pink- property)

const product ={
name : 'socks',
price: 1090
};
product.name
1. Let us group multiple values together
2. Let us use multiple values together

Object + function = method [math.random(), console.log()]

BUILD-IN OBJECTS
1. math.random()
2. console.log()
3. JSON (JavaScript Object Notation)
a. Similar to JS object
b. But with less features
c. More universal
4. localStorage
5. 401K

projects in-complete
objects group multiple values to gether
Math.random();
localStorage.setItem('score',JSON.stringify (score));
JSON.parse(localStorage.getItem('score'))
console.log()

Class 09- Document Object Model (DOM)


Lesson learned
1. DOM
2. document.querySelection(…)
3. .innerHTML
4. 3projects using the DOM
5. Onkeydown=””
a. More details about string + window object

Another built in document object

The document object represents/ models the webpage.

document.body.innerHTML = 'hello';
document.title ='good job !';

onclick = click

onkeydown = key press

Onscroll = scrolling

onmouseenter = hovering over

onmouseleave = stop hovering over and many more

window – represent the browser

Projects to be completed
1. Last two

Class 10- Rock-paper-scissers


Lesson learned
1. Review CSS , and added CSS to project
2. classlist
3. finished Rock Paper Scissors
4. Organize JavaScript and CSS code into separate files

You might also like