Усовершенствовать простой javascript Калькулятор!
Здравствуйте Форумчане!
Нужна небольшая помощь, решил начать изучать "html css javascript", и получил задание написать простейший калькулятор, за основу взял html + javascript: <body>
<form name="taschenrechner" id="calculator">
<table>
<tr>
<td>
<input type="text" name="input" size="16" class="display">
</td>
</tr>
<tr>
<td class="buttons">
<input type="button" name="ein" value="1" OnClick="taschenrechner.input.value += '1'">
<input type="button" name="zwei" value="2" OnClick="taschenrechner.input.value += '2'">
<input type="button" name="drei" value="3" OnClick="taschenrechner.input.value += '3'">
<input type="button" name="add" value="+" onclick="taschenrechner.input.value += '+'" >
<br>
<input type="button" name="vier" value="4" OnClick="taschenrechner.input.value += '4'">
<input type="button" name="funf" value="5" OnClick="taschenrechner.input.value += '5'">
<input type="button" name="sechs" value="6" OnClick="taschenrechner.input.value += '6'">
<input type="button" name="sub" value="-" OnClick="taschenrechner.input.value += '-'">
<br>
<input type="button" name="sieben" value="7" OnClick="taschenrechner.input.value += '7'">
<input type="button" name="acht" value="8" OnClick="taschenrechner.input.value += '8'">
<input type="button" name="neun" value="9" OnClick="taschenrechner.input.value += '9'">
<input type="button" name="zehn" value="x" OnClick="taschenrechner.input.value += '*'">
<br>
<input type="button" name="clear" value="c" OnClick="taschenrechner.input.value = ''">
<input type="button" name="null" value="0" OnClick="taschenrechner.input.value += '0'">
<input type="button" name="macht" value="=" OnClick="taschenrechner.input.value = eval(taschenrechner.input.value)">
<input type="button" name="div" value="/" OnClick="taschenrechner.input.value += '/'">
</td>
</tr>
</table>
</form>
</body>
и css: @charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: bold 14px Arial, sans-serif;
}
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 20%, #ccc);
background-size: cover;
}
#calculator * {font-size: 20px;}
#calculator table {
border: solid 3px silver;
border-spacing: 3px;
background-color: #EEE;
}
#calculator table td {border-spacing: 3px;}
#calculator table {margin: 100px auto;}
input.display {
width: 275px;
height:40px;
text-align: right;
}
td.buttons {border-top: solid 1px silver;}
input[type= button] {
width: 65px;
height: 50px;
}
</style>
И мне кажется, что выглядит все очень слабенько, поэтому хочу до усовершенствовать, а именно: 1) Улучшить javascript путем вынесения обработчиков во внешние функции (отделение во внешний файл); 2) Вместо имен объектов использовать идентификаторы и обращаться к ним через GetElementByID; PS (Так же брал другой скрипт, красивый калькулятор с thecodeplayer , мне все очень понравилось, потратил на него 2 дня, но javascript показался мне очень сложным, не могу его понять, я мне нужно будет потом объяснить что к чему) (Написал для того, что может кто знает этот скрипт и сможет мне объяснить))) Обращаюсь на форум как в последнюю инстанцию, т.к. времени у меня осталось до вечера, и смогу ли все успеть не факт, поэтому буду очень рад любому совету и любой помощи. Заранее очень благодарен С ув. Сергей! |
Здравствуйте, Сергей.
Я извиняюсь, если поздновато, но минут 15 назад Сам я бы написал по-другому, но если пересмотреть ваш код то вот мои мысли: Code А в плане общих советов по изучению программирования - начинайте с теории. Математика, структуры данных и алгоритмы. В частности калькулятор можно написать намного лучше используя обратную польскую запись, например. Но это все лирика - удачи. Если есть вопросы - пишите |
JSN, а еще лучше использовать http://learn.javascript.ru/event-delegation, ибо
Все это Цитата:
document.getElementById('calculator').onclick = function(e) {
// TODO
this.input.value += e.target.value;
}
|
Цитата:
Если не сложно объясни пожалуйста логику: function addInput(x) {
input.value += x;
if (!c)
a[0] = a[0] * 10 + +x;
else
a[1] = a[1] * 10 + +x;
}
|
Цитата:
|
| Часовой пояс GMT +3, время: 19:29. |