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

16.06.2006, 11:19. **Показов** 9611. **Ответов** 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 время будет помогу !

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

kaant

	Как можно сделать динамический сайт на JavaScript? 16.06.2006, 11:19. Показов 9611. Ответов 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