Как создать сайт самому с нуля

Статья описывающая, как самому создать сайт с нуля. В ней описана пошаговая инструкция от HTML и CSS к JavaScript и PHP. Пошаговая инструкция, о том как сделать сайт самостоятельно и бесплатно для начинающих.

Добрый день, дорогие друзья. Добро пожаловать на сайт gabdrahimov.ru, посвящённый современному сайто строению. Данный учебник, предназначен для начинающих и продолжающих вебмастеров. Здесь вы найдёте необходимые материалы по веб-строительству, веб-дизайну и веб-программированию, которые помогут вам в изучении предмета — создание сайтов.

На данный момент, написано уже четыре учебника для вебмастера, которые постоянно дополняются и обновляются:

Далее идёт статья «С чего начинается путь вебмастера?»

Чтобы начать создавать сайты, нужно изучить язык разметки HTML и язык форматирования CSS, после чего приступают к освоению адаптивной вёрстки сайтов на основе этих языков. Далее, при желании, изучают языки веб-программирования JavaScript и PHP, а также базу данных MySQL.

По идее, зная всего лишь два языка: HTML, CSS и адаптивную вёрстку сайта, можно уже сразу устроиться на работу в веб-студию, на должность HTML-верстальщика или помощника HTML-верстальщика.

Языки веб-программирования JavaScript и PHP, а также базу данных MySQL можно знать лишь поверхностно, поскольку сайты сейчас в основном создают с помощью различных CMS : WordPress, Joomla, Drupal и т.д.; и знать в связи с этим, языки веб-программирования вовсе не обязательно.

Далее дан небольшой обзор того, через какой путь проходит современный начинающий и продолжающий вебмастер.

Язык разметки HTML и язык форматирования CSS

Для того, чтобы уметь создавать сайты, нужно изучить два web-языка:
1. HTML — язык разметки,
2. CSS — язык форматирования.
Языки HTML и CSS, желательно изучать вместе, а не по отдельности.

HTML — язык разметки, с помощью которого создается структура страницы сайта, определяется какая часть страницы будет заголовком, абзацем (параграфом), фотографией, ссылкой, кнопкой и т.д.

HTML — это язык разметки .

CSS — язык форматирования, с помощью которого частям страницы назначают различные свойства влияющие на: цвет, фон, высоту, ширину, выравнивание, отступ, границу, прозрачность, позиционирование и многое другое.

CSS — это язык форматирования .
Форматирование — это изменение внешнего вида .

Вёрстка сайтов: блочная, резиновая, адаптивная

Изучив HTML и CSS, можно уже приступать к созданию сайтов, прочитав перед этим о вёрстке. Современная вёрстка сайтов включает в себя использование блочных элементов DIV и их «резиновую» ширину (в процентах). 2-3 года назад, благодаря совершенствованию браузеров, появилась возможность использовать адаптивную вёрстку.

Адапивная вёрстка включает в себя следующие понятия:

• Блочные элементы DIV
• Резиновая ширина макета (размеры в процентах %)
• Модульная сетка
• Медиазапросы CSS3
• Масштабируемые медиафайлы (изображения, аудио/видео)

Благодаря адаптивной верстке, ваши сайты будут красиво выглядеть не только на мониторах компьютеров и ноутбуков, но и на экранах планшетов и смартфонов, в независимости от того какая у них ширина: 300px или 1900px .

Например сайт Gabdrahimov.ru, создан с помощью адаптивной вёрстки и если вы попытаетесь уменьшить ширину браузера, то увидите как постепенно будут исчезать элементы дизайна, верхнее меню превратится из горизонтального в вертикальное, а левое меню «съедет» вниз. Это сделано для того, чтобы вам было удобнее просматривать сайт на мобильных устройствах.

Учебник по современной адаптивной вёрстке, предположительно будет готов концу осени 2014 года.

JavaScript, DOM, BOM, jQuery — клиент

Сайт созданный с помощью HTML и CSS может быть очень красивым и познавательным, единственное что в нём будет не хватать, так это интерактивности — взаимодействия с пользователем.

Например, если вы желаете чтобы при нажатии на какую либо часть страницы , увеличивался размер шрифта или чтобы при наведении курсора мыши на фотографию появлялось её описание и т.п., то вам нужно изучить различные клиентские языки веб-программирования и веб-технологий, а именно JavaScript, DOM, BOM и jQuery.

