Задание для mishka2 и psywalker (и не только)

Great Rash · September 2, 2009

Задание:

Сделать калькулятор.

Описание:

1) поле ввода цифр - одно

2) Функционал - все стандартные арифметические операции (сложение, вычитание и т.д.), плюс тригонометрия (синус, косинус и т.п.), плюс возведение в степень (любую). (дальше видно будет)

3) дизайн - любой (должно же быть поле для творчества).

4) результат операции выводим в то же поле, в каком вводим цифры.

5) в последствии возможен ввод с клавы.

UPD:

справочную информацию можно найти тут: http://www.w3schools.com/jS/

Edited September 2, 2009 by Great Rash

VJiK · September 2, 2009

хм... А это зачем?

просто потренироваться от делать нечего?

Great Rash · September 2, 2009

Люди хотят начать изучать JS. Почему бы им не помочь?

psywalker · September 2, 2009

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

Great Rash · September 2, 2009

Задавай вопросы - получай ответы.

psywalker · September 2, 2009

Задавай вопросы - получай ответы.

Ну ок, договорились, но тока не сразу, сначала книжку дождусь, прочитаю немного...

mishka · September 2, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>calculator</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		html,body{
			height:100%;
			width:100%;
			display:table;
		}
		body{
			margin:0;
			vertical-align:middle;
			display:table-cell;
		}
		#calc{
			font:11px/19px Geneva,Tahoma,Arial,sans-serif;
			width:260px;
			height:231px;
			border:3px solid #435CA8;
			background:#ECE9D8;
			margin:0 auto;
		}
		#calcNavigation{
			margin:0;
			padding:0 0 1px;
			list-style:none;
			width:100%;
			overflow:hidden;
			border-bottom:1px solid #fff;
		}
		#calcNavigation li{
			float:left;
			padding:0 6px;
			cursor:default;
		}
		#calcNavigation li:hover{
			border:1px solid #dedede;
			background:#ebebeb;
			margin:-1px;
		}
		#inputText{
			display:block;
			width:225px;
			margin:2px auto 0;
			border-width:1px;
			border-style:solid;
			border-color:#aca899 #fdf9ea #fdf9ea #aca899;
			text-align:right;
			padding:3px 6px 4px;
		}
		#keyboard{
			overflow:hidden;
			margin:12px 8px 0;
		}
		.key{
			width:33px;
			height:25px;
			overflow:hidden;
			border:2px outset #ccc;
			background:#e3ddd1;
			margin:4px 3px 0 0;
			text-align:center;
			font:12px/24px Geneva,Tahoma,Arial,sans-serif;
			cursor:default;
			color:#00f;
		}
		.key:active{
			border:2px inset #ccc;
			height:24px;
			padding:1px 0 0;
		}
		.red{
			color:#f00;
		}
		.managekey{
			width:60px;
		}
		td{
			vertical-align:top;
		}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>
<div id="calc">
	<ul id="calcNavigation">
		<li>Правка</li>
		<li>Вид</li>
		<li>Справка</li>
	</ul>
	<input id="inputText" type="text" value="0," />
	<div id="keyboard">
		<table cellspacing="0" cellpadding="0" border="0">
			<tr>
				<td>
					<table cellspacing="0" cellpadding="0" border="0">
						<tr>
							<td align="center">
								<div style="width:25px;height:24px;margin:6px 0 1px;border-width:1px;border-style:solid;border-color:#aca899 #fff #fff #aca899"><div style="width:23px;height:22px;border-width:1px;border-style:solid;border-color:#716f64 #f1efe2 #f1efe2 #716f64"></div></div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red">MC</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red"> MR</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red">MS</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red">M+</div>
							</td>
						</tr>
					</table>
				</td>
				<td style="padding:0 0 0 6px">
					<table cellspacing="0" cellpadding="0" border="0">
						<tr>
							<td>
								<div class="managekey key red">Backspace</div>
							</td>
							<td>
								<div class="managekey key red">CE</div>
							</td>
							<td>
								<div class="managekey key red">C</div>
							</td>
						</tr>
						<tr>
							<td colspan="3">
								<table cellspacing="0" cellpadding="0" border="0">
									<tr>
										<td>
											<div class="key">7</div>
										</td>
										<td>
											<div class="key">8</div>
										</td>
										<td>
											<div class="key">9</div>
										</td>
										<td>
											<div class="key red">/</div>
										</td>
										<td>
											<div class="key">sqrt</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="key">4</div>
										</td>
										<td>
											<div class="key">5</div>
										</td>
										<td>
											<div class="key">6</div>
										</td>
										<td>
											<div class="key red">*</div>
										</td>
										<td>
											<div class="key">%</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="key">1</div>
										</td>
										<td>
											<div class="key">2</div>
										</td>
										<td>
											<div class="key">3</div>
										</td>
										<td>
											<div class="key red">-</div>
										</td>
										<td>
											<div class="key">1/x</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="key">0</div>
										</td>
										<td>
											<div class="key">+/-</div>
										</td>
										<td>
											<div class="key">,</div>
										</td>
										<td>
											<div class="key red">+</div>
										</td>
										<td>
											<div class="key red">=</div>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>

