1. Главная
  2. Статьи
  3. 4 проекта JavaScript начинающим для улучшения навыков

4 проекта JavaScript начинающим для улучшения навыков

  • 27 августа, 10:10
  • 11887
  • 0

Один из самых популярных языков сценариев, JavaScript, используется во всех веб-приложениях для проверки, рендеринга динамического контента , интерактивной графики и карт и многого другого. Наряду с HTML и CSS, JS позволяет создавать полные и надежные веб-приложения. Благодаря JS пользователь может взаимодействовать с веб-страницей и видеть все интересные элементы на странице. По мере изучения проектов мы узнаем, как js помогает в создании интерактивных веб-страниц. Перед этим давайте быстро рассмотрим важные особенности JS :

  1. Используется как на стороне клиента, так и на стороне сервера для создания интерактивного веб-контента.
  2. Значительно улучшает взаимодействие с пользователем, обеспечивая динамическую функциональность.
  3. Легкий язык с объектно-ориентированными возможностями.
  4. Интерпретируемый, открытый и кроссплатформенный язык.
  5. Полная интеграция с Java и HTML .

Почему проекты JavaScript?

JS - это сердце любого веб-приложения. Хорошее знание JavaScript может дать вам ряд интересных вариантов карьеры, таких как разработка мобильных и настольных приложений, создание динамических веб-сайтов с нуля, UI / UX-дизайнер или даже full-stack разработчик. Если вы знаете основы JavaScript, проекты - ваш следующий шаг к развитию навыков. Если у вас нет опыта программирования, вы можете пройти базовые курсы JavaScript, а затем вернуться к этим проектам. Если вы немного знаете HTML и CSS, вы поймете большинство проектов Javascript с исходным кодом, упомянутым ниже.

Лучшие проекты JavaScript для начинающих

Вы можете многое сделать с помощью JavaScript, но мы пока не хотим перегружать вас всем. Мы перечислили лучшие проекты JavaScript, которые могут повысить ценность вашего резюме, а также сделать карьеру:

1. Калькулятор JavaScript

Калькулятор Javascript


Мы будем использовать простой HTML, CSS и заставим все компоненты работать с помощью базовых функций JavaScript. Для отображения кнопок и чисел мы будем использовать HTML и добавим к ним украшения с помощью CSS. Чтобы кнопки выполняли соответствующие функции, мы будем использовать JavaScript. Основная функция - eval () - глобальная функция JS, которая решает коды JS. Функция display () отображает выбранное число на экране калькулятора. Обратите внимание, что программа будет работать только с событиями мыши. Вот полный код:

<html>
<body>
<div class = title >My Beautiful JS Calculator</div>
<table border="2">
<tr>
<td><input type="button" value="c" onclick="clr()"/> </td>
<td colspan="3"><input type="text" id="textval"/></td>
</tr>
<tr>
<td><input type="button" value="+" onclick="display('+')"/> </td>
<td><input type="button" value="1" onclick="display('1')"/> </td>
<td><input type="button" value="2" onclick="display('2')"/> </td>
<td><input type="button" value="3" onclick="display('3')"/> </td>
</tr>
<tr>
<td><input type="button" value="-" onclick="display('-')"/> </td>
<td><input type="button" value="4" onclick="display('4')"/> </td>
<td><input type="button" value="5" onclick="display('5')"/> </td>
<td><input type="button" value="6" onclick="display('6')"/> </td>
</tr>
<tr>
<td><input type="button" value="*" onclick="display('*')"/> </td>
<td><input type="button" value="7" onclick="display('7')"/> </td>
<td><input type="button" value="8" onclick="display('8')"/> </td>
<td><input type="button" value="9" onclick="display('9')"/> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="display('/')"/> </td>
<td><input type="button" value="." onclick="display('.')"/> </td>
<td><input type="button" value="0" onclick="display('0')"/> </td>
<td><input type="button" value="=" onclick="evaluate()"/> </td>
</tr>
</table>
</body>
<script>
function display(val)
{
 document.getElementById("textval").value+=val
 }
