안녕하세요 여러분. 그래서 이 챌린지 2일차에는 GitHub를 떠나 제가 정말 배우고 싶었던 것인 Javascript에 집중하기로 결정했습니다.
당신이 웹 개발 세계의 마법사라고 상상해 보세요. 마법의 생물의 뼈처럼 웹사이트의 구조를 구축할 수 있는 신뢰할 수 있는 HTML이 있습니다. 그런 다음 CSS를 사용하여 완벽한 가운이나 의상을 선택하는 등 스타일을 지정할 수 있습니다. 하지만 뭔가 빠졌습니다. 당신의 창조물은 여전히 생명이 없습니다. 이것이 바로 JavaScript(JS)가 등장하는 곳입니다. 이는 여러분의 창작물에 생명을 불어넣는 마술 지팡이입니다! JavaScript는 주로 웹사이트에서 대화형 및 동적 콘텐츠를 만드는 데 사용되는 프로그래밍 언어입니다. 이를 통해 개발자는 페이지를 다시 로드할 필요 없이 애니메이션, 양식 유효성 검사, 실시간 업데이트와 같은 기능을 구현할 수 있습니다. JavaScript는 웹 애플리케이션의 프런트 엔드(사용자가 보고 상호 작용하는 것)와 백 엔드(서버 측 작업) 모두에서 사용할 수 있습니다.
자바스크립트는 어디에나 있습니다. 오늘날의 웹을 상호작용적이고, 재미있고, 끝없이 매력적으로 만드는 언어입니다. 멋진 웹사이트, 중독성 있는 모바일 앱, 심지어 게임을 만들고 싶다면 JavaScript를 배우는 것은 책에서 가장 강력한 마법을 배우는 것과 같습니다.
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와 상호 작용하여 서버에서 데이터를 가져와 웹 페이지에 동적으로 표시하는 데 사용됩니다.
이는 유연성과 광범위한 애플리케이션으로 인해 기술 산업에서 계속해서 핵심 언어로 자리잡은 JavaScript의 다양한 용도 중 일부에 불과합니다.
그래서 기본적으로 이해하지 못하는 코드를 시작하지 않았습니까?. 나는 그것을 단계별로 취했다. 저는 먼저 크롬 개발 도구에서 코딩하는 방법을 배웠고 그 방법을 보여드리고 싶습니다.
크롬 개발 도구를 여는 방법
Chrome 개발 도구를 여는 방법은 3가지가 있습니다:
-Mac에서는 Alt J 명령
Windows에서 Alt J 제어
- 마우스 오른쪽 버튼을 클릭한 다음 검사를 선택하면 Chrome에서도 개발 도구가 열립니다. 요소 탭이 표시되고 콘솔로 이동하여 몇 가지 코드를 실행할 수 있습니다.
-마지막 단계는 크롬 메뉴로 이동한 다음 보기로 이동하여 개발자를 클릭하는 것입니다. 개발자 아래에서 Javascript 콘솔을 클릭하면 콘솔 탭이 나타납니다.
나에게 도움이 된 것은 마우스 오른쪽 버튼을 클릭하고 검사를 클릭한 다음 콘솔 탭으로 이동한 두 번째 것입니다.
주의: 일반 브라우저가 아닌 게스트 브라우저를 사용했습니다.
Command Plus를 클릭하고 그 반대의 경우 Command를 클릭하여 글꼴을 늘릴 수 있습니다. Mac에서는 제어 및 제어입니다.
컨트롤을 클릭한 이미지
컨트롤을 클릭한 이미지 -
콘솔을 사용하면 Javascript 코드를 작성하고 테스트할 수 있으므로 개발 중에 오류 수정 등 매우 유용하지만 이 콘솔을 사용하여 실제 애플리케이션을 작성할 수는 없습니다.
alert("Hello World")
let js = "amazing" if (js === 'amazing') alert("Javascript is fun")
50 60-10 39 54-24
위 이미지에서 JS를 사용하여 수행된 팝업과 일부 수학적 계산을 볼 수 있습니다.
내가 직면했다고 말할 수 있는 유일한 어려움은 코드가 왜 그런 식으로 작동하는지 알지 못했다는 것이었고 시간이 지나면 이해하고 아주 잘하게 될 것이라고 믿습니다.
이 여행을 통해 이미 많은 것을 배우고 있다는 사실이 매우 기쁩니다. 나는 개인적으로 내가 직면한 어려움을 곧 극복할 것이라는 것을 알고 있으며, 당신이 알기도 전에 나는 전문가가 될 것입니다.?. 어쨌든 정말 고마워요 가족❤️. 내 3일차 기사를 예상해 보세요??.
부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.
Copyright© 2022 湘ICP备2022001581号-3