JavaScript Lessons 2023 V2
JavaScript Lessons 2023 V2
https://youtu.be/7vyHA0aODeU
code example
function outerFunction(x) {
var innerVar = 4;
function innerFunction() {
return x + innerVar;
}
return innerFunction;
<!DOCTYPE html>
<html>
<head>
<title>Learn JavaScript</title>
function outerFun(x){
const val2 = 10;
function innerFun(){
return x + val2 + val1;
}
return innerFun;
}
for(let x=0;x<10;x++){
console.log(outerFun(x+2)());
}
https://youtu.be/wdoIV_09xAc
Code Example :
const object = { name: 'John Doe', age: 35 };
Code Example :
const json = '{"name":"John Doe","age":35}';
const object = JSON.parse(json);
console.log(object.name); // "John Doe"
There are several ways to get JSON data with JavaScript. One
common method is to use the fetch() function to make an HTTP
request to a server that returns JSON data. The fetch() function
returns a promise that resolves to a response object, from which
the JSON data can be extracted using the json() method.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
Another way to get JSON data is to load it from a local file using
the XMLHttpRequest object or the fetch() function.
output.addEventListener('click',getJsonData);
function getJsonData(){
output.textContent = 'loading.....';
fetch(url)
.then(response => response.json())
.then(data => {
myOutput(data);
})
.catch(error => {
console.error('Error:',error);
})
}
function myOutput(data){
let html = `<h1>${data.name}</h1>
<div>${data.address.street}</div>
<div>${data.address.city}</div>
<div>${data.address.state}</div>
<div>${data.address.zip}</div>
`;
data.phoneNumbers.forEach(el =>{
html += `<small>${el.type} - (${el.number})</small><br>`;
{
"name": "Laurence Svekis",
"age": 41,
"address": {
"street": "10 Main St",
"city": "New York",
"state": "NY",
"zip": 10001
},
"phoneNumbers": [
{
"type": "home",
"number": "212 123-1234"
},
{
"type": "work",
"number": "646 123-4567"
},
{
"type": "work 2",
"number": "343 133-4567"
}
]
const ul = document.createElement('ul');
output.append(ul);
build();
btn.addEventListener('click',addPerson);
function addPerson(){
const newPerson = myInput.value;
myArr.push(newPerson);
adder(newPerson);
console.log(myArr);
}
function adder(person){
const li = document.createElement('li');
li.textContent = person;
ul.append(li);
}
function build(){
<!DOCTYPE html>
<html>
<head>
<title>Learn JavaScript</title>
<style>
table{
width:100%;
}
td:first-child{
width:10%;
const myArr = [
{name:'Laurence',score:0,id:1} ,
{name:'Susan',score:0,id:2} ,
{name:'Lisa',score:0,id:3}
];
const output = document.querySelector('.output');
const btn = document.querySelector('#addNew');
const addFriend = document.querySelector('#addFriend');
const tblOutput = document.createElement('table');
output.append(tblOutput);
btn.addEventListener('click',()=>{
const myObj = {name:addFriend.value,score:0,id:myArr.length+1} ;
myArr.push(myObj );
console.log(myArr);
build();
})
function build(){
tblOutput.innerHTML = '';
myArr.forEach((ele,ind) =>{
const tr = document.createElement('tr');
tblOutput.append(tr);
const td1 = document.createElement('td');
td1.textContent = ele.id;
tr.append(td1);
const td2 = document.createElement('td');
td2.textContent = ele.name;
tr.append(td2);
const td3 = document.createElement('td');
td3.textContent = ele.score;
tr.append(td3);
tr.addEventListener('click',()=>{
ele.score++;
td3.textContent = ele.score;
})
})
You can also use any of the above methods to add CSS styles,
classes and attributes to the newly created elements.
output.insertAdjacentHTML('beforebegin','<p>Para1</p>');
output.insertAdjacentHTML('beforeend','<p>Para2</p>');
output.insertAdjacentHTML('afterbegin','<p>Para3</p>');
output.insertAdjacentHTML('afterend','<p>Para4</p>');