Кстати писать код гораздо приятнее и интереснее в специальном текстовом редакторе, который подсвечивает синтаксис. Многие используют Notepad++, некоторые Sublime. Ссылки не кидаю потому что их легко можно загуглить.

Для следующего примера вам придется поставить и запустить сервер. Наверное для первого раза это может показаться сложным. Но здесь начнется самое интересное. Предлагаю скачать XAMPP с https://www.apachefriends.org/index.html.

Процесс следующий:

Запускаем .exe если у вас windows (если нет, просьба посмотреть самостоятельно на сайте мануал по установке).

Далее XAMPP нужно настроить. Я предлагаю установить его вам в корень, то есть C://xampp. Так будет проще всего все искать. После того как он установился, заходим в

C:\xampp\htdocs и создаем папку test (называйте как хотите, лишь бы не запутались). В ней создаем файл index.php (!!! важно чтобы это был либо index.html либо index.php). открываем этот файлик и пишем

<?php echo "Yes we can!";

Сохраняем index.php.

Затем заходим в C:\xampp\apache\conf\extra

находим там httpd-vhosts.conf

открываем его и добавляем в конце:

<VirtualHost *:80>

DocumentRoot "C:\xampp\htdocs\test"

ServerName test

<Directory "C:\xampp\htdocs\test">

Options FollowSymLinks

AllowOverride all

Order deny,allow

Allow from all

</Directory>

</VirtualHost>

Это дает вашему локальному серверу XAMPP понять что в папке C:\xampp\htdocs\test есть файл index.php (или html) который нужно запустить. А параметр ServerName говорит ему о том что запустить его нужно тогда когда у него запросят адрес test.

Сохраняем httpd-vhosts.conf.

Теперь нужно зайти в C:\Windows\System32\drivers\etc (ребят с линуксом и mac, я честно хз как оно там у вас делается, никогда не настраивал, сорь)

найти там файл hosts, открыть его с помощью блокнота, а лучше Notepad++ или Sublime

и добавить в конец такую строку:

127.0.0.1 test

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

Сохраняем файл hosts.

Здесь может быть проблема. Иногда windows ругается что нет прав сохранить файл. И здесь на помощь и приходит Notepad++, он как то с этим справляется. Если не получается - вэлкам в гугл. Вообще мир вэбпрограммирования довольно жесток и гуглить приходится чуть более чем всегда. stackoverflow.com становится одним из наиболее посещаемых сайтов.

Как только вы побороли все вышеуказанные пункты (а не каждый пройдет этот шаг), мы готовы запустить xampp. Можно сделать через ярлычок на рабочем столе или зайдя в C:\xampp и открыв xampp-control.exe. Появится панелька на которой нас пока интересует лишь кнопка start напротив module Apache. Если вы ничего не написали лишнего в вышеуказанном файле httpd-vhosts.conf (вроде лишней точки или запятой) то красный бэкграунд слова Apache должен поменяться на зеленый, что означает что вы успешно запустили локальный сервер. Поздравляю!

Теперь в можете открыть ваш любимый браузер гуглхром и написать в адресной строке test/ (обязательно со слешем, иначе вас пошлют в гугл или яндекс). В качестве награды за все пройденные шаги вы должны увидеть гордое

Yes we can!

Or can we?


напомню (как кому-то не нравится) что я начал вести телеграм канал
https://t.me/web_programming_for_dummies
кому интересно узнать общую картину про веб программирование - вэлкам!

Продолжим.

При помощи JS делается много событий вроде замены текста. На странице про тэг <script> есть пример:

document.getElementById("demo").innerHTML = "Hello JavaScript!";

Давайте его добавим к нам на страницу. Для этого нам нужно добавить id к любому элементу чтобы потом к нему обращаться.

Допишем наш пример:

<h1 style="color:red">HW</h1>

<p id="victim">Some text you want to write</p>

<script type="text/javascript">

alert("hey there!");

document.getElementById("victim").innerHTML = "Hello JavaScript!";

</script>

Сохранить -> обновить в браузере.

Изначально текст в тэге <p>был "Some text you want to write", но JS сразу после загрузки страницы меняет его на "Hello JavaScript!"

Разбор новой строки:

1) document.getElementById() ищет элемент с указанным id

2) меняет внутренний HTML этого элемента (innerHTML) на желаемое значение. Это может быть текст, кусок HTML разметки, цифры и тд.

id элемента также используются и для удобства указания стилей в CSS. CSS размещается в тэге <style>.

Давайте перенесем стиль для <h1> в отдельное место и создадим стиль для id = "victim":

<style>

h1 {color:red}

#victim {color:blue}

</style>

<h1>HW</h1>

<p id="victim">Some text you want to write</p>

<script type="text/javascript">

alert("hey there!");

document.getElementById("victim").innerHTML = "Hello JavaScript!";

</script>

На данном примере видно что id элемента используется и в CSS и в JS.

Напомню что сделал канал https://t.me/web_programming_for_dummies и пишу в первую очередь туда.

Haters gonna hate, telegramers gonna know something new.