Это пока только дизайн.

Так как дизайнер с меня совсем никудышний, то я просто взял его со стандартного

На совместимость верстки в разных браузерах попрошу не тестить просто открывайте в FF или Опере

Edited September 2, 2009 by mishka2

Great Rash · September 2, 2009

Ну "правку", "вид" и "справку" можно было б и не делать.

HTML должен генериться скриптом.

Писать код предлагаю не функциями, а сразу создавать объект (для облегчения дальнейшего использования), плюс научитесь сразу делать как положено. Я конечно в ООП сам недавно и кому-то из PRO мой стиль покажется так себе, но для изучения сего вопроса будет в самый раз.

UPD: Верстку берем за основу.

Edited September 2, 2009 by Great Rash

hf3 · September 2, 2009

http://asp-html.studenthost.ru/kalk/

Пока делал - понял что JS надо фактически учить с 0 - так как старой книжки 7 летней давности прочитанной по диагонали - явно очень мало)

Great Rash · September 2, 2009

Код у вас маленький конечно. Но функционал не реализован до конца. Плюс элементы надо скриптом создавать (чтоб как виджет был). Но для 7 летней давности очень даже ничего

mishka · September 2, 2009

кхе кхе...

HTML должен генериться скриптом.
Писать код предлагаю не функциями, а сразу создавать объект (для облегчения дальнейшего использования), плюс научитесь сразу делать как положено. Я конечно в ООП сам недавно и кому-то из PRO мой стиль покажется так себе, но для изучения сего вопроса будет в самый раз.

Вы почитайте вопросы на этом форуме в "для начинающих", там про верстку... у меня примерно такие вопросы про джс.

Это я в верстке только поумничать могу

Код не функциями а создавать объект это что?

Edited September 2, 2009 by mishka2

hf3 · September 2, 2009

Но функционал не реализован до конца

ну как таковых добавить кнопок в таблицу и навесить на них функций расчета несложно… Вопрос в том что код все равно останется индусским) поэтому надо учить JS

Плюс элементы надо скриптом создавать (чтоб как виджет был).

На лету генерировать ДОМ в диве с абсолютном позиционированием?

mishka · September 2, 2009

HTML должен генериться скриптом.

А можна сразу так все делать, а когда будет готово то все в джс всунуть?

Great Rash · September 3, 2009

На лету генерировать ДОМ в диве с абсолютном позиционированием?

Да, только не обязательно в диве и не обязательно с абсолютным позиционированием. В любом контейнере. Все, что требуется от юзера это указать id контейнера или ссылку на элемент.

А можна сразу так все делать, а когда будет готово то все в джс всунуть?

А зачем? Если сразу можно делать скриптом. Поверьте, это мало отличается от верстки.

Вы все задаете абстрактные вопросы... предлагаю уже начать спрашивать. Что конкретно вас интересует? Что не понятно?

BassEast · September 3, 2009

Ну ок, договорились, но тока не сразу, сначала книжку дождусь, прочитаю немного...

а какую книжку ждёшь, если не секрет?) потому что на самом деле, я искал нормальные книги, чтобы там всё не столь древнее было, но ничего не нашёл.

Great Rash · September 3, 2009

BassEast серия "Библиотека О'Рейлли". В этой серии нет ни одной плохой книги, это я вам ответственно заявляю. Правда в Книжных тяжеловато найти, по инету заказать проще. Ну или торренты, но на бумаге оно как-то приятней и привычней.

