Как можно сделать динамический сайт на JavaScript?

16.06.2006, 11:19. **Показов** 9601. **Ответов** 7

Студворк — интернет-сервис помощи студентам

Здравствуйте!

Подскажите, плиз, как можно сделать динамический сайт на JavaScript? Ну, или хотябы динамический контент? Мне нужно, чтобы была одна оформленная страница (страница-тема или главная) и чтобы в эту страницу подгружались меню и контент (кода на ссылку в меню нажимаешь!)

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

Я в Нете нашел, есть такой журнал Протоплекс. Я посмотрел коды страниц этого журнала и там он сделан JS (динамический)! Но немогу понять, что куда нужно писать, чтобы все работало!

Только, плиз, неотвечайте кусками кода, потому что потом савсем ниче непонятно!!!

Заранее спасибо! Kaant!

@Alexadr · 16.06.2006, 17:00

Скопируй нижеследующий код и поэкспериметрируй с ним. Обяснять в нечего, тем более что его не много. В реальном деле кода будет значительно больше.
<STRONG><HTML>
<HEAD>
<TITLE>Пример выпадающего меню</TITLE>
<style>
.hidden {position: absolute; visibility: hidden;}
.visible {position: absolute; visibility: visible; z-index: 2;}
</style>
<script language="JavaScript
function showObject(obj) {
obj.className = "visible"
}
function hideObject(obj) {
obj.className = "hidden"
}
function changeSrc(obj,newSrc) {
obj.bgcolor = newSrc;
}
</script>
</HEAD>
<body topmargin=0 leftmargin=0>
<div style="position: absolute; top: 20px; left: 20px;" onmouseover="showObject(Nav2)" onmouseout="hideObject(Nav2)
<table border="1" width="120" height="25
<tr><td align="center Menu</td></tr>
</table>
</div>
<div id="Nav2" class="hidden" style="position: absolute; top: 45px; left: 20px;"onmouseover="showObject(Nav2)"onmo useout="hideObject(Nav2)
<table border="1" width="120
<tr>
<td><a href="http:\ya.ru Item 1</a></td>
</tr>
<tr>
<td><a href="http:\ra.ru Item 2</a></td>
</tr>
<tr>
<td><a href="http:\ya.ru Item 3</a></td>
</tr>
<tr>
<td><a href="http:\ra.ru Item 4</a></td>
</tr>
</table>
</div>
</body>
</HTML></STRONG>

@bazile · 16.06.2006, 19:43

2 kaant
Java и JavaScript не имеют ничего общего. Поэтому Ваша тема перенесена из форума по Java в форум по JavaScript.

@arhistratig13 · 27.04.2015, 04:56

Поднимаю обсуждение! Ищу ответ на этот вопрос... не владею javascript делаю небольшой сайт.
Раньше динамически встраивал контент в PHP вот так:

PHP
1
2
3
4
5
6
7
8
<?php
if(!isset($_GET['page'])){
    $page = 'main';
}
else{
    $page = addslashes(strip_tags(trim($_GET['page'])));
}
?>

PHP
1
<a href="/index.php?page=abbreviations">Список используемых сокращений</a>

PHP
1
2
3
  <div id="content">
    <?php require ('pages/'.$page.'.php');?>
  </div>

А сейчас ищу подобное в javascript, пока ничего не получается, в принципе могу оставить и на php, но хотелось бы подвести все под javascript

@СтаниславТ · 27.04.2015, 05:27

arhistratig13, javascipt и php эта 2 разных языка программирования, предназначенные каждый только для своей цели. В javascript есть фреймворк node.js, который появился не так давно и который якобы заменит php. но чего не случилось того - не случилось. при помощи него действительно, можно писать скрипты для сервера. но я рекомендую выучить php, а c node.js разбираться позже.
Если вас интересует серверное программирование на javascript, овладевайте node.js, только информации по нему до сех пор очень мало на русском языке.

@Sraimon · 27.04.2015, 18:13

В общем у вас есть 2 варика
1) Php вас не интересует
2) JavaScript рассмотрим его
Выложу сразу js,css,html под спойлер

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src='https://code.jquery.com/jquery-2.1.3.min.js'></script> 
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="v1">
        <div class="red">123</div>  
        <div class="green">123</div>
        <div class="test">Тык</div>
        <div class="test1">Тык1</div>
    </div>
    
    <div class="v2">
        <div class="test2">Тык2</div>
        <div class="test3">Тык3</div>
        <div class="background">123</div>
    </div>
    <script src="test.js"></script>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
.red{
    background: red;
    display: none;
}
 