JavaScript (ЯваСкрипт) — это клиентский язык веб-программирования, с помощью которого можно управлять частями страницы и браузера, заставлять их двигаться, менять внешность, реагировать на различные события (щелчки мышью, нажатие на клавиатуру), создавать множество интересных программ (скриптов): тесты, анимацию, фотогаллереи (например как во Вконтакте), игры и многое другое.

DOM (объектная модель документа), благодаря ей теги HTML-документа начинают представлять из себя объект , в виде дерева объектов, где у каждого элемента в этом дереве имеется свой уникальный адрес. JavaScript обращаясь по этому адресу, может получить доступ к HTML-тегу и управлять им.

BOM (браузерная модель документа), структура объектов та же самая что и у DOM, только вместо объектов HTML-документа (HTML-тегов), выступают объекты браузера: окно браузера, URL страницы, история посещений, размеры экрана монитора и т.д.

jQuery — популярный фреймворк (библиотека) языка JavaScript. jQuery облегчает разработку сценариев на языке JavaScript.

JavaScript как и любой другой язык программирования достаточно сложен для изучения, особенно для тех кто не знаком ни с одним другим языком программирования. Поэтому, для него придумали различные фреймворки (библиотеки), которые позволяют создавать такие же программы как на JavaScript, но с меньшими усилиями. Одна из самых популярных на сегодняшний день библиотек JavaScript, называется jQuery.

JavaScript — клиентский язык программирования.
jQuery — популярный фреймворк языка JavaScript.
DOM и BOM — клиентские веб-технологии.

PHP, Yii, Symfony — сервер

После JavaScript , можно приступить к изучению серверного языка программирования PHP. Здесь следует прояснить разницу между клиентским и серверным языками программирования.

Клиентский язык JavaScript, может манипулировать частями страницы (заголовками, абзацами, ссылками и т.д.) , а серверный язык программирования PHP, не имеет доступа к частям страницы, но зато он может манипулировать файлами на сервере: создавать/удалять файлы, читать/редактировать информацию в файлах.

Благодаря этому, с помощью языка PHP можно создавать интернет-магазины, гостевые книги, чаты, комментарии, опросы, отзывы, форумы и другие программы, в которых необходимо сохранение данных на сервере.

JavaScript управляет частями страницы , а PHP файлами (данными) на сервере и поэтому они отлично дополняют друг друга.

Также как и у JavaScript, у языка PHP тоже имеются свои фреймворки, облегчающие разработку программ на языке PHP, вот некотрые из них: Yii, Symfony, Zend Framework и др.

PHP — серверный язык программирования. Yii — фреймворк языка PHP.

База данных MySQL — сервер

MySQL — это реляционная база данных, содержащая различную информацию. Реляционная база данных — это база данных, состоящая из таблиц. Таблицы в свою очередь состоят из столбцов и строк. Строки состоят из ячеек. Каждая ячейка имеет свой тип данных.

Как уже говорилось выше, язык PHP манипулирует файлами на сервере и хранящейся в них информацией. Для упрощения процесса манипулирования информацией, обычно используют не файлы, а базу данных. Самая популярная на сегодняшний день, это база данных MySQL. Информация хранящаяся в базе данных более структурирована, чем информация хранящаяся в обычных текстовых файлах, поэтому ею легче управлять.

PHP управляет информацией, хранящейся в базе данных, путём отправления к ней различных SQL-запросов — команд, которые говорят базе данных: создать запись, читать запись, редактировать (изменить, обновить) запись, удалить запись . Упрощённо это называется CRUD (create, read, update, delete — создание, чтение, обновление, удаление).

Также существуют команды сортировки и фильтрации данных.

MySQL — реляционная база данных.

Open Server — локальный (домашний) веб-сервер

Если вы приступите к обучению серверных языков или баз данных (например PHP или MySQL), то для работы с ними, вам нужно будет поставить на свой компьютер веб-сервер. Лучший вариант на сегодняшний день, это веб-сервер Open Server, который находится по адресу:
http://open-server.ru — он бесплатный и русскоязычный.

Установив веб-сервер, можно также изучить парочку несложных, серверных технологий:
1. .htaccess — специальный файл, с помощью которого можно давать команды веб-серверу и управлять некоторыми параметрами сайта.
2. SSI — серверная технология, позволяющая создавать файлы, с помощью которых можно вносить изменения в дизайн сайта, сразу для всех страниц одновременно (редко где используется, но полезен на бесплатных хостингах, где нет возможности работать с PHP).