function evaluate()
{
 let x = document.getElementById("textval").value
 let y = eval(x)
 document.getElementById("textval").value = y
}
function clr()
{
 document.getElementById("textval").value = ""
}
</script>
<style>
input[type="button"]
{
border-radius: 10px;
background-color:blue;
color: white;
border-color:#black ;
width:100%;
}
input[type="text"]
{
border-radius: 10px;
text-align: right;
background-color:black;
color: white;
border-color: white;
width:100%
}
</style>
</html>

2. Музыкальные события JavaScript

Проекты Javascript

Здесь мы познакомим вас со слушателями событий, которые будут действовать на события клавиатуры. Например, если нажать клавишу «S», какое событие произойдет? У каждого события будет свой код и действие. Помимо слушателей событий, мы также узнаем, как добавлять и воспроизводить аудиофайлы. Обратите внимание, что мы добавили очень простой CSS, так как здесь основное внимание уделяется JavaScript. Вам нужно будет импортировать свои собственные звуки и фоновое изображение для полноценной работы программы.


<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>KeyBoard Music</title>
</head>
<body>
  <div class="keys">
    <div data-key="65" class="key">
      <kbd>A</kbd>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
    </div>
    <div data-key="70" class="key">
      <kbd>F</kbd>
    </div>
    <div data-key="71" class="key">
      <kbd>G</kbd>
    </div>
    <div data-key="72" class="key">
      <kbd>H</kbd>
    </div>
    <div data-key="74" class="key">
      <kbd>J</kbd>
    </div>
    <div data-key="75" class="key">
      <kbd>K</kbd>
    </div>
    <div data-key="76" class="key">
      <kbd>L</kbd>
    </div>
  </div>
  <audio data-key="65" src="sounds/clap.wav"></audio>
  <audio data-key="83" src="sounds/chord.wav"></audio>
  <audio data-key="68" src="sounds/ride.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/tink.wav"></audio>
  <audio data-key="72" src="sounds/kick.wav"></audio>
  <audio data-key="74" src="sounds/swipe.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/boom.wav"></audio>
</body>
<script>
function removeTransition(event) {
  if (event.propertyName !== 'transform') return
  event.target.classList.remove('playing')
}
function playSound(event) {
  const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
  const key = document.querySelector(`div[data-key="${event.keyCode}"]`)
  if (!audio) return
  key.classList.add('playing')
  audio.currentTime = 0
  audio.play()
}
const keys = Array.from(document.querySelectorAll('.key'))
keys.forEach((key) => key.addEventListener('transitionend', removeTransition))
window.addEventListener('keydown', playSound)
</script>
<style>
html {
  font-size: 12px;
  background: url('drums.jpg') top center;
  background-size: 80%;
}
.keys {
  display: flex;
  flex: 1;
  align-items: top;
  justify-content: center;
}
.key {
  border: 0.4rem solid blue;
  border-radius: 0.5rem;
  margin: 1rem;
  font-size: 2rem;
  padding: 1rem 0.5rem;
  transition: all 0.01s ease;
  width: 5rem;
  text-align: center;
  color: black;
  text-shadow: 0 0 0.5rem yellow;
}
</style>
</html>

3. Проверка формы JavaScript

Проверка формы Javascript

Проверка формы является очень полезным аспектом и используется многими веб-сайтами для проверки на стороне клиента данных пользователя, данных карты, сведений об адресе и т. д. Например, если есть обязательное имя поля ввода, пользователь может ввести номер или оставить пустое поле, ввести только одну букву и т. д. Все эти проверки можно легко выполнить с помощью JavaScript. Давайте посмотрим на простой проект проверки формы. Как обычно, проекту потребуются также HTML-элементы. Мы не сделали никаких сложных стилей, просто включили базовые элементы в сам HTML. Вот полный код простой формы с базовыми проверками:

<html>
   <head>
      <title>Form Validation</title>
         <script type = "text/javascript">
         function validate() {
         var text;
            if( document.myForm.name.value == "" ) {
              text = "Name cannot be empty";
               document.getElementById("demo").innerHTML = text;
               document.myForm.name.focus() ;
               return false;
            }
            if( document.myForm.email.value == "" ) {
              text = "E-mail cannot be empty";
               document.getElementById("demo").innerHTML = text;
               document.myForm.email.focus() ;
               return false;
            }
       var emailID = document.myForm.email.value;
       atposn = emailID.indexOf("@");
       dotposn = emailID.lastIndexOf(".");
       if (atposn < 1 || ( dotposn - atposn < 2 )) {
       text = "Please enter valid email ID";
       document.getElementById("demo").innerHTML = text;
       document.myForm.email.focus() ;
       return false;
     }
            if( document.myForm.phone.value == "" || isNaN( document.myForm.phone.value ) ||
               document.myForm.phone.value.length != 10 ) {
               text = "Please enter a valid 10-digit phone number";
               document.getElementById("demo").innerHTML = text;
               document.myForm.phone.focus() ;
               return false;
            }
            if( document.myForm.subject.value == "0" ) {
               text = "Please provide your area of expertise";
               document.getElementById("demo").innerHTML = text;
               return false;
            }
            return( true );
         }
      </script>
   </head>
   <body>
      <form action = "" name = "myForm" onsubmit = "return(validate());">
        <h1 align="center">USER REGISTRATION</H1>
         <table align="center" cellspacing = "3" cellpadding = "3" border = "3">
            <tr>
               <td align = "right">Name</td>
               <td><input type = "text" name = "name" /></td>
            </tr>
            <tr>
               <td align = "right">E-mail</td>
               <td><input type = "text" name = "email" /></td>
            </tr>
            <tr>
               <td align = "right">Phone Number</td>
               <td><input type = "text" name = "phone" /></td>
            </tr>
            <tr>
               <td align = "right">Subject</td>
               <td>
                  <select name = "subject">
                     <option value = "0" selected>Select</option>
                     <option value = "1">HTML</option>
                     <option value = "2">JavaScript</option>
                     <option value = "3">CSS</option>
                     <option value = "4">JSP</option>
                  </select>
               </td>
            </tr>
         </table>
         <p id="demo" style="color:red; text-align:center"></p>
   <div style="text-align:center"><input type = "submit" value = "Submit" /></div>
      </form>
   </body>
</html>

4. Отображение сведений о фотографиях на JavaScript

Отображение сведений о фотографиях на JavaScript

Мы будем отображать некоторые изображения на веб-странице, и как только пользователь наводит курсор на изображения, будут отображаться более подробные сведения. Вы можете скачать изображения откуда угодно или использовать те, которые у вас уже есть. Опять же, мы использовали базовый HTML и CSS вместе с JS. Основная магия делается на JS. Вы узнаете, как в этом проекте работают события наведения указателя мыши.

<!DOCTYPE html>
<html>
  <head>
    <title>My Sun Sign Infos</title>
  </head>
  <script>
  function display(element){
    document.getElementById('image').innerHTML = element.alt;
  }
  function revert(){
    document.getElementById('image').innerHTML = "Hover over a sunsign image to display details.";
  }
 </script>
  <style>
  #image{
      width: 650px;
      height: 70px;
      border:5px solid pink;
      background-color: black;
      background-repeat: no-repeat;
      color:white;
      background-size: 100%;
      font-family: Didot;
      font-size: 150%;
      line-height: 60px;
      text-align: center;
  }
  img{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  }
  </style>
  <body>
    <div>
    <p id = "image">Hover over a sunsign image to display details.<p>
    <img alt = "Sagittarius are beautiful, loyal and passionate." src = "saggi.jpg" onmouseover = "display(this)" onmouseout = "revert()">
    <img alt = "Pisces are dreamy, helpful and love everyone!" src = "pisces.jpg" onmouseover = "display(this)" onmouseout = "revert()">
    <img alt = "Leo are strong and fearless. They aim for and achieve a lot!" src = "leo.jpg" onmouseover = "display(this)" onmouseout = "revert()">
    <img alt = "Scorpions are friends for life. They are trustworthy and truthful." src = "scorpio.jpg" onmouseover = "display(this)" onmouseout = "revert()">
    </div>
  </body>
</html>

0 комментариев
Сортировка:
Добавить комментарий

IT Новости

Смотреть все