mishka · September 3, 2009

Хочу чтобы в инпуте было максимум 30 символов.

maxlength='30' помогает только если вводить с клавиатуры

как проверить количество символов в value инпута?

Great Rash · September 3, 2009

if (input.value.length > 30) {
	return false;
}

А зачем ограничивать 30-ю знаками?

Edited September 3, 2009 by Great Rash

mishka · September 3, 2009

угу, спс вспомнил...

теперь хочу чтобы запятая была постоянно вконце строки если ее ненажимать...

А зачем ограничивать 30-ю знаками?

При вводе цыфр мышкой нету курсора в инпуте, поэтому текст недвигается если его становится много, и я невижу что ввожу

поэтому решил поставить ограничение...

как в виндосовском калькуляторе

mishka · September 3, 2009

Мне надо из инпута взять value удалить последний его знак и опять вставить. Как осуществить?

Great Rash · September 3, 2009

input.value = input.value.substr(0, input.value.length - 1);

mishka · September 3, 2009

спс, подругому сделал

Теперь такая проблема:

есть инпут с disabled="disabled", при клике на определенную кнопку надо инпуту класс дописать. Но изза дисабледа ниче немогу сделать... если убрать его то все ок... как обойти дисаблед?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>calculator</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		html,body{
			height:100%;
			width:100%;
			display:table;
		}
		body{
			margin:0;
			vertical-align:middle;
			display:table-cell;
		}
		#calc{
			font:11px/19px Geneva,Tahoma,Arial,sans-serif;
			width:260px;
			border:3px solid #435CA8;
			background:#ECE9D8;
			margin:0 auto;
			padding:0 0 7px;
			cursor:default;
			position:relative;
			-moz-user-select:none;
			-khtml-user-select:none;
			user-select:none;
			/*opacity:0.5;*/
		}
		/*#calc.calcActive{
			opacity:1;
		}*/
		.calcTitle{
			background:#00006D;
			color:#fff;
			padding:0 10px 2px;
			position:relative;
		}
		#calcNavigation{
			margin:0;
			padding:1px;
			list-style:none;
			border-bottom:1px solid #fff;
		}
		#calcNavigation:after{
			content:"";
			display:block;
			clear:both;
		}
		#calcNavigation li{
			float:left;
			padding:0 6px;
			cursor:default;
			position:relative;
		}
		#calcNavigation li:hover{
			border:1px solid #dedede;
			background:#ebebeb;
			margin:-1px;
			color:#005ad9;
		}
		#display{
			display:block;
			width:225px;
			margin:2px auto 0;
			border-width:1px;
			border-style:solid;
			border-color:#aca899 #fdf9ea #fdf9ea #aca899;
			text-align:right;
			padding:3px 6px 4px;
			background:#fff;
			color:#000;
			cursor:default;
			font:14px "Courier New",Courier,monospace;
		}
		#keyboard{
			overflow:hidden;
			margin:12px 8px 0;
		}
		.key{
			width:33px;
			height:25px;
			overflow:hidden;
			border:2px outset #ccc;
			background:#e3ddd1;
			margin:4px 3px 0 0;
			text-align:center;
			font:12px/24px Geneva,Tahoma,Arial,sans-serif;
			color:#00f;
			position:relative;
		}
		.key:active{
			border:2px inset #ccc;
			height:24px;
			padding:1px 0 0;
		}
		.red{
			color:#f00;
		}
		.managekey{
			width:60px;
		}
		td{
			vertical-align:top;
		}
		.overlay{
			position:absolute;
			top:0;
			left:0;
			/*width:100%;
			height:100%;*/
			overflow:hidden;
			text-indent:-9999px;
		}
		#calc.calcActive .overlay{
			display:none;
		}
	</style>
	<script type="text/javascript">
		function initScript(){
			var _calculator=document.getElementById('calc');
			var _display=document.getElementById('display');

			_calculator.onclick=function(){
				if (this.className.indexOf('calcActive')!=-1){
					this.className=this.className.replace('calcActive','');
				}
				this.className+=' calcActive';
			}

			displayClier=function(){
				_display.value='0,';
			}
			_comma=function(){
				_display.className+=' comma';
			}
			paste=function(number){
				if(_display.value.length<26){
					if(_display.value=='0,'){
						_display.value=number+',';
					}else{
						if(_display.className.indexOf('comma')<0){
							if(_display.value.lastIndexOf(',')!=-1){
								_display.value=_display.value.replace(',','');
							}
							_display.value+=number+',';
						}else{
							_display.value+=number;
						}
					}
				}
			}
		}


		if (window.addEventListener)
			window.addEventListener("load", initScript, false);
		else if (window.attachEvent)
			window.attachEvent("onload", initScript);
	</script>
