add repeat_preview_9.1-9-4-JS

Sasha-Makar · Feb 23, 2024 · f5f3c7e · f5f3c7e
1 parent ae691a4
commit f5f3c7e
Show file tree

Hide file tree

Showing 2 changed files with 215 additions and 0 deletions.
diff --git a/JS_LESSONS/PREVIEW/p_9.1-9.4/repeat/index.html b/JS_LESSONS/PREVIEW/p_9.1-9.4/repeat/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>repeat_preview_9.1-9.4</title>
+</head>
+<body>
+
+
+<!--//DOM Об'єктна модель документу-->
+
+
+<!--<div>DOM title</div>-->
+
+
+<!--<ul class="menu" id="list-1">-->
+<!--    <li>item 1 1</li>-->
+<!--    <li>item 1 2</li>-->
+<!--    <li>item 1 3</li>-->
+<!--    <li>item 1 4</li>-->
+<!--    <li>item 1 5</li>-->
+<!--</ul>-->
+
+<!--<ul class="menu" id="list-2">-->
+<!--    <li>item 2 1</li>-->
+<!--    <li>item 2 2</li>-->
+<!--    <li>item 2 3</li>-->
+<!--    <li>item 2 4</li>-->
+<!--    <li>item 2 5</li>-->
+<!--</ul>-->
+
+
+<!--//Маніпуляція DOM елементами-->
+<!--<h1>before</h1>-->
+<!--<div id="target">-->
+<!--    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi consectetur consequatur dolores magnam-->
+<!--    modi neque nihil nostrum perferendis perspiciatis, quae ratione reprehenderit sunt tempora voluptatum. Iure maxime-->
+<!--    reprehenderit tempora!-->
+<!--</div>-->
+<!--<h2>after</h2>-->
+
+
+
+
+
+<!--///Створення елементів-->
+
+<!--<div class="list"></div>-->
+
+
+
+
+
+<!--/// Рекурсія додаткове-->
+
+
+<script src="main.js"></script>
+
+</body>
+</html>
diff --git a/JS_LESSONS/PREVIEW/p_9.1-9.4/repeat/main.js b/JS_LESSONS/PREVIEW/p_9.1-9.4/repeat/main.js
@@ -0,0 +1,155 @@
+// alert(22);
+
+// let str = 'hello';
+// // debugger;
+// function reverce(str) {
+//     let s = '';
+//     for (const element of str) {
+//         s = element+s;
+//     }
+//     return s;
+// }
+//
+// console.log(str);
+// console.log(reverce1);
+// let reverce1 = reverce(str);
+
+console.log('//////////////////DOM Об\'єктна модель документу//////////////////////');
+
+
+// console.log(document);
+// console.log(document.head);
+// console.log(document.body);
+// // console.log(document.dir);
+//
+// console.log(document.head.children);
+// console.log(document.body.innerHTML);
+
+
+// let div = document.createElement('div');
+// div.innerText = 'OKTEN';
+// document.body.appendChild(div);
+
+//
+// let ul1 = document.getElementById('list-1');
+// console.log(ul1);
+//
+//
+// let menu = document.getElementsByClassName('menu');
+// console.log(menu);
+//
+//
+// for (const menu1 of menu) {
+//     console.log(menu1);
+// }
+
+// let ulList = document.getElementsByTagName('ul');
+// console.log(ulList);
+//
+// let ulList1 = document.getElementById('list-1');
+//
+// console.log(ulList1);
+// let ulList1LiCollection = ulList1.getElementsByTagName('li');
+// console.log(ulList1LiCollection);
+
+
+console.log('//////////////////////Маніпуляція DOM елементами/////////////');
+
+
+// let target = document.getElementById('target');
+// console.log(target);
+
+// console.log(target.innerText);
+//
+// target.innerText = 'Okten';
+//
+// target.style.background = 'silver';
+//
+// console.log(target.classList);
+//
+// target.classList.add('foo');
+// target.classList.add('bar');
+//
+//
+// target.classList.toggle('asd');
+// target.classList.toggle('bar');
+
+
+// console.log(target.getAttribute('id'));
+// console.log(target.getAttribute('class'));
+//
+// target.setAttribute('id', 'xxx');
+//
+//
+// console.log(target.previousElementSibling);
+//
+// console.log(target.nextElementSibling);
+//
+//
+// // console.log(target.children); html
+// // console.log(target.childNodes);  nodes
+//
+//
+// target.innerText = '<b>qwwrreqwrwrw</b>';
+//
+//
+// target.innerHTML = 'jajfoijoprijv;ojra';
+//
+// console.log(target.outerHTML);
+
+
+console.log('///////////Створення елементів/////////');
+
+
+// let div = document.createElement('div');
+// div.innerText = 'Okten';
+//
+// document.body.appendChild(div);
+
+
+
+
+// let users = [
+//     {name: 'vasya', age : 31, status : false},
+//     {name: 'petya', age : 30, status : true},
+//     {name: 'kolya', age : 29, status : true},
+//     {name: 'olya', age : 28, status : false},
+//     {name: 'max', age : 30, status : true},
+//     {name: 'anya', age : 31, status : false},
+//     {name: 'oleg', age : 28, status : false},
+//     {name: 'andrey', age : 29, status : true},
+//     {name: 'masha', age : 30, status : true},
+//     {name: 'olya', age : 31, status : false},
+//     {name: 'max', age : 31, status : true}
+// ];
+//
+// let list = document.getElementsByClassName('list')[0];
+// console.log(list);
+// for (const user of users) {
+//
+//     let h2 = document.createElement('h2');
+//     h2.innerText = user.name;
+//
+//     let p = document.createElement('p');
+//     p.innerText = user.age + ' ' + user.status;
+//
+//     list.append(h2,p);
+// }
+
+
+console.log('//////////// Рекурсія додаткове/////////////');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+