Главная страница

bogachenkov

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

1. window.open(«Адресс страницы», Имя_окна [, Параметры_окна]) — создает новое окно браузера , аналогично команде «Новое окно» в меню браузера. Обычно это не вкладка, а именно новое окно, но в некоторых браузерах можно настроить то или иное поведение явным образом. Если вместо адреса страницы — пустая строка, то в окно будет загружен пустой ресурс about:blank. В любом случае, загрузка осуществляется асинхронно. Создается пустое окно, загрузка ресурса в которое начнется уже после завершения исполнения текущего блока кода.
2. document.write(аргумент1[, аргумент2[, аргумент3[, . ]]]) — метод, выводящий на страницу переданные ему аргументы. Аргументов может быть любое количество, и они могут быть любых типов, при выводе они преобразуются в строки. Также существует функция document.writeln, которая аналогична document.write, но добавляет в конце своего вывода перевод строки.

В итоге, простейший пример с их исспользованием принимает следующий вид:

var win1 // Объявляем переменную для нового окна.

alert(«Сейчас откроется новое окно.»); // Предупреждаем пугливого пользователя.

win1 = window.open («», «Scriptic», «resizable=1, width=300, height=150»);

// Присваиваем переменной win1 новое пустое окно размерами 300х150

win1.document.open (); // Открываем его.

// Заполняем только что созданный документ.

window.focus(); // Переводим фокус.

// Укажем, что наш скрипт запускается при загрузке страницы.

По неизвестным причинам, FireFox напрочь отказывается открывать новое окно. Возможно, причина в реализации FireFox на Linux-системах, но блокировка открытия нового окна не снимается.

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

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

left/top — Расстояние от левой/верхней границы окна операционной системы до границы нового окна. Новое окно не может быть создано за границами экрана height/width -Высота/ширина в пикселях внутренности нового окна, включая полосы прокрутки, если они есть. Минимальное значение: 100 menubar — Если этот параметр установлен в yes, то в новом окне будет меню. Toolbar — Если этот параметр установлен в yes, то в новом окне будет навигация (кнопки назад, вперед и т.п.) и панель вкладок location — Если этот параметр установлен в yes, то в новом окне будет адресная строка directories — Если этот параметр установлен в yes, то в новом окне будут закладки/избранное status — Если этот параметр установлен в yes, то в новом окне будет строка состояния resizable — Если этот параметр установлен в yes, то пользователь сможет изменить размеры нового окна. Рекомендуется всегда устанавливать этот параметр. Scrollbars — Если этот параметр установлен в yes, то новое окно при необходимости сможет показывать полосы прокрутки

Как можно было увидеть, всё довольно таки просто. 🙂

Источник

Урок 7. JavaScript в веб-разработке

Модели BOM и DOM. Навигация по элементам документа. Доступ к узлам и атрибутам страницы. Изменение структуры DOM. Основные браузерные события.

1. Объект window
2. Объект document — модель DOM
3. Объектная модель браузера — BOM
4. Подключение скриптов к сайт

1. Создадим текстовый элемент и заголовок первого уровня в начале страницы .
2. Копирование абзаца и добавление его после секции с заменой текст.
3. Замена всех тегов на странице заголовками второго уровня.
4. Добавление текста со специальными символами

1. Вывод содержимого атрибута «class».
2. Изменение классов
3. Изменение атрибутов тегов
4. Сброс стилей

1. Обработка события через свойство тэга.
2. Обработка события через выбор элемента в js-файле.
3. Обработка события через специальные методы.
4. Параметр event функции-обработчика.
5. Этапы события (погружение, достижение цели, всплытие).
6. Делегирование событий

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

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

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

Чтобы JavaScript получил возможность запуска (в браузере, операционной системе), необходимо предоставить ему определенную функциональность. Ее называют окружением. Окружение позволяет языку программирования получить доступ к своим объектам, функциям, переменным в дополнение к базовым инструментам JavaScript. В частности, браузер «разрешает» управлять web-страницами. Схема браузерного окружения приведена ниже:

Источник

Создаем простой сайт на Node JS

Node.js — это среда выполнения JavaScript, которая позволяет разрабатывать серверные приложения на JavaScript. В этом руководстве мы рассмотрим, как создать простой сайт на Node.js с использованием фреймворка Express.

Установка Node.js

Перед началом работы убедитесь, что у вас установлен Node.js. Если нет, скачайте и установите его с официального сайта: https://nodejs.org/

Создание проекта

Создайте новую папку для вашего проекта и перейдите в неё с помощью терминала. Затем инициализируйте новый проект Node.js с помощью следующей команды:

Заполните информацию о проекте и подтвердите создание файла package.json.

Установка Express

Express — это популярный веб-фреймворк для Node.js. Установите его с помощью команды:

Создание сервера

Создайте файл app.js в корне вашего проекта и добавьте следующий код:

const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => < res.send('Привет, мир!'); >); app.listen(port, () => < console.log(`Сервер запущен на http://localhost:$`); >); 

Этот код создает простой сервер, который слушает порт 3000 и отвечает на запросы к корневому пути.

Запуск сервера

Чтобы запустить сервер, выполните следующую команду:

Откройте браузер и перейдите на http://localhost:3000. Вы увидите сообщение «Привет, мир!».

Создание маршрутов

Вы можете создавать маршруты для обработки различных запросов. Добавьте следующий код в файл app.js:

app.get('/about', (req, res) => < res.send('О нас'); >); 

Теперь, если вы перейдете на http://localhost:3000/about, вы увидите сообщение «О нас».

Добавление шаблонизатора

Если вы хотите использовать шаблонизатор для отображения HTML, вы можете установить, например, EJS:

В файле app.js добавьте код:

Создайте папку views и добавьте файл index.ejs с этим содержимым:

      
Добро пожаловать на наш сайт!
 
Создано с использованием Node.js и Express.
    

Теперь измените маршрут / в файле app.js :

app.get('/', (req, res) => < res.render('index'); >); 

Если вы перейдете на сайт вы увидите отформатированную HTML-страницу.

Статические файлы

Если вам нужно подключить статические файлы, такие как изображения, CSS или JavaScript, создайте папку public и добавьте в файл app.js этот код:

app.use(express.static('public')); 

Для использования этих файлов на ваших страницах, добавьте ссылки на них в HTML-шаблоны. Например, если у вас есть файл styles.css и script.js в папке public, добавьте их так в ваш HTML-шаблон (например, index.ejs):

    
Добро пожаловать на наш сайт!
 
Создано с использованием Node.js и Express.
    

Если вы хотите вставить изображение, разместите его в папке public и добавьте тег с атрибутом src, указывающим на ваше изображение, в HTML-шаблон:

 
Добро пожаловать на наш сайт!