1 Востаннє редагувалося dialectstat (08.05.2017 11:00:36)

Тема: Простенька веб-сторінка

Як без досвіду в вебі швидко зробити таку сторінку:
Два спадних меню, в яких вибираємо змінну var1 і var2, відповідно.
Після вибору виводиться картинка з назвою var1_var2.png
Картинка масштабується при зміні розміру вікна браузера.

Що є:
Доступ до сервера зі статичним IP, і папка з кількома тисячами зображень там.
Досвід в Python і C++.

2 Востаннє редагувалося Vi (08.05.2017 12:01:53)

Re: Простенька веб-сторінка

без досвіду в вебі швидко зробити

Лише за допомогою CMS у яких є конструктори в один клік.

P.S. Хоча завдання не таке й складне, та може бути реалізоване парою JS функций.

3

Re: Простенька веб-сторінка

Vi написав:

P.S. Хоча завдання не таке й складне, та може бути реалізоване парою JS функций.

Напевне так і зроблю.

4

Re: Простенька веб-сторінка

Ок, спадне меню роблю як

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
</select>

Але в мене сотня можливих значень, як їх зчитувати з файлу, щоб не вводити врчучну?

5

Re: Простенька веб-сторінка

Задав масивом

<select id="selectNumber" name="selectNumber">
    <option>Choose a number</option>
</select>


<script>
var select = document.getElementById("selectNumber");
var options = ["test1","test2","test3",];
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

</script>

Як вивести вибрану величину?

6 Востаннє редагувалося ostap34PHP (08.05.2017 16:48:14)

Re: Простенька веб-сторінка

dialectstat написав:

Задав масивом

<select id="selectNumber" name="selectNumber">
    <option>Choose a number</option>
</select>


<script>
var select = document.getElementById("selectNumber");
var options = ["test1","test2","test3",];
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

</script>

Як вивести вибрану величину?

Так вона вже в вас виводиться, функцією

 select.appendChild(el);

7

Re: Простенька веб-сторінка

Куди виводить? Після вибору нічого ніде не появляється.

Подякували: ostap34PHP1

8

Re: Простенька веб-сторінка

Приблизно так: https://jsfiddle.net/fz47Lv1f/

9

Re: Простенька веб-сторінка

koala написав:

Приблизно так: https://jsfiddle.net/fz47Lv1f/

Дякую.
В мене кількість опцій var більше ста. Можу задати їх масивом. Як тоді циклом їх читати для відображення в спадному меню?

Подякували: ostap34PHP1

10

Re: Простенька веб-сторінка

Ну у вас же є код для додавання опцій з масиву, так і робіть. Чи ви щось інше маєте на увазі під "читати для відображення в спадному меню"?

Подякували: ostap34PHP1

11 Востаннє редагувалося Vi (09.05.2017 08:04:11)

Re: Простенька веб-сторінка

dialectstat написав:

як їх зчитувати з файлу, щоб не вводити врчучну?

Гадаю саме час сказати що та навіщо ты пишешь. Бо "читати з файлу" у  WEB не можливо. Тобто можливо, але так ніхто не робить принаймі у коді сторінки. А тому тобі не лише сторінку до браузеру, а й бекенд прийдеться писати. А це вже трішечки складніше, та залежить від багатьох умов, наприклад вид того де и як зберігати твоі картинки та як вони каталогізовані.

Подякували: ostap34PHP1

12 Востаннє редагувалося dialectstat (09.05.2017 09:52:13)

Re: Простенька веб-сторінка

koala написав:

Приблизно так: https://jsfiddle.net/fz47Lv1f/

Скопіював код, але зображення не виводиться, помилки теж ніякої не виводить. Код виглядає ось так

<html>
<header><title>This is title</title></header>
<body>

<select size="1" id="part_1">
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
</select>
<select size="1" id="part_2">
<option value="var4">var1</option>
<option value="var5">var2</option>
<option value="var6">var3</option>
</select>
<img id="target">

<script>
$("select").on('change',()=>{
        var part_1=$('#part_1').val();
  var part_2=$('#part_2').val();
  var link = 'http://c.connexun.com/relation/ukr_fin.png';
  $("#target").attr('src',link);
  $("#target").attr('alt',link);  
});

</script>

</body>
</html>

Файл ukr_fin.png міститься в тій самій папці що й index.html
Хоча на https://jsfiddle.net/fz47Lv1f/1/ працює з http://c.connexun.com/relation/ukr_fin.png