</head>
<body>
<div id="calc">
	<div class="calcTitle">
		<strong>WebCalculator v0.1b</strong>
	</div>
	<ul id="calcNavigation">
		<li>Правка</li>
		<li>Вид</li>
		<li>Справка</li>
	</ul>
	<input id="display" type="text" maxlength='26' value='0,' />
	<div id="keyboard">
		<table cellspacing="0" cellpadding="0" border="0">
			<tr>
				<td>
					<table cellspacing="0" cellpadding="0" border="0">
						<tr>
							<td align="center">
								<div style="width:25px;height:24px;margin:6px 0 1px;border-width:1px;border-style:solid;border-color:#aca899 #fff #fff #aca899"><div style="width:23px;height:22px;border-width:1px;border-style:solid;border-color:#716f64 #f1efe2 #f1efe2 #716f64"></div></div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red">M</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red"> MR</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red">MS</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="key red">M+</div>
							</td>
						</tr>
					</table>
				</td>
				<td style="padding:0 0 0 6px">
					<table cellspacing="0" cellpadding="0" border="0">
						<tr>
							<td>
								<div class="managekey key red">Backspace</div>
							</td>
							<td>
								<div class="managekey key red">CE</div>
							</td>
							<td>
								<div class="managekey key red" onclick='displayClier()'>C</div>
							</td>
						</tr>
						<tr>
							<td colspan="3">
								<table cellspacing="0" cellpadding="0" border="0">
									<tr>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>7</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>8</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>9</div>
										</td>
										<td>
											<div class="key red">/</div>
										</td>
										<td>
											<div class="key">sqrt</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>4</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>5</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>6</div>
										</td>
										<td>
											<div class="key red">*</div>
										</td>
										<td>
											<div class="key">%</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>1</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>2</div>
										</td>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>3</div>
										</td>
										<td>
											<div class="key red">-</div>
										</td>
										<td>
											<div class="key">1/x</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="key" onclick='paste(this.innerHTML)'>0</div>
										</td>
										<td>
											<div class="key">+/-</div>
										</td>
										<td>
											<div class="key" onclick='_comma()'>,</div>
										</td>
										<td>
											<div class="key red">+</div>
										</td>
										<td>
											<div class="key red">=</div>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	<span class="overlay"> </span>
</div>
</body>
</html>

Это то что на данный момент есть. Арифметика неработает еще. Пока только адекватный ввод цифр делаю

Верстка некроссбраузерна, лучше смотреть в FF

psywalker · September 3, 2009

mishka2

слышишь хитрец, ты чё, сюда перебрался предатель, давай к нам, там без тебя скучно

mishka · September 3, 2009

Да тут таааак интересно

подключайся

psywalker · September 3, 2009

Да тут таааак интересно
подключайся

Да мне ещё рано сюда, я ж молодой ещё

Great Rash · September 4, 2009

mishka2

Что-то я не понял где disabled? В коде я ничего подобного не нашел.

Предлагаю сделать тестовую страницу где решать данную проблему.

UPD:

Сделал тестовую страницу - не вижу проблему:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}


		.class1 {
			border: red 1px solid;
		}

		.class2 {
			color: green;
		}
	</style>

	<script type="text/javascript">
		window.onload = function() {
			document.getElementsByTagName('input')[0].className = 'class1';
			document.getElementsByTagName('input')[0].className += ' class2';
		}
	</script>
</head>

<body>

	<input type="text" name="test" value="12345" disabled />

</body>
</html>

Edited September 4, 2009 by Great Rash

Sign In

Задание для mishka2 и psywalker (и не только)

Question

Link to comment

Share on other sites

41 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information