-
DOM Nedir?
- Document Object Model
-
- scipt neden alta konur?
-
innerHTML
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>- getElementsByTagName("p")
- Chaining
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");- getElementsByClassName("intro")
- Finding elements by CSS selectors
const x = document.querySelectorAll("p.intro");- Form elemanlarının alınması
<form action="/login" method="post" id="frm1">
<input type="text" name="username" id="user" value="zafer">
<input type="password" name="password" id="passw" value="1234">
</form>
<script>
const myForm = document.forms["frm1"];
let text = "";
for (let i = 0; i < myForm.length; i++) {
text += myForm.elements[i].value;
}
console.log(text);
<script>- FormData()
const myForm = document.forms["frm1"];
var object = {};
const formData = new FormData(myForm);
formData.forEach(function(value, key){
object[key] = value;
});
var json = JSON.stringify(object);- Change attribute
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "https://via.placeholder.com/140x100";
</script>- document.write
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
document.write(Date());
});
</script>- form validation
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input {
display: block;
margin-bottom: 5px;
}
.error {
color:red;
display: none;
margin-bottom: 10px;
}
</style>
</head>
<body>
<form action="/login" method="post" id="frm1" onsubmit="return validateForm()">
<input type="text" name="username">
<span class="error">Please fill</span>
<input type="password" name="password">
<span class="error">Please fill</span>
<input type="submit" value="Submit">
</form>
<script>
function validateForm () {
const myForm = document.forms["frm1"];
let isSuccess = true;
if(!myForm.username.value) {
myForm.username.nextElementSibling.style.display = 'block';
isSuccess = false;
}
if(!myForm.password.value) {
myForm.password.nextElementSibling.style.display = 'block';
isSuccess = false;
}
return isSuccess;
}
</script>
</body>
</html>- Automatic form validation
<form action="/login" method="post" id="frm1">
<input type="text" name="username" required oninvalid="this.setCustomValidity('Enter User Name Here')">
<span class="error">Please fill</span>
<input type="password" name="password" required>
<span class="error">Please fill</span>
<input type="submit" value="Submit">
</form>- Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<img id="car" src="car.png" alt="car">
<script>
const car = document.getElementById("car");
let left = 0;
const timer = setInterval(() => {
car.style.left = `${left}px`;
left+=10;
if(left + 100 >= window.innerWidth) {
clearInterval(timer);
}
}, 10)
</script>
</body>
</html>- addEventListener
document.getElementById("myBtn").addEventListener("click", alert(new Date));- Event bubbling
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>- Add event handler to window
window.addEventListener("resize", function(){
document.getElementsByTagName("body")[0].innerHTML = window.innerWidth;
});- Create elements
const paragraph = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);- Remove elements
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>- History Api
<button onclick="goToHello()">GoToHello</button>
<script>
function goToHello() {
const state = { 'page_id': 1, 'user_id': 5 }
const title = 'Hellöö'
const url = 'hello.html'
history.pushState(state, title, url)
}
</script>- Navigator API
- Cookies
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2021 12:00:00 UTC; path=/hello";- localStorage, sessionStorage(tab), websql, indexedDB
localStorage.setItem("lastname", "Smith");
localStorage.getItem("lastname");
localStorage.removeItem("lastname");- Web Worker
<div id="result"></div>
<script>
let w;
startWorker();
function startWorker() {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>-
Service workers https://mdn.github.io/sw-test/ https://github.com/mdn/sw-test/blob/gh-pages/sw.js
-
Callbacks
function sum(x, y, myCallback) {
const result = x + y;
myCallback(result)
}
sum(x, y, console.log);- Promise API
- pending
- fulfilled
- rejected
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("Hello World"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});- Fetch API
fetch("myFile.txt")
.then(x => x.text())
.then(x => document.write(x));- Async await
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("Hello World"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();- Generators
- Kitap metaforu
function* generator() {
yield 1;
yield 2;
yield 3;
}
const gen = generator(); // "Generator { }"
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3function* infinite() {
let index = 0;
while (true) {
yield index++;
}
}
const generator = infinite(); // "Generator { }"
console.log(generator.next().value); // 0
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2function * iterableObj() {
yield 'This';
yield 'is';
yield 'iterable.'
}
for (const val of iterableObj()) {
console.log(val);
}