Подякували: ostap34PHP1

13 Востаннє редагувалося Vi (09.05.2017 11:06:59)

Re: Простенька веб-сторінка

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Cache-Control" content="no-cache" /> 
  <script>
    var Img,Combo1,Combo2;
    function CreateSelector(aVar){
        let Combo=document.createElement('SELECT');
        for(let i=0;i<aVar.length;i++){
            let Opt=document.createElement('OPTION');
            Opt.innerHTML=aVar[i];
            Opt.Data=aVar[i];
            Combo.appendChild(Opt);
        };
        document.body.appendChild(Combo);
        return Combo;
    }
    function ifchange(){
        Img.src=(Combo1.options[Combo1.selectedIndex].Data)
               +'_'+(Combo2.options[Combo2.selectedIndex].Data)
               +'.png'
        ;
    }
    function ifload(){
      source={
         var1:['var1','var2']
        ,var2:['var4','var5']
      };
      
      Combo1=CreateSelector(source.var1);
      Combo2=CreateSelector(source.var2);
      Img=document.createElement('IMG');
      document.body.appendChild(Img);
      Combo2.onchange=ifchange;
      Combo1.onchange=ifchange;
      
      
      
    };
  </script>
</head>

<body onload="ifload()">

</body>
</html>
Подякували: ostap34PHP1

14

Re: Простенька веб-сторінка

Vi, просто біла сторінка http://c.connexun.com/relation/

15

Re: Простенька веб-сторінка

У тебе в relation нема файлов з картинками.
Підкорегуй адресу звідки картинку грузити  :)

Подякували: ostap34PHP1

16 Востаннє редагувалося dialectstat (09.05.2017 11:24:01)

Re: Простенька веб-сторінка

Vi написав:

У тебе в relation нема файлов з картинками.
Підкорегуй адресу звідки картинку грузити  :)

Прописав:

 function ifchange(){
        Img.src='http://c.connexun.com/relation/ukr_fin.png'
        ;
}

Без змін. Навіть два спадні меню не виводяться.

Подякували: ostap34PHP1

17 Востаннє редагувалося Vi (09.05.2017 12:21:57)

Re: Простенька веб-сторінка

Без змін.

Де знаходиться ukr_fin.png?
Якщо в адресній срочці браузера прописати адресу до файлу, браузер його покаже чи ні?

18

Re: Простенька веб-сторінка

Vi написав:

Без змін.

Де знаходиться ukr_fin.png?
Якщо в адресній срочці браузера прописати адресу до файлу, браузер його покаже чи ні?

Покаже, ось він http://c.connexun.com/relation/ukr_fin.png
І тут його показує https://jsfiddle.net/fz47Lv1f/1/

Подякували: ostap34PHP1

19

Re: Простенька веб-сторінка

Ще раз:

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Cache-Control" content="no-cache" /> 
  <script>
    var Img,Combo1,Combo2;
    function CreateSelector(aVar){
        let Combo=document.createElement('SELECT');
        for(let i=0;i<aVar.length;i++){
            let Opt=document.createElement('OPTION');
            Opt.innerHTML=aVar[i];
            Opt.Data=aVar[i];
            Combo.appendChild(Opt);
        };
        document.body.appendChild(Combo);
        return Combo;
    }
    function ifchange(){
        Img.src=' http://c.connexun.com/relation/'+(Combo1.options[Combo1.selectedIndex].Data)
               +'_'+(Combo2.options[Combo2.selectedIndex].Data)
               +'.png'
        ;
    }
    function ifload(){
      source={
         var1:['','ukr','var2']
        ,var2:['','fin','var5']
      };
      
      Combo1=CreateSelector(source.var1);
      Combo2=CreateSelector(source.var2);
      Img=document.createElement('IMG');
      document.body.appendChild(Img);
      Combo2.onchange=ifchange;
      Combo1.onchange=ifchange;
      
      
      
    };
  </script>
</head>

<body onload="ifload()">

</body>
</html>

Перевірив на своєму - все показує, колі вибирати й там й там.

Подякували: ostap34PHP1

20 Востаннє редагувалося dialectstat (09.05.2017 12:46:12)

Re: Простенька веб-сторінка

Оновив, все одно біле поле без меню і в Хромі і Мозілі. Подивіться самі http://c.connexun.com/relation/