.green{
    background: green;
    display: none;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(".test").click(function() {
    $('.red').css('display','none');
    $('.green').css('display','block');
});
$(".test1").click(function() {
    $('.red').css('display','block');
    $('.green').css('display','none');
});
 
 
$(".test2").click(function() {
    var foo = jQuery('.background');
    foo.detach();
    $('.v2').append('<div class="background" style="background: green; width: 100px; height: 100px;">Lorem</div>')
});
$(".test3").click(function() {
    var foo = jQuery('.background');
    foo.detach();
    $('.v2').append('<div class="background"  style="background: red; width: 200px; height: 300px;">123</div>')
});

Вообщем у вас 2 варианта действия либо скрывать блоки из поля зрения либо добавлять их
скрываем блоки

JavaScript
1
2
3
4
5
6
7
8
$(".test").click(function() {
    $('.red').css('display','none');
    $('.green').css('display','block');
});
$(".test1").click(function() {
    $('.red').css('display','block');
    $('.green').css('display','none');
});

добавляем блоки

JavaScript
1
2
3
4
5
6
7
8
9
10
$(".test2").click(function() {
    var foo = jQuery('.background');
    foo.detach();
    $('.v2').append('<div class="background" style="background: green; width: 100px; height: 100px;">Lorem</div>')
});
$(".test3").click(function() {
    var foo = jQuery('.background');
    foo.detach();
    $('.v2').append('<div class="background"  style="background: red; width: 200px; height: 300px;">123</div>')
});

но по мне писать стили в js плохая практика !

Добавлено через 1 минуту
обратите внимание подключена библиотека jquery!

Добавлено через 2 минуты

Сообщение от СтаниславТ

В javascript есть фреймворк node.js, который появился не так давно и который якобы заменит php. но чего не случилось того - не случилось.

а почему бы и нет но это будет актуально то ко года через полтора

Добавлено через 7 минут
А да можно еще div в 0 свернуть

JavaScript
1
2
3
4
5
6
7
8
9
$(".test").click(function() {
    $('.red').css('overflow','hidden');
    $('.red').css('width','0');
 
});
$(".test1").click(function() {
    $('.red').css('overflow','auto');
    $('.red').css('width','auto');
});

@arhistratig13 · 28.04.2015, 00:16

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

Может есть другие стандарты/языки которые могут сделать эту простенькую задачу?

@Sraimon · 28.04.2015, 03:03

На счет языков не в курсе может быть какие библиотеки надыбать по пробовать для js типо jQuery
А там смотря что надо мб одним css справится можно !
Если не поймешь как отпиши в скайп heknt12 время будет помогу !

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

kaant

	Как можно сделать динамический сайт на JavaScript? 16.06.2006, 11:19. Показов 9601. Ответов 7 Метки нет (Все метки) Здравствуйте! Подскажите, плиз, как можно сделать динамический сайт на JavaScript? Ну, или хотябы динамический контент? Мне нужно, чтобы была одна оформленная страница (страница-тема или главная) и чтобы в эту страницу подгружались меню и контент (кода на ссылку в меню нажимаешь!) Или подскажите, где можно посмотреть информацию на подобную тему! Или может вы знаете как сделать такой динамосайт без применения языков для сервера!!! Я в Нете нашел, есть такой журнал Протоплекс. Я посмотрел коды страниц этого журнала и там он сделан JS (динамический)! Но немогу понять, что куда нужно писать, чтобы все работало! Только, плиз, неотвечайте кусками кода, потому что потом савсем ниче непонятно!!! Заранее спасибо! Kaant!

@Alexadr 0 / 0 / 2 Регистрация: 30.06.2011 Сообщений: 173
	16.06.2006, 17:00
	Скопируй нижеследующий код и поэкспериметрируй с ним. Обяснять в нечего, тем более что его не много. В реальном деле кода будет значительно больше. <STRONG><HTML> <HEAD> <TITLE>Пример выпадающего меню</TITLE> <style> .hidden {position: absolute; visibility: hidden;} .visible {position: absolute; visibility: visible; z-index: 2;} </style> <script language="JavaScript function showObject(obj) { obj.className = "visible" } function hideObject(obj) { obj.className = "hidden" } function changeSrc(obj,newSrc) { obj.bgcolor = newSrc; } </script> </HEAD> <body topmargin=0 leftmargin=0> <div style="position: absolute; top: 20px; left: 20px;" onmouseover="showObject(Nav2)" onmouseout="hideObject(Nav2) <table border="1" width="120" height="25 <tr><td align="center Menu</td></tr> </table> </div> <div id="Nav2" class="hidden" style="position: absolute; top: 45px; left: 20px;"onmouseover="showObject(Nav2)"onmo useout="hideObject(Nav2) <table border="1" width="120 <tr> <td><a href="http:\ya.ru Item 1</a></td> </tr> <tr> <td><a href="http:\ra.ru Item 2</a></td> </tr> <tr> <td><a href="http:\ya.ru Item 3</a></td> </tr> <tr> <td><a href="http:\ra.ru Item 4</a></td> </tr> </table> </div> </body> </HTML></STRONG> 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	16.06.2006, 19:43
	2 kaant Java и JavaScript не имеют ничего общего. Поэтому Ваша тема перенесена из форума по Java в форум по JavaScript. 0

@СтаниславТ 5 / 5 / 0 Регистрация: 23.04.2015 Сообщений: 57
	27.04.2015, 05:27
	arhistratig13, javascipt и php эта 2 разных языка программирования, предназначенные каждый только для своей цели. В javascript есть фреймворк node.js, который появился не так давно и который якобы заменит php. но чего не случилось того - не случилось. при помощи него действительно, можно писать скрипты для сервера. но я рекомендую выучить php, а c node.js разбираться позже. Если вас интересует серверное программирование на javascript, овладевайте node.js, только информации по нему до сех пор очень мало на русском языке. 1

@arhistratig13 26 / 19 / 2 Регистрация: 18.06.2013 Сообщений: 121
	28.04.2015, 00:16
	СтаниславТ, Проблема не в том что мне не нравиться PHP, а в том что мне нужно сделать рабочим вне сервера, т.е. чтобы сайт/страница работала автономно на компе, без создания виртуального сервера... Я думал возможно есть красивое решение оформить выдачу контента. Sraimon, Буду разбираться, спасибо! Может есть другие стандарты/языки которые могут сделать эту простенькую задачу? 0

@Sraimon 11 / 11 / 1 Регистрация: 17.10.2014 Сообщений: 91
	28.04.2015, 03:03
	На счет языков не в курсе может быть какие библиотеки надыбать по пробовать для js типо jQuery А там смотря что надо мб одним css справится можно ! Если не поймешь как отпиши в скайп heknt12 время будет помогу ! 1