>웹 프론트엔드 >JS 튜토리얼 >f일차 #daysofMiva 코딩 챌린지

f일차 #daysofMiva 코딩 챌린지

WBOY
WBOY원래의
2024-08-22 18:50:45776검색

안녕하세요 여러분. 그래서 이 챌린지 2일차에는 GitHub를 떠나 제가 정말 배우고 싶었던 것, 즉 Javascript에 집중하기로 결정했습니다.

자바스크립트란 무엇인가요?

당신이 웹 개발 세계의 마법사라고 상상해 보세요. 마법의 생물의 뼈처럼 웹사이트의 구조를 구축할 수 있는 신뢰할 수 있는 HTML이 있습니다. 그런 다음 CSS를 사용하여 완벽한 가운이나 의상을 선택하는 등 스타일을 지정할 수 있습니다. 하지만 뭔가 빠졌습니다. 당신의 창조물은 여전히 ​​생명이 없습니다. 이것이 바로 JavaScript(JS)가 등장하는 곳입니다. 이는 여러분의 창작물에 생명을 불어넣는 마술 지팡이입니다! JavaScript는 주로 웹사이트에서 대화형 및 동적 콘텐츠를 만드는 데 사용되는 프로그래밍 언어입니다. 이를 통해 개발자는 페이지를 다시 로드할 필요 없이 애니메이션, 양식 유효성 검사, 실시간 업데이트와 같은 기능을 구현할 수 있습니다. JavaScript는 웹 애플리케이션의 프런트 엔드(사용자가 보고 상호 작용하는 것)와 백 엔드(서버 측 작업) 모두에서 사용할 수 있습니다.

자바스크립트는 어디에나 있습니다. 오늘날의 웹을 상호작용적이고, 재미있고, 끝없이 매력적으로 만드는 언어입니다. 멋진 웹사이트, 중독성 있는 모바일 앱, 심지어 게임을 만들려는 경우 JavaScript를 배우는 것은 책에서 가장 강력한 마법을 배우는 것과 같습니다.

Day f #daysofMiva Coding Challenge

자바스크립트의 사용

JS(JavaScript)는 웹 개발에 널리 사용되는 다목적 프로그래밍 언어입니다. JavaScript의 주요 용도는 다음과 같습니다.

1. 웹 개발(프런트엔드)
대화형 웹 페이지: JavaScript는 웹사이트를 대화형으로 만듭니다. 드롭다운 메뉴부터 이미지 슬라이더까지 웹사이트에서 볼 수 있는 동적 요소를 강화합니다.
양식 확인: 양식을 제출하기 전에 사용자가 양식을 올바르게 작성했는지 확인합니다.
애니메이션: JavaScript는 화면에서 요소가 희미해지거나 개체가 움직이는 등의 애니메이션과 효과를 만들 수 있습니다.
2. 웹 개발(백엔드)
서버 측 프로그래밍: Node.js를 사용하면 JavaScript가 서버에서 실행되어 요청을 처리하고, 데이터베이스를 관리하고, 콘텐츠를 제공할 수 있습니다.
실시간 애플리케이션: JavaScript는 채팅 앱, 온라인 게임, 라이브 데이터 스트리밍과 같은 실시간 애플리케이션에 사용됩니다.
3. 모바일 앱 개발
크로스 플랫폼 모바일 앱: React Native 및 Ionic과 같은 프레임워크는 JavaScript를 사용하여 iOS와 Android 모두에서 작동하는 모바일 앱을 구축합니다.
4. 게임 개발
브라우저 게임: JavaScript는 HTML5 및 Canvas와 함께 브라우저에서 직접 실행되는 대화형 게임을 만드는 데 사용됩니다.
5. 자동화 및 스크립팅
작업 자동화: JavaScript는 파일 축소, 코드 테스트 등 웹 개발에서 반복적인 작업을 자동화할 수 있습니다.
브라우저 확장: JavaScript는 Chrome 및 Firefox와 같은 브라우저의 기능을 향상시키는 다양한 브라우저 확장을 지원합니다.
6. 데이터 시각화
차트 및 그래프: D3.js 및 Chart.js와 같은 라이브러리를 통해 개발자는 복잡한 데이터 시각화 및 대화형 차트를 만들 수 있습니다.
7. 인공지능과 머신러닝
AI 및 ML 모델: TensorFlow.js와 같은 라이브러리가 포함된 JavaScript를 사용하면 브라우저에서 직접 AI 모델을 구축하고 실행할 수 있습니다.
8. 사물인터넷(IoT)
IoT 장치: JavaScript를 사용하여 IoT 장치를 프로그래밍하고 장치와 웹 간의 통신을 활성화할 수 있습니다.
9. 프로그레시브 웹 앱(PWA)
PWA: JavaScript를 사용하면 오프라인에서 작동하고 기본 모바일 앱처럼 느껴지는 웹 앱을 개발할 수 있습니다.
10. API 통합
데이터 가져오기: JavaScript는 API와 상호작용하여 서버에서 데이터를 가져와 웹페이지에 동적으로 표시하는 데 사용됩니다.

