JS примитивы

Редакция автор: stain

DOM структура (это дерево где у каждой промежуточной ветки есть и родители и потомки, а крайние имеют либо потомков, либо родителя.)
innerHTML некая альтернатива DOM,работает быстрее но есть особенности, из за которых лучше использовать DOM
innerHTML через это свойство можно получить, все содержимое страницы, или только содержимое внутри какого нибудь тега. (x.innerHTML)
event-jsdomdate-jstrigonometry-jsmath-js

document.write("Hello World!"); //Hello World! //!!! document.writeshould be used only for testing. Other output mechanisms appear in the upcoming lessons.
document.write("

Hello World!

"); alert("This is an alert box!"); //Всплывающее окно с сообщением и кнопкой подтверждения //загрузка внешнего скрипта var x = 10; //переменные объявляются с словом var, если не задавать значение по умолчанию переменная будет иметь тип undefined //разделитель разрядов числа всегда точка, в любой раскладке. //чтобы вывести на печать символ для этого не предназначенный добавляйте перед ним \ var sayHello = 'Hello world! \'I am a JavaScript programmer.\' '; var myVariable = 26 % 6; //возвращает остаток целочисленного деления 26/6, в данном случае остаток 2 //переменные передаются в поток через запятую //Вот это мне показалось интересным пре(декремент, инкремент) меняются сразу обе переменных. var a = ++b, var a = --b; // *= /= %= // === identical (equal and of same type) равное и того же типа // !== not identical // AND - &&, OR - ||, NOT - ! //Сложение строк document.write(mystring1 + mystring2); //Местный if variable = (condition) ? value1: value2 var isAdult = (age < 18) ? "Too young": "Old enough"; //первое если true второе если false //Привычный if if (condition) {statements;} else if (course == 2) {document.write("

CSS Tutorial

");} else {// executed if condition is false } // default выполняется если все условия false. break используется для выхода из переключателя //после выполнения одного из условий и продолжения программы, без него оставшиеся условия будут проверяться дальше. switch (day) { case 1: document.write("Monday"); break; case 2: document.write("Tuesday"); break; case 3: document.write("Wednesday"); break; default: document.write("Another day"); } //Циклы for (i=1; i<=5; i++) {document.write(i + "
");} //стандартный цикл. var i = 1; for (; i<=5; i++) {document.write(i + "
");}//переменная участвующая в условии может быть объявлена до цикла. for (i=1, text=""; i<=5; i++) {text = i; document.write(i + "
");} //может быть несколько переменных объявлено в первой сегменте цикла var i = 0; for (; i < 10; ) {document.write(i); i++;} //может быть и так, только условие имеет значение for (i = 0; i <= 10; i++) {if (i == 5) { break;} document.write(i + "
");} //выход по прерыванию break for (i = 0; i <= 10; i++) { if (i == 5) { continue; } document.write(i + "
");} // continue продолжить например для срабатывания тригера. var i=0; while (i<=10) {document.write(i + "
"); i++;} var i=20; do {document.write(i + "
"); i++;} while (i<=25); //Функция function hello(name, lastname) {alert('Hi, ' + name + ' ' + lastname + '!');} fullname = hello ('Gomer', 'Simpson'); // Hi,Gomer Simpson ! function myFunction(a, b) {return a * b;} var x = myFunction(5, 6); // Return value will end up in x, x equals 30 //JavaScript offers three types of popup boxes, the Alert, Prompt, and Confirm boxes. Alert("Warning!"); //Prompt var user = prompt("Please enter your name"); alert(user); //пишет приглашение и поле ввода //Confirm окно с выбором согласия или отмены (Ручной if) var result = confirm("Do you really want to leave this page?"); if (result == true) {alert("Thanks for visiting");} else {alert("Thanks for staying with us");} //объект var person = {name: "John", age: 31, favColor: "green", height: 183}; //объект имеет параметры - чертовски похоже на массив ))) //доступ к параметрам объекта производится двумя способами objectName.propertyName objectName['propertyName'] //а так узнаем длину параметра в символах document.write(nameobject.nameparameter.length); //последнее слово //объект может содержать в себе методы methodName : function() { code lines } objectName.methodName() // доступ к методу объекта //В объекте может быть функция для конструирования новых объектов var p1 = new person("John", 42, "green"); //пример function person(name, age) {this.name = name; this.age = age; this.changeName = function (name) {this.name = name;} } var p = new person("David", 21); p.changeName("John"); //меняем параметр имя // переопределять в объекте можно не только переменные но и методы(они тоже переменные). function person(name, age) {this.name= name; this.age = age; this.yearOfBirth = bornYear;} function bornYear() {return 2016 - this.age;} //массивы var courses = new Array("HTML", "CSS", "JS"); //для создания массива нужно использовать приставку new courses[1] = "C++"; //Доступ к элементу массива где //При обращении к несуществующему элементу массива, мы получим Undefined. //можно указывать количество элементов в массиве, и уже позже задавать им значения. //Также можно объявлять пустой массив //Определение длины массива var courses = ["HTML", "CSS", "JS"]; document.write(courses.length); //Любой объект может обратиться к данной функции length //метод concat соеденяет два массива в один новый var c1 = ["HTML", "CSS"]; var c2 = ["JS", "C++"]; var courses = c1.concat(c2); //Задержки выполнения программы setInterval в мс function myAlert() {alert("Hi");} setInterval(myAlert, 3000); //Текущая дата var переменная = new Date(year, month, day, hours, minutes, seconds, milliseconds); var date1 = new date(); // текущая дата var date1 = date.get minutes(); //доступ к минутам //Выбор элементов объекта DOM document.getElementById(id) //finds element by id document.getElementsByClassName(name) //finds elements by class name document.getElementsByTagName(name) //finds elements by tag name element.childNodes //returns an array of an element's child nodes. (возвращает массив потомков родительского элемента) element.firstChild //returns the first child node of an element. (возвращает первого потомка) element.lastChild //returns the last child node of an element. (возвращает последнего потомка) element.hasChildNodes //returns true if an element has any child nodes, otherwise false.(возвращает ИСТИНУ если существует хоть один потомок) element.nextSibling //returns the next node at the same tree level.(возвращает следующий элемент на том же уровне иерархии тагов DOM) element.previousSibling //returns the previous node at the same tree level.(возвращает предыдущий элемент на том же уровне иерархии тагов DOM) element.parentNode //returns the parent node of an element. (Возвращает таг вышестоящего родителя) //Пример использования
... //после того как элемент установлен мы можем его изменить window.onload = function() { var el = document.getElementsByTagName('a'); el[0].href= 'http://www.sololearn.com'; // найдет первую ссылку в документе и заменит при загрузке документа, в ней адрес. }; /*All CSS properties can be set and modified using JavaScript. Just remember, that you cannot use dashes (-) in the property names: these are replaced with camelCase versions, where the compound words begin with a capital letter. For example: the background-color property should be referred to as backgroundColor.*/ //following methods to create new nodes: element.cloneNode() //clones an element and returns the resulting node. document.createElement(element) //creates a new element node. document.createTextNode(text) //creates a new text node. //This will create a new text node, but it will not appear in the document until you append it to an existing element with one of the following methods: element.appendChild(newNode) //adds a new child node to an element as the last child node. element.insertBefore(node1, node2) //inserts node1 as a child before node2. //Пример создания и добавления элементов DOM
some content
//Убираем элемент DOM //To remove an HTML element, you must select the parent of the element and use the removeChild(node)

This is a paragraph.

This is another paragraph.

//This removes the paragraph with id="p1" from the page. //An alternative way of achieving the same result would be the use of the parentNode property to get the parent of the element we want to remove: //var child = document.getElementById("p1"); child.parentNode.removeChild(child); //Замена элемента DOM //To replace an HTML element, the element.replaceChild(newNode, oldNode)

This is a paragraph.

This is another paragraph.

//Двигаем объект var t = setInterval(move, 500); //This code creates a timer that calls a move() function every 500 milliseconds. //Now we need to define the move() function, that changes the position of the box. // starting position var pos = 0; //our box element var box = document.getElementById("box"); function move() { pos += 1; box.style.left = pos+"px"; //px = pixels } //The move() function increments the left property of the box element by one each time it is called. //Остановка - Очищаем интервал clearInterval(t) if(pos >= 150) { clearInterval(t); } //Обработчики событий пример использования

some text

//обработчик может быть свойством объекта. x.onclick //События //HTML //script window.onload = function() {//some code } //onload активация тригера после загрузки //onchange активация при потере фокуса element.addEventListener(event, function, useCapture); //Добавить Слушатель событий, для создания цепочек событий element.removeEventListener("mouseover", myFunction); //Удалить Слушателя событий document.attachEvent() //for ie8 //Основная мысль Слушателей, это разгрузка HTML кода Пример : //Распространение событий //Capturing goes down the DOM. //срабатывает сначала родитель //Bubbling goes up the DOM. //Срабатывает сначала потомок addEventListener(event, function, useCapture) //useCapture is Boolean. //event in this cause may be "click" //The default value is False, which means the Bubbling propagation is used; when the value is set to True, the event uses the Capturing propagation. //Простейший слайдер
var images = [ "http://www.sololearn.com/uploads/slider/1.jpg", "http://www.sololearn.com/uploads/slider/2.jpg", "http://www.sololearn.com/uploads/slider/3.jpg" ]; var num = 0; function next() { var slider = document.getElementById("slider"); //установка указателя на таг с ид slider он узел num++; if(num >= images.length) { num = 0; } slider.src = images[num];//у которого есть свойство src, и его значение подменяется при запуске функции next } function prev() { var slider = document.getElementById("slider"); num--; if(num < 0) { num = images.length-1; } slider.src = images[num]; } //ФОРМЫ Валидация
//html форма, где при нажатии на кнопку, возвращается(return) содержимое формы в функцию validate() методом post function validate() { //функция где проверяются поля, и в случае ошибки отправляется false и выводится алерт, валидация пройдет только если условия будут выполнены и вернется true.

Пример валидации формы, без самой формы, знаю как это выглядит, но копипастю только нужное.

 
  

  

Комментариев: 0