#javascript #html
#javascript #HTML
Вопрос:
ВЕБ-студент первого семестра здесь. Знакомство с JavaScript в конце этого семестра. Профессор не вдается ни в какие подробности. Я искал в W3schools и Google справку. В HTML я должен создать текстовое поле ввода (тип = «текст»), а кнопки (тип = «кнопка») нет. Эта часть была простой.
Часть, которую я не понимаю, — это JavaScript. Текстовое поле должно получить фокус при загрузке страницы. Я должен добавить JS внутри HTML-страницы, которая включает комментарий JS (не html-комментарий) и решает следующие задачи: Код события, которое будет выполняться, когда пользователь нажимает кнопку. Если пользователь вводит правильный пароль, отобразите «OK» на странице, иначе отобразится «ОШИБКА» для неправильного пароля, введите другую кнопку, которая при нажатии. Размер шрифта основного текста изменен на 30 пикселей.
Теперь… Я понимаю, что это должен быть простой проект, и я ДОЛЖЕН иметь возможность обратиться к моему профессору с вопросами, но это онлайн-класс, и он просто отшивает меня, когда я прошу о помощи. Я даже не знаю, что еще искать для этого. W3schools не имеет ничего подобного. Пожалуйста, помогите. Я просто не понимаю. Я НЕ хочу, чтобы это делалось для меня. Бессмысленно просто добавлять чужой код в мой проект и не изучать то, что мне понадобится в будущем. Я ищу некоторые ресурсы, которые помогут мне лучше понять части этого проекта, с которыми я борюсь. Спасибо!
W3schools поиск в Google
<label for="password">Password:</label>
<input id="password" type="text" />
<input id="Button1" type="button" value="Run" onclick="passcheck()" />
<p id="result">
result:
</p>
Комментарии:
1. Посмотрите несколько руководств по получению и настройке значений в элементах управления формами (
<input>, <select>,<textarea>и т.д.). Также учебные пособия по событиям управления формой2. У вас есть конкретный вопрос? Мы не можем сделать за вас домашнее задание, но если есть конкретный вопрос, с которым вам нужна помощь, мы можем взглянуть. В противном случае, как сказал Чарли, поищите несколько базовых руководств по JS, они повсюду в Интернете.
3. Мне нужно указать правильное направление для некоторых руководств и т. Д. Я не хочу, чтобы домашнее задание было сделано за меня. Это было брошено нам на колени без каких-либо указаний от профессора. Было опубликовано несколько обсуждений с теми же проблемами, с которыми я сталкиваюсь, и ответ профессора обычно был «я не знаю», я не буду изучать это, не делая это для себя. Я сожалею, что мой вопрос прозвучал как запрос ответов. Сейчас я отредактирую.
4. Сделайте себе одолжение и держитесь как можно дальше от школ W3. Почти все профессионалы знают, что, несмотря на их отличные результаты SEO, информация, которую они предоставляют, часто является неполной, устаревшей, неверной или совершенно неверной. Вместо этого используйте сеть разработчиков Mozilla , которая хорошо известна как авторитетный источник. И если ваш преподаватель рекомендует школы W3, это признак того, что он / она не очень хорошо осведомлен о предмете, который он / она преподает.
5. Я могу только подтвердить, что w3schools редко бывает полезен.
Ответ №1:
Вы можете попробовать что-то вроде этого:
<body>
<div>
Password:
<input id="password" type="text" />
<input id="Button1" type="button" value="Run" onclick="passcheck()" />
</div>
Result: <span id="result"/>
<script>
function passcheck() {
const resultRef = document.getElementById('result');
const inputRef = document.getElementById('password');
/* You can pass any other condition
for checking the validity of the password
instead of inputRef.value.length >= 6
*/
const resultText = inputRef.value.length >= 6 ? 'OK' : 'ERROR';
resultRef.innerHTML = resultText;
}
</script>
</body>
Кроме того, лучше использовать type=»password» для лучшего удобства
использования https://www.w3schools.com/html/html_form_input_types.asp
Просто пройдите весь учебник по JS на w3schools https://www.w3schools.com/js/js_htmldom_methods.asp
Надеюсь, это поможет вам)
Комментарии:
1. Везде, где я читаю, говорится одно и то же type=»password», но профессор специально сказал использовать type =»text», что я действительно не понимаю, почему. спасибо за вашу помощь.
2. У нас есть определенные ожидания от вопросов здесь, в Stack Overflow, и некоторые из этих ожиданий заключаются в том, что OP проведет свое исследование заранее и попытается самостоятельно решить проблему перед публикацией. Если мы предоставляем ответы на вопросы, которые не соответствуют этим стандартам, мы просто поощряем больше плохих вопросов. Вот почему мы предоставили комментарии, а не ответы выше.
3. Кроме того, смотрите Мой комментарий под вопросом о том, почему не рекомендуется ссылаться на школы W3 в качестве ресурса.
4. Привет, Скотт, я должен не согласиться, w3schools отлично подходит для начинающих, особенно для курсов HTML и CSS. MDN тоже отлично, но это дальнейшее чтение. Это только мое мнение)
Ответ №2:
Добро пожаловать в мир JavaScript!
Насколько я понял, есть две вещи, которые вы хотите сделать. 1) фокусировка ввода при загрузке 2) проверка при нажатии кнопки 3) изменение размера шрифта с помощью JavaScript
Во-первых, чтобы сфокусировать любой элемент ввода на загрузке в JavaScript, нам нужно извлечь этот элемент, а затем мы можем просто вызвать функцию tue focus в JavaScript.
<script>
document.getElementById(“password”).focus();
</script>
В приведенном выше коде мы извлекаем любой элемент (ввод) с помощью getElementById, а затем настраиваем его фокусировку, вызывая функцию focus() .
Во-вторых, опять же, вам нужно получить этот элемент пароля внутри вашей функции, получить его значение и выполнить некоторую проверку.
<script>
function passcheck(){
var password= document.getElementById(“password”).value;
if(password == ‘your password’){
alert(“Ok”);
}else{
alert(“invalid password”);
}
}
</script>
В приведенном выше коде значение является свойством элемента и его фактическим значением, которое вы вводите при вводе (пароль).
В-третьих, вы можете создать функцию, такую как changeFont(), и внести свои изменения.
<script>
function changeFont(){
document.getElementById(“your element id”).fontSize= “30px”
}
</script>
Окончательный код JavaScript :
<script>
document.getElementById(“password”).focus();
function passcheck(){
var password= document.getElementById(“password”).value;
if(password == ‘your password’){
alert(“Ok”);
}else{
alert(“invalid password”);
}
}
function changeFont(){
document.getElementById(“your element id”).fontSize= “30px”
}
</script>
Если вы хотите узнать больше о JavaScript, посетите w3schools
Комментарии:
1. Вау. Спасибо за подробное объяснение. То, что я уже закодировал, довольно близко к тому, что вы опубликовали. Будучи новичком в этом языке, мне не хватало нескольких {} здесь и там и некоторых незначительных деталей. Я действительно ценю, что вы объяснили, что сделал каждый бит, а не только ответ. это действительно мне очень помогло. Большое вам спасибо!
2. И да, добро пожаловать на борт, приятель! Я бы также посоветовал вам перейти на сайт w3school и узнать больше о JavaScript и HTML.
3. Хотя ваш ответ хорошо объяснен, у нас есть определенные ожидания от вопросов здесь, в Stack Overflow, и некоторые из этих ожиданий заключаются в том, что OP проведет свои исследования заранее и попытается найти собственное решение перед публикацией. Если мы предоставляем ответы на вопросы, которые не соответствуют этим стандартам, мы просто поощряем больше плохих вопросов. Вот почему мы предоставили комментарии, а не ответы выше.
4. Он сделал именно то, что сделал бы учебник. У меня НУЛЕВОЙ опыт работы с Javascript, он объяснил, что он делает по какой причине. Я просмотрел все, что мне было предложено, и я все еще не понял. Бхарат сделал гораздо больше, чтобы помочь мне, чем мой профессор. его код не на 100% решил мою проблему, но после небольшого поиска и чтения в Интернете после того, как он объяснил мне, это имело больше смысла, и я смог немного лучше понять концепцию. Мое задание было дано следующим образом… Используйте Visual Studio для программирования javascript без предварительного знания. ВПЕРЕД!
5. @ScottMarcus все, что я имел в виду, чтобы направлять его, а не проявлять неуважение или не следовать каким-либо стандартам stackoverflow. Все, что я сделал, это направил его в правильном направлении.