Day f #daysofMiva Coding Challenge

Day f #daysofMiva Coding Challenge
이는 유연성과 광범위한 애플리케이션으로 인해 기술 산업에서 계속해서 핵심 언어로 자리잡은 JavaScript의 다양한 용도 중 일부에 불과합니다.

오늘 자바스크립트로 한 일

그래서 기본적으로 제가 이해하지 못하는 코드를 시작하지 않았나요?. 나는 그것을 단계별로 취했다. 처음에는 크롬 개발 도구에서 코딩하는 방법을 배웠는데, 그 방법을 보여드리고 싶습니다.

크롬 개발 도구를 여는 방법
Chrome 개발 도구를 여는 방법은 3가지가 있습니다:
-Mac에서는 Command+Alt+J
Windows의 경우 Control + Alt+ J
- 마우스 오른쪽 버튼을 클릭한 다음 검사를 선택하면 Chrome에서도 개발 도구가 열립니다. 요소 탭이 표시되고 콘솔로 이동하여 몇 가지 코드를 실행할 수 있습니다.
-마지막 단계는 크롬 메뉴로 이동한 다음 보기로 이동하여 개발자를 클릭하는 것입니다. 개발자 아래에서 Javascript 콘솔을 클릭하면 콘솔 탭이 나타납니다.
나에게 효과가 있었던 것은 마우스 오른쪽 버튼을 클릭하고 검사를 클릭한 다음 콘솔 탭으로 이동한 두 번째 것입니다.
주의: 일반 브라우저가 아닌 게스트 브라우저를 사용했습니다.

Day f #daysofMiva Coding Challenge

Day f #daysofMiva Coding Challenge

Mac에서는 Command +를 클릭하고 그 반대의 경우에는 Command -를 클릭하여 글꼴을 늘릴 수 있지만 Chrome에서는 Ctrl + 및 Control -입니다.

Day f #daysofMiva Coding Challenge 컨트롤+를 눌렀을 때의 이미지

Day f #daysofMiva Coding Challenge 컨트롤을 눌렀을 때의 이미지 -

콘솔을 사용하면 Javascript 코드를 작성하고 테스트할 수 있으므로 개발 중에 오류 수정 등 매우 유용하지만 이 콘솔을 사용하여 실제 애플리케이션을 작성할 수는 없습니다.

Day f #daysofMiva Coding Challenge

alert("Hello World")

Day f #daysofMiva Coding Challenge

let js = "amazing"
if (js === 'amazing') alert("Javascript is fun")

Day f #daysofMiva Coding Challenge

50+60-10

39+54-24

위 이미지에서 JS를 사용하여 수행된 팝업과 일부 수학적 계산을 볼 수 있습니다.

내가 직면한 과제

제가 직면했던 유일한 어려움은 코드가 왜 그런 식으로 작동하는지 알지 못했다는 점이었습니다. 시간이 지나면 이해하고 능숙해질 것이라고 믿습니다.

결론

이 여행을 통해 이미 많은 것을 배우고 있다는 사실이 매우 기쁩니다. 나는 개인적으로 내가 직면한 어려움을 곧 극복할 것이라는 것을 알고 있으며, 당신이 알기도 전에 나는 전문가가 될 것입니다.?. 어쨌든 정말 고마워요 가족들❤️. 나의 3일차 기사를 기대해주세요??.

위 내용은 f일차 #daysofMiva 코딩 챌린지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.