На этом пока всё, приступим к изучению языка HTML.

JavaScript

Видеокурс рассчитан на новичков, которые хотят научиться работать с JavaScript и понять как создать сайт на JavaScript. В ходе курса будут рассмотрены технологии: HTML, CSS, JavaScript, библиотека jQuery и технология Ajax. Вами будет создано 5 мини-программ на чистом JS, а также в конце курса будет создан полноценный одностраничный веб сайт на ДжаваСкрипт на базе HTML, CSS, JavaScript, jQuery и с добавлением специального постороннего плагина

Курс в цифрах

1490

300

24

10

95

Теоретическая база

В курсе есть специальные теоретические лекции, в которых вы сможете ознакомится со всем необходим в теории, прежде чем приступать к практике и изучать JavaScript для сайта

Практическая часть

Все полученные знания рассматриваются на практике. Вами будут созданы различные мини приложения, а также в конце курса вы создадите полноценный веб сайт

Домашние задания

Помимо теории и практики в каждом уроке даются домашние задания на закрепление полученных знаний. На основе знаний вы сможете приступить к JavaScript разработке сайтов

От новичка до профи

Курс идет от переменных и простых операций до ООП, JSON, событий и многого другого. По прохождению курса вы будете уметь создавать и писать веб программы на JS

Программа обучения

Основы JavaScript

#1 — Теоретическая лекция
#2 — Подключение и настройка
#3 — Переменные, типы данных
#4 — Математические операторы
#5 — Условные операторы (3 типа условий)
Показать все темы уроков
#6 — Одномерные и многомерные массивы данных
#7 — Циклы, а также операторы в циклах
#8 — Работа с функциями
#9 — Взаимодействие с пользователем
#10 — Объекты и классы
#11 — Формат JSON

Описание

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

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

1 час Задания Исходники

HTML + JavaScript

#1 — Окружение DOM, BOM, JS
#2 — DOM структура. Работа с объектами
#3 — События в JavaScript
#4 — События клавиатуры и мыши
#5 — События для сенсорного экрана
#6 — Асинхронное программирование
#7 — Полноценная форма комментариев на JS

Описание

Чтобы работать с HTML при помощи JavaScript, вам необходимо хорошо разбираться в общей структуре HTML документа.

В ходе урока вы познакомитесь с понятием «окружения» и изучите основные объекты, что входят в окружение BOM.

14 минут Задания Исходники

jQuery

#1 — Теоретическая лекция
#2 — Подключение к проекту
#3 — Селекторы выбора объектов
#4 — Встроенные функции
#5 — Обработчик событий
#6 — Создание веб сайта

Описание

В ходе первой лекции вы изучите всю необходимую теорию относительно библиотеки jQuery. Вы узнаете на что она способна, какие функции в ней есть и зачем вообще её использовать.

В ходе последующих лекций вы изучите все полученные материалы на практике.

40 минут Задания Исходники

Отзывы

В нашей группе Telegram вы найдете отзывы от учеников, что прошли данный курс. Некоторые из отзывов представлены ниже:

Наши курсы

У нас один из наиболее крупных YouTube каналов в сфере программирования. Вы можете ознакомится с манерой подачи материала на наших каналах в YouTube: « Гоша Дударь » и « Школа itProger ». Наши платные курсы намного больше и намного более информативны, нежели курсы на YouTube.

Выдача сертификата

После прохождения курса, каждый ученик купивший курс с типом «Наилучший» или «Всё включено» сможет получить сертификат об успешном прохождении онлайн видеокурса. Сертификаты помогают при дальнейшем трудоустройстве, так как работодатель сразу же видит что перед ним человек, проходивший курсы по определенным языкам и технологиям Размер сертификата — А4
Формат — PDF

Стоимость курса

Все включено

Все видео уроки

Исходники к урокам

Подписка на сайте

Если вы плохо знаете программирование, то лучше приобрести курс «Наилучший», тогда вы получите консультации от лектора, а также весь исходный материал по видео курсу. Если знаний достаточно и вы уже не новичок, то можете смело брать курс «Стандарт».

Программа обучения

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

Все включено
Добавить к оплате

Частые вопросы

Какие знания необходимы?

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

Что входит в уроки?

Каждый урок состоит из теоретической и практической части. Весь материал, что вы изучите будет подкрепляться практикой для лучшего понимания. К каждому уроку также прилагается готовый код, который вы можете скачать для дальнейшего изучения

