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

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

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

kaant

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