Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Нестандартный калькулятор, Калькулятор специфический 
:(
    Опции темы
mrbrainwash
Дата 5.5.2014, 17:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 5.5.2014

Репутация: нет
Всего: нет



Здравствуйте, передо мной стоит задача построить калькулятор на JavaScript с использованием DHTML. А именно: нужно чтобы калькулятор был построен без id (не использовать идентификаторы вообще), а применить свойства : getElementById (), createElement (),createTextNode (), appendChild (), insertBefore (). Видел много разных примеров калькуляторов, но как применять там эти свойства так и не понял. Подскажите, пожалуйста .
PM MAIL   Вверх
Aliance
Дата 5.5.2014, 17:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Это домашнее задание в университете? Если так, я перенесу тему в соответствующий раздел.

Если же нет - хотелось бы увидеть ваши попытки, чтобы убрать ощущение бесплатного фриланса.

Так же, немного противоречиво выглядит задание:
Цитата(mrbrainwash @  5.5.2014,  18:39 Найти цитируемый пост)
калькулятор был построен без id (не использовать идентификаторы вообще)

Цитата(mrbrainwash @  5.5.2014,  18:39 Найти цитируемый пост)
применить свойства : getElementById ()


PM MAIL WWW ICQ Skype   Вверх
mrbrainwash
Дата 5.5.2014, 20:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 5.5.2014

Репутация: нет
Всего: нет



Прошу прощения, getElementById () лишнее. Это задание для получения долдности стажера веб-рограммиста в одной из компаний моего города. Вот калькулятор, который я бы мог создать (имею в виду, что мне все понятно в нем), но так как он уже есть в сети, просто покажу его:

Код

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Калькулятор HTML&JavaScript</title>

<link rel="stylesheet" href="main.css">

</head>

<body>

<div id="mainDiv" align="center" >

<p>Калькулятор</p>

<form>

<table >

<tr>

<td colspan="3"><input type="text" id="textField" readonly /></td>

<td><input type="submit" id="submitButton" value="="/></td>

</tr>

<tr>

<td><input type="button" value="1" onclick="addToField(1)"/></td>

<td><input type="button" value="2" onclick="addToField(2)"/></td>

<td><input type="button" value="3" onclick="addToField(3)"/></td>

<td><input type="button" value="-" onclick="addToField('-')"/></td>

</tr>

<tr>

<td><input type="button" value="4" onclick="addToField(4)"/></td>

<td><input type="button" value="5" onclick="addToField(5)"/></td>

<td><input type="button" value="6" onclick="addToField(6)"/></td>

<td><input type="button" value="+" onclick="addToField('+')"/></td>

</tr>

<tr>

<td><input type="button" value="7" onclick="addToField(7)"/></td>

<td><input type="button" value="8" onclick="addToField(8)"/></td>

<td><input type="button" value="9" onclick="addToField(9)"/></td>

<td><input type="button" value="/" onclick="addToField('/')"/></td>

</tr>

<tr>

<td><input type="button" value="." onclick="addToField('.')"/></td>

<td><input type="button" value="0" onclick="addToField(0)"/></td>

<td><input type="button" value="Пи" onclick="addToField(3.14159265359)"/></td>

<td><input type="button" value="*" onclick="addToField('*')"/></td>

</tr>

<tr>

<td><input type="button" value="x^2" onclick="power(2)"/></td>

<td><input type="button" value="x^3" onclick="power(3)"/></td>

<td><input type="button" value="10^x" onclick="powten()"/></td>

<td><input type="reset" value="C" id="resetButton"/></td>

</tr>

</table>

</form>

</div>

<script src="script.js"></script>

</body>

</html>


Код

p{

font: 20px tahoma;

}

mainDiv{

background: skyblue;

width:350px;

margin:20px auto;

box-shadow:10px 10px 150px grey;

padding-top: 5px;

padding-bottom: 20px;

}

input[type="submit"]{

width:50px;

height:30px;

opacity:0.8;

border:0px;

}

input[type="button"], input[type="reset"]{

width:50px;

height:50px;

opacity:0.8;

border:0px;

}

input[type="text"]{

border:0px;

outline: none;

opacity:0.8;

height:27px;

width:159px;

}

input:hover{

opacity:1;

}


Код

var textField = document.getElementById('textField');

textField.focus();

var submit = document.getElementById('submitButton');

submit.addEventListener('click', buttonClicked, false);

function buttonClicked(e) {

e.preventDefault();

x = textField.value;

try {

x = eval(x);

textField.value = x;

} catch (ex) {

alert('Неверный формат');

}

}

function addToField(n) {

textField.value += n;

textField.focus();

}

function power(y) {

x = textField.value;

x = Math.pow(x, y);

textField.value = x;

textField.focus();

}

function powten() {

x = textField.value;

x = Math.pow(10, x);

textField.value = x;

textField.focus();

}


я просто не могу понять как здесь, к примеру, можно применить эти свойства, что я описывал выше. Не могли бы вы помочь, показав пример того, где их можно использовать в этом примере калькулятора. 

Это сообщение отредактировал(а) Aliance - 6.5.2014, 10:07
PM MAIL   Вверх
SoWa
Дата 5.5.2014, 21:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Харекришна
****


Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74



Мне кажется пока рановато Вам решать даже такие задачки. И дело тут не в JavaScript, HTML или других языках. Ваше стремление разобраться похвально, однако это не лучший пример для начинающих. Вам нужно набраться опыта в базовых вещах - переменные, условные операторы, циклы, процедуры, функции, классы и объекты, методы... Научиться базовым алгоритмам хотябы сортировок. Тогда у Вас возможно будет понимание что есть что и откуда ноги растут, почему так а не иначе, где и какие "свойства" использовать, как вообще формализовать задачу в программную систему.
А тот калькулятор, который Вы привели в примере - далеко не идеал. Например из-за использования eval (у Вас же есть представление, что это такое?).

А теперь что касается ответа на Ваш вопрос. Могу ошибаться с пониманием DHTML, но судя потому, что требуется использовать createElement, appendChild и прочих, то кажется от вас ожидают, что вы с помощью JS кода сгенерируете верстку страницы. Ну и логику на том же JS напишете, разумеется.


--------------------
Всем добра smile
PM MAIL ICQ   Вверх
mrbrainwash
Дата 5.5.2014, 22:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 5.5.2014

Репутация: нет
Всего: нет



Да что я не силен в web-программировании я и не спорю. Просто нужно выполнить данное задание и тогда попаду на обучение, где и разберусь детально со всем. Пример может и не самый удачный. Просто хотел на его примере чтобы вы мне показали как и где можно применять createElement, appendChild
PM MAIL   Вверх
Aliance
Дата 6.5.2014, 10:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



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

Так же есть такой ресурс как jsfiddle.net, где легко делиться такого рода кодом. На будущее, было бы удобнее, если бы ты код писал там, а здесь давал ссылку.

Что касается задачи. Тебе нужно с нуля написать свой калькулятор или отталкиваться от приведенного кода? Если можно первое, я бы начал писать свой.
PM MAIL WWW ICQ Skype   Вверх
mrbrainwash
Дата 6.5.2014, 12:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 5.5.2014

Репутация: нет
Всего: нет



Прошу прощение за неправильно оформленный код, не знал что можно так. Отталкиваться от этого калькулятора не нужно. Я его привел просто как пример. Я пытался уже сам писать, но никак не могу где и как нужно применить appendChild () и createElement () в калькуляторе
PM MAIL   Вверх
Aliance
Дата 6.5.2014, 12:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Все просто, значит тебе не ясно их назначение. Это исправляется чтением мануала. Если останутся вопросы - задавай.
PM MAIL WWW ICQ Skype   Вверх
mrbrainwash
Дата 6.5.2014, 19:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 5.5.2014

Репутация: нет
Всего: нет



Ага, щас почитаю. Вот уточнил задание :  есть html страница, в которой подключены файлы скрипта и стиля. Скрипт загружается и подымает DOM, навешанный обработчиками. Естественно, пишется все используя ООП. Калькулятор состоит, как минимум, из нескольких объектов, которые обмениваются между собой событиями. К примеру, есть базовый объект "Кнопка", которую наследует объект "Кнопка 1". Она умеет кидать событие "Click", которое перехватывает некая сущность(пусть будет view), и объект, отрисовавший поле ввода. Получается иерархическая, распределенная модель. Кнопка  кидает событие с параметами, оно всплывает, его перехватывают вьюха и кто-то еще.  Кнопка - инициатор события, поле ввода только слушает, вьюха тоже слушает и хранит историю, чтобы можно было отменить операцию. И , если задача пойдет легко, можно выполнить это все в диалоге, который тоскается по экрану.
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0472 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.