Где проходит обучения по курсу?

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

Что входит в видеокурс?

Видеокурс состоит из 24 уроков, каждый из которых по 20-30 минут в среднем. Общая длина курса более 10,5 часов обучения. Дополнительно в курс входят учебные материалы при покупке курса от 25$.

Что вы получите в конце курса?

В курсе вы создадите полноценный одностраничный веб сайт на HTML, CSS, JavaScript и jQuery. Сайт будет обладать красивым дизайном и большим набором функций. После курса вы научитесь создавать сайты с использованием JS и jQuery.

Что такое подписка на сайте?

Подписка на сайте даст вам дополнительные домашние задания. Если у вас уже есть подписка, то она будет продлена дополнительно. Прочитать более детально про подписку можно здесь.

Что такое практические задачи?

Практические задачи это дополнительные задания на закрепления знаний. Они представлены на сайте в разделе «Тесты и практика». Там вы найдете более 300 дополнительных заданий по JS, jQuery, HTML и CSS.

Как выбрать видеокурс?

Видеокурс необходимо выбирать исходя из тех знаний, что вы имеете на данный момент. Если вы плохо знаете программирование, то лучше приобрести курс «Наилучший», тогда вы получите консультации от лектора, а также весь исходный материал по видеокурсу. Если знаний достаточно и вы уже не новичок, то можете смело брать курс «Стандарт».

Зачем нужны консультации?

Консультации это отличная помощь вам, ведь если вы чего-либо не будете знать, то всегда сможете задать вопрос лектору и получить ответ на свой вопрос. Это поможет вам в решение спорных вопросов, а также позволит быстрее изучить необходимый материал.

Зачем покупать курс «Всё включено»?

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

Нужно ли докупать подписку?

Нет, подписку дополнительно приобретать не нужно. Она выдается автоматически при покупке курса на сайте. Просмотр курса на сайте осуществляется на время подписки. Продление подписки не обязательное. Также все уроки вы сможете скачать с сайта.

Основы JavaScript

JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.

Что такое JavaScript на самом деле?

JavaScript («JS» для краткости) — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.

JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!

JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:

• Программные интерфейсы приложения (API), встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.
• Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.
• Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.

Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей учебной области JavaScript и в остальной части MDN.

Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!

Пример «hello world»

Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.

Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать «hello world!» пример (стандарт в начальных примерах программирования).

Предупреждение: Важно: Если вы не следили за остальным нашим курсом, скачайте этот пример кода и используйте его в качестве стартовой точки.

