объявление переменной в js
— — — — — — — — — — — — — — — — — —
let , var, const где let››var (лучше)
Разница между let и var заключается в области видимости переменных, которые они создают:
Переменные, объявленные с помощью let, доступны только внутри
блокировать, где они определены. Переменные, объявленные var
доступны на протяжении всей функции, в которой они
объявлено.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — -
Печать
Чтобы вывести одно значение console.log("Hello World")
Чтобы напечатать много значений
константа accountId = 144553
let accountEmail = «[email protected]»
var accountPassword = «12345»
accountCity = «Джайпур»
console.table([accountId, accountEmail, accountPassword, accountCity, accountState])
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Типы данных в js
число
большойинт
нить
логический
нулевой
неопределенный
символ
— — — — — — — — — — — — — — — — — — — — — — — — — — — — -
Проверить тип данных-> console.log(typeof x)
Преобразование типа данных-> y=String(x)
конкатенация -> str1='hello' str2='world' str1+str2='helloworld'
++x -> текущий x=x+1 -> предварительный приращение
x++ -> в настоящее время x=x и для следующего использования x=x+1 -> постинкремент
пусть x = новый номер (5): используется конструктор
пусть x =5 : не имеет дополнительных свойств или методов
связанный с ним, в отличие от объекта, созданного с помощью конструктора.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — -
Оператор
1. Сравнение
>,<,>=,<=,==,===
Оператор равенства (==):
Оператор == используется для нечеткого сравнения на равенство. Он сравнивает значения с обеих сторон и пытается выполнить приведение типов, если значения относятся к разным типам данных. Приведение типа означает, что JavaScript попытается преобразовать значения в общий тип перед выполнением сравнения.
Оператор строгого равенства (===):
Оператор === используется для строгого сравнения на равенство. Он не только сравнивает значения, но и проверяет, совпадают ли типы данных. Он не выполняет приведение типов. Этот оператор часто считают более безопасным и предсказуемым, чем ==, поскольку он позволяет избежать непредвиденных преобразований.
2.Арифм.
+,-,*,/,%
— — — — — — — — — — — — — — — — — — — — — — — — — — — —
Строковые методы
const name="Чандни"
const univ="iiitk"
console.log(`Я ${имя} и я учусь в ${университете}`)
const roll = новая строка («cse21030»)
console.log(ролл[0])
console.log(ролл.__proto__)
console.log(рулон.длина)
console.log(roll.charAt(2))
console.log(roll.indexOf('e'))
const newstr=roll.substring(0,4)
console.log(рулон)
console.log(newstr)
PS C:\Users\chand\OneDrive\Desktop\working with API’s› node js-practice.js
Я Чандни, и я учусь iniiitk
c
{}
8
e
2
[Строка: ‘cse21030’]
const newStringOne = «Чандни»
console.log(newStringOne);
console.log(newStringOne.trim());
постоянный URL = «https://chandni.com/chandni%20choudhary
console.log(url.replace('%20', '-'))
console.log(url.includes('sundar'))
console.log(url.split('/'));
PS C:\Users\chand\OneDrive\Desktop\working with API’s› узел js-practice.js
Чандни
Чандни
https://chandni.com/chandni-choudhary
ЛОЖЬ
[ ‘https:’, ‘’, ‘chandni.com’, ‘chandni%20choudhary’]
— — — — — — — — — — — — — — — — — — — — — — — — — — — -
Математика и числа
постоянная оценка = 400
console.log(оценка);
постоянный баланс = новое число (100)
console.log(баланс);
console.log(баланс.toString().length);
console.log(баланс.toFixed(1));
const другое число = 123,8966
console.log(otherNumber.toPrecision(4));
const сотни = 1000000
console.log(сотни.toLocaleString('en-IN'));
// +++++++++++++ Математика +++++++++++++++++++++++++++++++
console.log(Математика);
console.log(Math.abs(-4));
console.log(Math.round(4.6));
console.log(Math.ceil(4.2));
console.log(Math.floor(4.9));
console.log(Math.min(4, 3, 6, 8));
console.log(Math.max(4, 3, 6, 8));
console.log(Math.random());
console.log((Math.random()*10) + 1);
console.log(Math.floor(Math.random()*10) + 1);
константа мин = 10
константа макс = 20
console.log(Math.floor(Math.random() * (max — min + 1)) + min)
— — — — — — — — — — — — — — — — — — — — — — — — — — — — -
Даты
пусть myDate = новая дата ()
console.log(myDate.toString());
console.log(myDate.toDateString());
console.log(myDate.toLocaleString());
console.log (тип моей даты);
пусть myCreatedDate = новая дата (2023, 0, 23)
// пусть myCreatedDate = новая дата (2023, 0, 23, 5, 3)
// пусть myCreatedDate = новая дата («2023–01–14»)
// пусть myCreatedDate = новая дата («01–14–2023»)
console.log(myCreatedDate.toLocaleString());
пусть myTimeStamp = Date.now()
console.log(myTimeStamp);
console.log(myCreatedDate.getTime());
console.log(Math.floor(Date.now()/1000));
пусть новаяДата = новая Дата()
console.log(новаяДата);
console.log(newDate.getMonth() + 1);
console.log(newDate.getDay());
`${newDate.getDay()} и время `
newDate.toLocaleString («по умолчанию», {
день недели: «длинный»,
})
— — — — — — — — — — — — — — — — — — — — -
Массив может иметь любой тип элементов
A=["баран",1,правда,"манго",5,6]
Адресация -> А[0],А[1]
push(), pop() ‹- для ввода и удаления элемента из последнего
unshift(), shift()‹ — вводить и удалять с первого
Методы
A.slice(0,2)=["ram",1] не повлияет на массив A
A.splice(0,2)=["баран",1,истина] A=["манго",5,6]
A=[1,2,3]
B=[4,5]
А.push(B)=[1,2,3,[4,5]]
const C=A.concat(B) C=[1,2,3,4,5]
const C=[…A,…B] C=[1,2,3,4,5] оператор спреда
const other_array = [1, 2, 3, [4, 5, 6], 7, [6, 7, [4, 5]]]
const real_another_array = other_array.flat(бесконечность) [1,2,3,4,5,6,7]
console.log(Array.isArray("чандни")) false
console.log(Array.from("chandni")) [ ‘H’, ‘i’, ‘t’, ‘e’, ‘s’, ‘h’ ]
console.log(Array.from({name: «chandni»})) // интересно, это не сработает
пусть счет1 = 100
пусть счет2 = 200
пусть счет3 = 300
console.log(Array.of(оценка1, оценка2, оценка3)); [100, 200, 300]
— — — — — — — — — — — — — — — — — — — — — — — — — — — -
Объекты
const user={} одноэлементный объект
постоянный пользователь = {
имя: "а",
рулон: ”2,
«фамилия»: «б»,
}
console.log(имя пользователя)
console.log(пользователь["фамилия"])
user.greeting = функция () {
console.log("Привет, пользователь JS");
}
user.greetingTwo = функция () {
console.log(`Привет, пользователь JS, ${this.name}`);
}
console.log(пользователь.приветствие());
console.log(user.greetingTwo());
conser.log(Object.keys(пользователи))
console.log(Object.values(пользователи))
console.log(Object.entries(пользователи))
константа obj3 = {obj1, obj2}
const obj3 = Object.assign({}, obj1, obj2, obj4)
первая позиция принадлежит результирующему объекту берется один элемент, чтобы мы могли объединить как объект, насколько это возможно
const obj3 = {…obj1, …obj2} оператор распространения
console.log(obj3);
— — — — — — — — — — — — — — — — — — — — — — — — — — -
Функции
функция добавить(…числа) {
пусть сумма = 0;
для (пусть количество чисел) {
сумма += число;
}
сумма возврата;
}
const А = [1, 2, 3];
console.log(добавить(…А)); // Выходы: 6
константа чай = функция () {
пусть имя пользователя = «чандни»
console.log(имя пользователя);
}
const chai1 = () =› {
пусть имя пользователя = «чандни»
console.log(имя пользователя);
}
чай ()
чай1()
const addTwo = (num1, num2) => num1 + num2
const addTwo = (num1, num2) =› ( num1 + num2 )
console.log (добавить два (2,3))
— — — — — — — — — — — — — — — — — — — — — — — — — —
// Немедленно вызываемые функциональные выражения (IIFE)
(функция чай(){
// с именем IIFE
console.log(`БД ПОДКЛЮЧЕНА`);
})();
( (имя) =› {
console.log(`БД ПОДКЛЮЧЕНА ДВА ${имя}`);
} )(‘хитеш’)
— — — — — — — — — — — — — — — — — — — — — — — — — — -
масштабы
->Глобальный
-›Местный/ функциональный
— — — — — — — — — — — — — — — — — — — — — — — — — — —
Поток управления
если еще если, переключиться
// Нулевой оператор объединения (??): null undefined
пусть знач1;
// значение1 = 5 ?? 10
// знач1 = ноль ?? 10, если val1 равно null, ему будет присвоено 10
// значение1 = не определено ?? 15
значение1 = ноль ?? 10 ?? 20
Тернанри оператор
константа iceTeaPrice = 100
IceTeaPrice ‹= 80 ? console.log("менее 80") : console.log("более 80")
— — — — — — — — — — — — — — — — — — — — — — — — — — -
Итерации
пока цикл
сделать цикл while
для цикла
для (пусть i = 0; i ‹ 5; i++) {
console.log(я);
}
для (;;) {
// Код, который будет повторяться бесконечно
}
const person = {имя: «Алиса», возраст: 30, должность: «Инженер» };
for (дать ключ лично) {
console.log(ключ, человек[ключ]);
}
const colors = ['красный', 'зеленый', 'синий'];
for (пусть цвет цветов) {
console.log(цвет);
}
пусть счет = 0;
в то время как (количество ‹ 5) {
console.log(количество);
количество++;
}
пусть число = 5;
do {
console.log("Число: " + num);
число — ;
} пока (число › 0);
— — — — — — — — — — — — — — — — — — — — — — — — — —
Разница между внутренним текстом, внутренним содержанием, внутренним HTML
внутренний текст: содержит только видимый тест внутри выбранного элемента
innerContent: содержит как видимые, так и скрытые элементы внутри выбранного элемента.
innerHTML: весь HTML с тегами и атрибутами
— — — — — — — — — — — — — — — — — — — — — — — — — -
DOM выбирает элемент
Чтобы получить элемент DOM с помощью JavaScript, вы можете использовать различные методы, предоставляемые API объектной модели документа (DOM). Вот несколько распространенных способов выбора и извлечения элементов DOM:
получитьэлемент по идентификатору():
Этот метод позволяет выбрать элемент по его уникальному атрибуту id.
const elementById = document.getElementById («elementId»);
селектор запросов():
Метод querySelector() позволяет выбрать элемент с помощью селектора CSS.
const element = document.querySelector(“.className”); // Выбор по классу
const AnotherElement = document.querySelector("#elementId"); // Выбирает по id
запросСелекторВсе():
Используйте querySelectorAll() для выбора нескольких элементов, соответствующих селектору CSS.
const elements = document.querySelectorAll(“.className”);
getElementsByClassName():
Этот метод извлекает элементы по имени их класса.
const elementsByClass = document.getElementsByClassName («имя класса»);
getElementsByTagName():
Используйте getElementsByTagName() для выбора элементов по имени их тега;
const elementsByTag = document.getElementsByTagName («имя тега»);
const secondLang = document.querySelector("li:nth-child(2)")
console.log(второй язык);
querySelectorAll() и getElementByClassName() действуют как массив
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -
События:
щелчок, наведение мыши, нажатие клавиши и т. д.
Типы распространения событий:
— — — — — — — — — — — — —
1. Фаза захвата:
На этапе захвата событие начинается с самого внешнего элемента-предка и распространяется вниз по дереву DOM к целевому элементу. Обработчики событий, подключенные на этапе захвата, выполняются до того, как событие достигнет целевого элемента.
Чтобы использовать фазу захвата, необходимо установить для третьего параметра метода addEventListener() значение true.
element.addEventListener («клик», обработчик, правда);
2. Фаза пузыря:
В фазе всплытия событие начинается с целевого элемента и распространяется вверх по дереву DOM к самому внешнему элементу-предку. Обработчики событий, прикрепленные на этапе всплытия, выполняются после того, как событие проходит через целевой элемент.
Чтобы использовать фазу всплытия (которая является поведением по умолчанию), вы либо опускаете третий параметр метода addEventListener(), либо устанавливаете для него значение false.
element.addEventListener («клик», обработчик); // Фаза всплытия (по умолчанию)
// OR
element.addEventListener («клик», обработчик, ложь); // Фаза пузыря
3. Целевая фаза
Целевая фаза включает фактический целевой элемент, в котором было инициировано событие. Выполняются обработчики событий, прикрепленные к целевому элементу.
Целевая фаза явно не используется в методе addEventListener(); это центральная точка, где происходит событие.
document.getElementById('google').addEventListener('click', function(e){
e.preventDefault();
e.stopPropagation();
// console.log("гугл нажал");
}, ЛОЖЬ);
Метод e.preventDefault() используется для предотвращения поведения события по умолчанию. Когда происходит событие, часто с ним связано действие по умолчанию. Например, нажатие на ссылку (элемент ‹a›) обычно приводит браузер к URL-адресу, указанному в атрибуте href ссылки. Вызывая e.preventDefault() в обработчике событий, вы можете предотвратить выполнение этого действия по умолчанию.
Вызов e.stopPropagation() предотвращает дальнейшее распространение события на элементы-предки как на этапах захвата, так и на этапах всплытия.
УДАЛЯТЬ
document.querySelector(‘#images’).addEventListener(‘click’, function(e){
console.log(e.target.tagName);
если (e.target.tagName === ‘IMG’) {
console.log(e.target.id);
пусть removeIt = e.target.parentNode
удалить.удалить()
}
})
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — -
const timeoutId = setTimeout (функция () {
// Код, который будет выполняться после задержки
}, задержка в миллисекундах);
const intervalId = setInterval (функция () {
// Код, который будет выполняться на каждом интервале
}, интервал в миллисекундах);
// Чтобы отменить запланированное выполнение
очистить время ожидания (идентификатор времени ожидания);
clearInterval (интервалId);
И setTimeout, и setInterval являются важными инструментами для управления асинхронными операциями в JavaScript, такими как анимация, периодические обновления и отложенные задачи.
Функция setTimeout используется для выполнения функции (или фрагмента кода) после указанной задержки (в миллисекундах). Он принимает два основных аргумента: функцию, которую нужно выполнить, и задержку в миллисекундах.
Функция setInterval используется для многократного выполнения функции через определенный интервал (в миллисекундах). Он принимает два основных аргумента: функцию, которую необходимо выполнить, и интервал в миллисекундах.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
API
Старый метод http-запроса для получения данных из API
0 UNSENT Клиент создан. open() еще не вызывалась.
1 OPENED open() была вызвана.
2 HEADERS_RECEIVED send() была вызвана, и заголовки и статус доступны.
3 ЗАГРУЗКА Загрузка; responseText содержит частичные данные.
4 ГОТОВО Операция завершена.
const requestUrl = ‘https://api.github.com/users/hiteshchoudhary’
const xhr = новый XMLHttpRequest();
xhr.open('GET', URL-адрес запроса)
xhr.onreadystatechange = функция () {
console.log(xhr.readyState);
если (xhr.readyState === 4) {
константные данные = JSON.parse(this.responseText)
console.log(тип данных);
console.log(данные.последователи);
}
}
xhr.отправить();
Новый метод
определить URL
пусть getJoke = () =› {
выборка (URL)
.затем (данные => data.json())
.тогда (элемент => {
шуткаКонтейнеры.для каждого(контейнер => {
container.textContent = элемент.шутка;
});
});
}
btns.forEach(btn =› {
btn.addEventListener («клик», getJoke);
});
*/