1. Для начала перейдите на ваш тестовый сайт и создайте папку с именем ‘scripts’ (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем main.js . Сохраните его в вашей папке scripts .
2. Далее перейдите в ваш index.html файл и введите следующий элемент на новой строке прямо перед закрывающим тегом :

script src="scripts/main.js"> script> 

var myHeading = document.querySelector("h1"); myHeading.textContent = "Hello world!"; 

Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите index.html в браузере. Вы должны увидеть что-то вроде этого:

Что произошло?

Итак, ваш заголовок текста был изменён на «Hello world!» с помощью JavaScript. Мы сделали это с помощью вызова функции querySelector() , захватив ссылку на наш заголовок и сохранив её в переменной, названной myHeading . Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

После этого, вы устанавливаете значение переменной myHeading в textContent свойство (которое представляет собой контент заголовка) «Hello world!».

Ускоренный курс по основам языка

Давайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало!

Предупреждение: Важно: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью Откройте для себя браузерные инструменты разработчика.

Переменные

Переменные — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова var (не рекомендуется, продолжайте читать, чтобы получить объяснения) или let , за которым следует любое имя, которым вы захотите её назвать:

let myVariable; 

Примечание: Точка с запятой в конце строки указывает, где заканчивается оператор. Точку с запятой нужно обязательно использовать для разеделения операторов, располагающихся на одной строке. Однако некоторые люди считают, что хорошая практика — указывать её в конце каждого оператора. Существуют и другие правила, когда нужно ставить точку с запятой, а когда нет. Смотрите более подробно в статье ваше руководство по точкам с запятой в JavaScript.

Примечание: вы можете назвать переменную практически как угодно, но есть некоторые ограничения для её имени (смотрите в правилах именования переменных). Если вы не уверены, вы можете проверить имя вашей переменной, чтобы увидеть корректно ли оно.

Примечание: JavaScript чувствителен к регистру — myVariable отличается от переменной myvariable . Если у вас возникают проблемы в вашем коде, проверьте регистр!

**Примечание:**Для получения более подробной информации о разнице между var и let, смотрите: Разница между var и let.

После объявления переменной вы можете присвоить ей значение:

Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:

var myVariable = "Bob"; 

Вы можете получить значение, просто вызвав переменную по имени:

После установки значения переменной вы можете изменить его позже:

var myVariable = 'Bob'; myVariable = 'Steve';

Обратите внимание, что переменные имеют разные типы данных:

Переменная	Пояснение	Пример
String	Последовательность текста, называемая строкой. Чтобы указать, что это значение является строкой, вы должны заключить его в кавычки.	var myVariable = ‘Bob’;
Number	Числа. Числа не имеют кавычек вокруг них.	var myVariable = 10;
Boolean	Значение True(Правда)/False(Ложь). Слова true и false специальные ключевые слова в JS, и не нуждаются в кавычках.	var myVariable = true;
Array	Массив, который позволяет хранить несколько значений в одной ссылке.	var myVariable = [1,’Bob’,’Steve’,10]; Обратиться к каждому элементу массива можно так: myVariable[0] , myVariable[1] , и т.д.
Object	В принципе, что угодно. Все в JavaScript является объектом, и может храниться в переменной. Имейте это в виду, пока вы учитесь.	var myVariable = document.querySelector(‘h1’); Все это из вышеприведённых примеров.

Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.

Комментарии

Комментарии — это, по сути, короткие фрагменты текста, которые могут быть добавлены в код, и которые игнорируются браузером. Вы можете поместить комментарии в JavaScript-код, так же как вы делали это в CSS:

/* Всё, что находится тут - комментарий. */ 

Если ваш комментарий не содержит переноса строк, то зачастую легче поставить две косые черты, как тут:

// Это комментарий 

Операторы

operator (en-US) — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведённой ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.

Оператор	Пояснение	Символ(ы)	Пример
Сложение (Конкатенация)	Используется для сложения двух чисел или склеивания двух строк вместе.	+	6 + 9; «Hello » + «world!»;
Вычитание, Умножение, Деление	Они делают то, чего вы от них ожидаете в математике.	— , * , /	9 — 3; 8 * 2; // умножение в JS это звёздочка 9 / 3;
Присваивание	Вы уже это видели: он присваивает значение переменной.	=	var myVariable = ‘Bob’;
Равенство (Тождество)	Делает проверку, если увидит, что два значения равны друг другу, то возвращает результат true / false (Boolean).	===	var myVariable = 3; myVariable === 4;
Отрицание (Неравенство)	Возвращает логически противоположное значение, которое ему предшествует; превращает true в false , и т.д. Когда используется вместе с оператором равенства, оператор отрицания проверяет, являются ли два значения не равными.	! , !==	Основное выражение true , но сравнение возвращает false , потому что мы отрицаем его: var myVariable = 3; !(myVariable === 3); Здесь мы проверяем » myVariable НЕ равно 3″. Это возвращает false , потому что myVariable равно 3. var myVariable = 3; myVariable !== 3;

Существует намного больше операторов для изучения, но этих пока хватит. Смотрите их полный список в разделе выражения и операторы.

Примечание: Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите «35» + «25» в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, 35 + 25 , то получите правильный результат.

Условия

Условия — это конструкции в коде, которые позволяют проверить истинность или ложность выражения и выполнить другой код в зависимости от полученного результата. Самая распространённая форма условия — инструкция if . else . Например:

var iceCream = "chocolate"; if (iceCream === "chocolate")  alert("Yay, I love chocolate ice cream!"); > else  alert("Awwww, but chocolate is my favorite. "); > 

Выражение внутри if ( . ) — это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную iceCream со строкой chocolate и увидеть равны ли они. Если это сравнение возвращает true , выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции else .

Функции

Функции — способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определённая процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:

var myVariable = document.querySelector("h1"); 

alert("hello!"); 

Эти функции, document.querySelector и alert , встроены в браузер для того, чтобы вы использовали их всякий раз, когда вам это необходимо.

Если вы видите что-то, что выглядит как имя переменной, но имеет после него скобки — () , скорее всего, это функция. Функции часто принимают аргументы — биты данных, которые им необходимы для выполнения своей работы. Они находятся в скобках, и разделяются запятыми, если присутствует более одного аргумента.

Например, функция alert() вызывает всплывающий блок, появляющийся в окне браузера, но мы должны дать ему строку в качестве аргумента, чтобы сказать функции, что писать во всплывающем блоке.

Хорошая новость заключается в том, что вы можете определить свои собственные функции — в следующем примере мы напишем простую функцию, которая принимает два числа в качестве аргументов и умножает их:

function multiply(num1, num2)  var result = num1 * num2; return result; > 

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

multiply(4, 7); multiply(20, 20); multiply(0.5, 3); 

Примечание: Инструкция return сообщает браузеру, что нужно вернуть переменную result из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется областью видимости (en-US) переменной. (Читайте больше об области видимости переменных.)

События

Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является событие клика (en-US) , которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:

.querySelector("html").onclick = function ()  alert("Ouch! Stop poking me!"); >; 

Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем элемент и устанавливаем ему обработчик свойства onclick (en-US) анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.

Обратите внимание, что

.querySelector("html").onclick = function () >; 

var myHTML = document.querySelector("html"); myHTML.onclick = function () >; 

Просто так короче.

Прокачаем пример нашего веб-сайта

Теперь, когда мы прошли некоторые основы JavaScript, давайте добавим несколько крутых несложных функций в пример нашего сайта, чтобы дать вам некоторое представление о принципах работы.

Добавление смены изображения

В этом разделе мы добавим ещё одно изображение на наш сайт и добавим некоторый простой JavaScript для переключения между двумя изображениями, когда по ним щёлкнули.

1. В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.
2. Сохраните изображение в вашу папку images .
3. Переименуйте это изображение в ‘firefox2.png’ (без кавычек).
4. Перейдите в ваш файл main.js и введите следующий JavaScript. (Если ваш «hello world» JavaScript по-прежнему существует, удалите его.)

var myImage = document.querySelector("img"); myImage.onclick = function ()  var mySrc = myImage.getAttribute("src"); if (mySrc === "images/firefox-icon.png")  myImage.setAttribute("src", "images/firefox2.png"); > else  myImage.setAttribute("src", "images/firefox-icon.png"); > >; 

1. Мы получаем значение из атрибута src изображения.
2. Мы используем условие для проверки значения src, равен ли путь к исходному изображению:
   1. Если это так, мы меняем значение src на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента .
   2. Если это не так (значит, оно должно было уже измениться), мы меняем значение src , возвращаясь к первоначальному пути изображения, каким он был изначально.

   Добавление персонального приветственного сообщения

   Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдёт на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернётся — мы сохраним его с помощью Web Storage API. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.

   В index.html , добавьте следующую строку перед элементом :

   button>Change userbutton> 

   var myButton = document.querySelector("button"); var myHeading = document.querySelector("h1"); 

   function setUserName()  var myName = prompt("Please enter your name."); localStorage.setItem("name", myName); myHeading.textContent = "Mozilla is cool, " + myName; > 

   if (!localStorage.getItem("name"))  setUserName(); > else  var storedName = localStorage.getItem("name"); myHeading.textContent = "Mozilla is cool, " + storedName; > 

   .onclick = function ()  setUserName(); >; 

   Теперь, когда вы впервые заходите на сайт, он попросит вас указать имя пользователя, а затем предоставит вам персональное сообщение. Вы можете изменить имя в любое время, нажав на кнопку. В качестве дополнительного бонуса, поскольку имя хранится внутри localStorage, оно сохраняется после закрытия сайта, сохраняя при этом персонализированное сообщение при следующем открытии сайта!

   Заключение

   Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

   

   Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.

   Здесь мы узнали только самую поверхность JavaScript. Если вам понравился этот язык и вы хотите изучить его поглубже, перейдите к нашему разделу изучение JavaScript.

   В этом модуле

   • Установка базового программного обеспечения
   • Каким должен быть ваш веб-сайт?
   • Работа с файлами
   • Основы HTML
   • Основы CSS
   • Основы JavaScript
   • Публикация вашего веб-сайта
   • Как работает Веб

   Found a content problem with this page?

   • Edit the page on GitHub.
   • Report the content issue.
   • View the source on GitHub.

   This page was last modified on 3 авг. 2023 г. by MDN contributors.

   Your blueprint for a better internet.

   Как создать сайт на фреймворке Cample.js?

   В данной статье будет описано небольшое руководство по тому, как создать сайт на таком фреймворке как Cample.js. На момент написания статьи (версия 3.1.2), фреймворк уже более года находится в разработке. За это время был реализован минимальный функционал для создания современных веб-приложений.

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

   Прежде всего, для того, чтобы создать сайт на фреймворке, необходимо будет его установить. Для установки фреймворка будет необходим Node.js. Благодаря нему, в консоли появится возможность использования npm, через который будет скачиваться фреймворк.

   Скачивание фреймворка происходит путём ввода команды в консоль в папке с проектом:

   npm i cample

   После, в папке node_modules появляется сам модуль. Для использования фреймворка необходима среда, которая будет поддерживать import export модель, благодаря которой будет выстроен код. Такую среду, к примеру, можно настроить благодаря webpack и подходящим модулям, для работы с HTML, стилями, изображениями и т.д. Но, в теории, подходит почти любой сборщик модулей.

   Далее, необходим HTML файл, который будет основой для сайта. К нему будет подключаться javascript файл, где будут реализованы скрипты фреймворка.

   В HTML файле, стартовой точкой сайта пускай будет тег div с id main. В нём будет находится основной контент сайта.

   В javascript файле для начала нужно импортировать такую функцию как cample. Данная функция создаёт экземпляр класса, который является начальной точкой в js для сайта.

   import < cample >from "cample";

   Данная функция принимает первым параметром selector блока, куда будет рендериться сайт, а вторым, необязательным параметром, функция принимает объект с опциями. Для дальнейшей работы будет использоваться один параметр.

   const mainCample = cample("#main");

   Все функции в фреймворке создают экземпляры классов. В данном случае, в переменную с названием main присваивается экземпляр класса. У данной переменной теперь можно вызвать метод render, в который будут переданы все компоненты, которые созданы, а также основной HTML template, который будет обработан.

   mainCample.render( ` 
   >
    `, < content, tableRows, >);

   Используя двойные фигурные скобочки скрипт применяет такой приём как «интерполяция строк», благодаря которому будет создана срока такого типа:

   Такая строчка потом заменяется на HTML компонента. Для того, чтобы работать с компонентами, в js файл нужно импортировать соответствующие функции. В примере будут использоваться функции each и component, которые предоставляют необходимый функционал.

   import < component, each >from "cample";

   Сам же компонент, к примеру, будет выглядеть вот так:

   const content = component( "content-component", ` 
   >
    
    
    
   Тестовые данные
    
    
    
    
    
    `, < data: () =>< return < title: "Основная страница", data: ["Тестовая строка"], >; >, export: < tableData: < data: < data: "data", >, >, >, exportId: "mainExport", style: ".title", > );

   В данном примере создаётся div с заголовком h1 и таблицей, данные для которой импортируются из компонента. Подробнее про работу с компонентами можно посмотреть в документации тут. Данные для таблицы хранятся в свойстве data, в которой есть один текст: «Тестовая строка». В зависимости от этого в таблице будет только одна строка.

   Для того, чтобы отобразить данные для таблицы, необходим компонент each. Он повторяет HTML код в зависимости от данных.

   const tableRows = each( "rows-component", (< importedData >) => importedData.data, `>> >  `, < import: < value: [], exportId: "mainExport", >, > );

   Главным моментом при создании цикла является указание свойства key для повторяющегося HTML. Более подробно о том, чем отличается keyed реализация от non-keyed можно посмотреть тут. При импортировании, в функции данных можно указать то самое импортированное свойство data, тем самым отобразив данные на сайте. В самом свойстве import для значения value можно указать пустой массив, тем самым импортировав всё то, что экспортируется.

   Таким образом, весь код выглядит примерно вот так:

   import < cample, component, each >from "cample"; const content = component( "content-component", ` 
   >
    
    
    
   Тестовые данные
    
    
    
    
    
    `, < data: () =>< return < title: "Основная страница", data: ["Тестовая строка"], >; >, export: < tableData: < data: < data: "data", >, >, >, exportId: "mainExport", style: ".title", > ); const tableRows = each( "rows-component", (< importedData >) => importedData.data, `>> >  `, < import: < value: [], exportId: "mainExport", >, > ); const mainCample = cample("#example"); mainCample.render( ` 
   >
    `, < content, tableRows, >);

   Результатом же кода, будет примерно такая страница:

   

   Стили для таблицы были импортированы с основного сайта. Также, шрифт от браузера, в теории, может отличаться.

   Всем большое спасибо за прочтение статьи!