자바스크립트로 무엇을 할 수 있나요? 자바스크립트란 무엇이며 어떤 역할을 합니까? 예제 자바스크립트 예제로 할 수 있는 작업
다양한 웹 리소스를 방문하는 사용자는 종종 흥미로운 비표준 솔루션을 발견하고 자신의 사이트에서도 동일한 작업을 수행하고 싶어합니다. 대부분의 경우 이러한 솔루션에는 JavaScript가 사용됩니다.
이 기사에서는 대화형 웹 페이지를 만들기 위해 설계된 스크립트 언어인 JavaScript와 JS로 수행할 수 있는 작업에 대해 설명하겠습니다. JavaScript를 사용하는 예를 살펴보고 그것이 우리에게 어떻게 도움이 되는지 살펴보겠습니다.
JavaScript를 사용하여 무엇을 할 수 있나요?페이지를 편집하고, 페이지에 텍스트를 쓰고, 태그를 추가 및 제거하고, 요소 스타일을 변경하세요.
이벤트에 반응: 스크립트는 어떤 일이 발생하기를 기다리고(마우스 클릭/호버, 페이지 로딩 완료) 함수를 실행하여 응답할 수 있습니다.
예를 들어 링크나 이미지 위에 마우스를 올리면 도구 설명이 표시될 수 있습니다. 마우스를 클릭하면 블록의 내용을 전환할 수 있습니다. 페이지가 로드되면 광고 팝업창을 표시합니다. 시간에 따라 페이지 모양을 변경할 수 있습니다.
자바스크립트. 빠른 시작
페이지를 다시 로드하지 않고 서버에 대한 요청을 수행하고 데이터를 로드합니다.
예를 들어, 사용자가 웹사이트나 방명록에 댓글을 남긴 경우 페이지를 다시 로드하지 않고도 해당 댓글이 즉시 표시됩니다. 또한 파일을 서버에 업로드하여 다운로드 진행률을 백분율로 표시할 수도 있습니다.
쿠키 설정 및 읽기, 데이터 유효성 검사, 메시지 표시 등을 수행합니다.
예를 들어, 처음으로 사이트를 방문하면 이용자에게 팝업창이 노출되고 쿠키가 설정됩니다. 그리고 이후에 이 리소스를 방문하면 쿠키가 이미 설정되어 있으므로 팝업 창이 표시되지 않습니다.
또한 입력한 이메일의 정확성을 확인하고, 입력한 전화번호가 필수 형식을 준수하는지 확인하고, 입력된 데이터의 정확성 또는 부정확성에 대한 메시지를 즉시 표시할 수 있습니다.
JavaScript의 사용은 매우 광범위하고 다양하여 수천 개의 사용 예가 제공될 수 있지만 매일 새로운 스크립트가 작성되기 때문에 목록이 완전하지는 않습니다. 나는 여러분이 다양한 사이트에서 아래의 많은 예를 접했다고 확신합니다. 그리고 이 모든 것은 JavaScript를 사용하여 구현됩니다.
물론, 예시에 제시된 갤러리가 유일한 갤러리는 아닙니다. 다른 모든 것과 마찬가지로 상상할 수 있는 수백 개의 유사한 갤러리가 있었습니다. 그리고 목록을 무한대로 확장하지 않기 위해 가장 인기 있는 스크립트 그룹 중 하나의 예를 제시했습니다.
이것이 우리에게 무엇을 주는가?1. 편리한 다단계 탐색
JavaScript를 사용하면 사이드 바의 다중 레벨 메뉴와 다중 레벨 탐색을 컴팩트하게 만들 수 있습니다. 메뉴 하위 항목은 클릭하거나 마우스를 가리키면 열립니다.
많은 온라인 상점에는 사이드바 드롭다운 탐색 기능이 있습니다. shop.by를 예로 들어보겠습니다. 마우스를 올리거나 클릭해도 하위 항목이 사라지지 않고 동시에 표시된다면 얼마나 늘어날지 상상해 보세요!
2. 갤러리와 슬라이더를 사용하면 사진, 추가 유형의 제품 사진을 표시하고 사진 작가의 포트폴리오를 편리하고 간결하게 정리할 수 있습니다.
자바스크립트. 빠른 시작
웹 애플리케이션을 만드는 방법에 대한 실습 예제를 통해 JavaScript의 기본 사항을 알아보세요.
갤러리는 다양한 유형의 상품을 표시해야 할 때 온라인 상점에서 제품을 자세히 보는 데 특히 적합합니다. 도움을 받으면 사용자에게 작은 블록의 모든 이미지를 한 번에 표시할 수 있으며 작은 이미지와 확대된 이미지를 모두 볼 수 있습니다.
아래 사진에 보이는 갤러리에는 얼마나 많은 공간이 필요할까요?
3. 최근에는 웹사이트의 사이드 컬럼에 많은 위젯이 표시되었습니다. 인기 있는 소셜 네트워크, 카테고리, 게시물 아카이브, 캘린더, 최신 블로그 댓글, 인기 게시물 등을 위한 위젯입니다.
많은 사이트에서 일부 위젯은 의미가 없고 공간을 차지하기 때문에 간단히 삭제할 수 있다는 점에 유의해야 합니다.
하지만 여전히 많은 위젯을 콤팩트하게 넣어야 한다면 어떻게 해야 할까요?
이것이 바로 "탭"이 있는 JavaScript 솔루션이 구출되는 곳입니다.
도움을 받으면 모든 위젯을 사이트의 측면 열에 잘 맞출 수 있습니다. 더 나은 인식을 위해 위젯을 "탭"으로 그룹화할 수 있습니다.
예를 들어, 하나의 "탭"에 소셜 네트워크 위젯을 배치하고 두 번째 탭에 카테고리 및 아카이브를 배치할 수 있습니다. 이렇게 하면 공간이 절약되고 사이트 사용이 더욱 편리해집니다.
4. JavaScript를 사용하면 귀하의 사이트나 고객 사이트의 연락처 페이지를 크게 개선할 수도 있습니다.
양식 필드에 도구 설명을 포함합니다.
양식 필드에 입력된 데이터를 확인하고 오류 메시지를 표시합니다.
페이지를 다시 로드하지 않고 양식 데이터를 제출합니다.
경로가 포함된 지도를 배치하세요.
5. 사이트에 표 형식의 데이터를 배치하는 사람들에게는 표에서 데이터 정렬을 사용하는 것이 매우 유용할 것입니다.
6. 그래프와 차트 형태로 사이트에 통계를 게시하는 사람들은 JavaScript로 대화형 차트와 그래프를 만드는 기능이 매우 유용하다는 것을 알게 될 것입니다.
또한 JavaScript를 사용하면 요소의 부드러운 슬라이딩, 요소의 움직임, 점진적인 출현 및 사라짐 등 상상하는 모든 종류의 효과를 사이트에서 만들 수 있습니다.
이 모든 것이 사이트를 방문자에게 더욱 편리하게 만들고, 보다 상호 작용하며, 기술적으로 더욱 발전시킬 수 있습니다.
결론보시다시피 JavaScript의 범위는 매우 넓습니다. 여기에는 갤러리, 슬라이더, 탭, 모든 종류의 대화형 요소, 지도, 그래프, 양식 작업 등이 포함됩니다.
나는 누구나 JavaScript의 유용한 용도를 찾아 자신의 사이트나 고객의 사이트에서 사용할 수 있다고 생각합니다.
이 기사가 마음에 들었고 JS 덕분에 구현할 수 있는 새로운 기능에 대해 배웠기를 바랍니다.
귀하의 웹사이트에서 JavaScript를 사용하십니까? JavaScript를 사용할 때 가장 큰 어려움은 무엇입니까?
기사에 대한 의견을 통해 이에 대해 알려주십시오.
자바스크립트. 빠른 시작
웹 애플리케이션을 만드는 방법에 대한 실습 예제를 통해 JavaScript의 기본 사항을 알아보세요.
TL;DR 이 리뷰 기사입니다. 마치 "이전 에피소드 요약"과 같습니다. 초보자나 최근 업계를 따르지 않은 사람들에게 유용할 것입니다. 초보자의 경우 이는 "JavaScript 세계"로 들어가는 첫 번째 단계가 될 것이며, 숙련된 사람은 자신의 지식을 새롭게 할 수 있을 것입니다.
JavaScript에는 매우 놀라운 운명이 있습니다. 그는 가장 오해받는 언어에서 가장 놀라운 언어로의 길을 극복했습니다. 그는 어려운 어린 시절을 보냈습니다.
처음에 저자는 기능적인 언어를 작성하고 싶었습니다. 그러나 관리자들은 "일반적인" 객체지향을 원했습니다. 그리고 새로 만든 언어에 대한 개발자를 쉽게 찾을 수 있도록 구문을 Java와 비슷하게 만들기로 결정하고 이름까지 비슷하게 만들었습니다.
그러나 이야기는 거기서 끝나지 않습니다. Java, JavaScript는 Sun(현재 Oracle)의 상표입니다. Microsoft는 JavaScript 이름을 사용할 수 없었습니다(Netcape와 Sun은 Microsoft의 친구였습니다). 결과적으로 Microsoft는 JavaScript를 리버스 엔지니어링하기로 결정하고 이를 JScript라고 명명했습니다. 우리는 리버스 엔지니어링을 했는데, 구현에 있어서 모든 버그를 제거할 정도로 잘 해냈습니다. 나중에 그들은 표준을 만들기로 결정하고 이를 ECMAScript라고 불렀습니다.
약한 타이핑, 구현 오류, 무거운 전통, 기능적 언어 기능을 갖춘 프로그래밍 언어는 "어떻게?"라는 단 하나의 느낌을 불러일으킵니다. 그래서 방법? . 지속적으로 업데이트되는 "진주" 목록.
JavaScript로 작업할 때 미쳐가는 것을 피하려면 약한 타이핑이 작동하는 방식, 변수 범위가 작동하는 방식(전역 변수는 사악함), 프로토타입 및 생성자가 작동하는 방식을 이해해야 합니다. jshint는 또한 언어의 "나쁜 부분"을 피하는 데 도움이 됩니다.
이 전체 이야기는 다음에서 더 자세히 설명됩니다. 두 번째 강의더글라스 크록포드. 보는게 더 나을듯 총 8부작. 거기에 자막이 있습니다;).
(언어의 기능적/비동기적 특성으로 인해) 이해해야 할 기본 사항은 제어 흐름이 무엇인지, 비동기 언어로 작업할 때 제어 흐름이 어떻게 도움이 되는지, 오류 처리가 어떻게 작동하는지(try/catch가 항상 도움이 되는 것은 아닙니다)입니다.
누구나 이미 스스로 결론을 내릴 수 있지만 나는 그것을 소리내어 말하고 쓸 것입니다. 이제 JavaScript(html 및 css는 포함되지 않음)만 알고 처음부터 끝까지 웹 애플리케이션을 개발할 수 있습니다.
타르 한 스푼- NodeJS는 아직 버전 1에 도달하지 않았으며 여전히 답변되지 않은 질문이 많이 있습니다. 즉, NodeJS에서 채팅을 작성하는 방법은 명확하지만 크고 복잡한 프로젝트는 어떻습니까?..
- 기술이 활발히 발전하고 있고 빠르게 구식이 되기 때문에 일반적인 튜토리얼은 없습니다.
- 모듈 개발은 자발적으로 이루어집니다. 많은 모듈이 버려졌습니다. Github에 가서 마지막 커밋이 약 1년 전임을 확인합니다.
- "성인용" 프레임워크는 없습니다. “젊은” 유망 프로젝트가 있습니다. 그러나 레일 수준 프레임워크는 없습니다.
서정적 여담
그러나 Meteor가 제공할 수 있는 것은 다른 어떤 기술도 제공할 수 없는 것입니다: 서버에서 클라이언트로(또는 그 반대로) 코드를 완전히 재사용하고 작은 마법 카트(데이터 바인딩, 클라이언트 핫 리로드...)도 제공합니다.
유일한 장점은 단점이기도 합니다. 클라이언트와 서버 코드는 별개가 아닙니다. Meteor는 클라이언트가 다른 기술을 사용하여 만들어진 경우에는 그다지 적합하지 않습니다. 예를 들어 기본 모바일 또는 데스크톱 클라이언트입니다.
그런데 가장 가까운 경쟁자인 Meteor derby가 이 문제를 해결하고 있습니다. Express를 사용하고 훨씬 적은 마법을 사용하므로 REST API를 연결할 수 있습니다.
생각해보면 고전적인 북부 클라이언트 접근 방식에서 벗어나려는 시도는 이번이 처음이 아닙니다. 그 전에는 예를 들어 GWT가 있었습니다. 그러나 이전의 모든 시도는 덜 효과적이었고 JavaScript도 아니었습니다.
현대 인터넷은 스크립트 없이는 상상할 수 없습니다. JavaScript로 작성하는 법을 배웁니다.
성경이 인터넷용으로 쓰여졌다면 다음과 같이 시작될 것입니다.
먼저 메일이 왔습니다. 그리고 엔지니어들은 이것이 좋은 것이라고 보았습니다. 그리고 그들은 하이퍼링크가 있는 WWW를 만들었습니다. 그리고 엔지니어들은 이것이 또한 좋은 것이라고 보았습니다. 그런 다음 페이지에 생명을 불어넣기 위해 JavaScript 언어를 만들었습니다.
이것은 대략 현실에서 일어난 일입니다. 자바스크립트"부흥"하기 위해 발명되었습니다. HTML. 스크립트 자바스크립트본문에 직접 쓴 HTML또는 스타일과 같은 별도의 파일에 저장됨 CSS. 페이지가 브라우저에 로드된 후 즉시 실행됩니다.
언어 자체도 처음에는 호출되었습니다. 라이브스크립트. 그런 다음 이름이 변경되었습니다. 자바스크립트, 어떻게든 범용 Java 언어와 연결하려고 계획했기 때문입니다. 하지만 이제 그들은 공통점이 거의 없으며 자바스크립트- 자체 명확한 사양 ECMAScript를 갖춘 완전히 독립적인 프로그래밍 언어입니다.
기술적으로 JavaScript는 Oracle의 상표이고 언어는 Microsoft의 JScript 및 ActionScript와 함께 ECMAScript의 "확장"이지만 이는 상표 문제에 더 가깝습니다. 가장 중요한 것은 무료 ECMAScript가 누구에게도 속하지 않는다는 것입니다.
시간이 지남에 따라 영향권이 확대됨 자바스크립트크게 확장되었습니다. 그들은 페이지의 스크립트에만 사용하기 시작했습니다. HTML, 심각한 대규모 웹 응용 프로그램 및 브라우저에서 실행되는 전체 프로그램에도 적용됩니다. 이러한 프로그램을 특별한 방식으로 "패키지"하고 브라우저와 별도로 실행하는 도구가 있습니다. 이들은 컴파일러와 통역사이며 교육 과정 ""및 ""에서 더 자세히 논의됩니다.
JavaScript 애플리케이션은 적절한 인터프리터가 있는 모든 환경에서 실행됩니다.
지금은 브라우저와 HTML 페이지에만 관심이 있습니다.
수행하는 방법 자바스크립트? 기본 스크립트를 작성하는 것은 간단한 스크립트를 작성하는 것보다 어렵지 않습니다. HTML- 스크립트 때문에 페이지 자바스크립트일반 텍스트로 작성됩니다. 즉, 동일한 메모장에서 문자 그대로 생성한 다음 별도의 파일에 저장하거나 본문에 붙여넣을 수 있습니다. HTML-문서. 가장 간단한 것들 자바스크립트정말 쉽습니다.
자바스크립트 작성 방법예를 들어, 서버에서 Windows 스크립트를 실행하기 위한 간단한 스크립트를 만들어 보겠습니다. 이 스크립트는 메모장에서 직접 작성하고 브라우저 없이 실행할 수 있습니다.
WScript. 에코(" 안녕하세요 스킬박스입니다!")
우리는 이 텍스트를 다음과 같이 씁니다. "메모장"을 클릭한 다음 해당 이름으로 파일을 저장합니다. Skillbox.js그리고 뛰어들어 "탐침"윈도우.
유사한 스크립트를 페이지 코드에 직접 작성할 수 있습니다. HTML태그 사이 그리고 . 여기서는 이미 일반 JavaScript 메서드를 사용할 수 있습니다. 에코특정 개체 W스크립트. 브라우저에서 데이터를 입력하고 출력하는 몇 가지 표준 방법을 살펴보겠습니다.
알리다()방법 알리다()"확인" 버튼이 있는 창을 표시합니다. 창에는 괄호 안에 표시된 메시지가 표시됩니다. 예를 들어, “안녕하세요, 스킬박스님!”. 즉, 이 경우 브라우저는 이전에 스크립트 서버가 수행했던 것과 정확히 동일한 작업을 수행합니다. 윈도우.
이 예제는 메모장에서도 작성할 수 있으며 확장자를 가진 파일에 저장하면 됩니다. HTML. 예를 들어, Skillbox.htm.
알리다(" 안녕하세요 스킬박스")
결과:
논증으로서 알리다()특정 텍스트뿐만 아니라 다른 데이터의 계산 또는 처리 결과도 지정할 수 있습니다. 예를 들어, 경고(x), 여기서 x는 별도로 계산됩니다.
확인하다()방법 확인하다()메시지와 함께 동일한 창을 표시하지만 "확인"과 "취소"라는 두 개의 버튼이 있습니다. 사용자가 클릭하는 버튼에 따라 메서드는 다음 중 하나를 반환합니다. 진실, 또는 거짓. 서버는 사용자로부터 이 반환 값을 수신하고 응답에 따라 일부 작업을 수행합니다.
구문은 동일하며 여기서만 선택이 논리적으로 가정되므로 사용자에게 질문이 표시됩니다.
확인하다(" 안녕하세요 스킬박스")
결과:
방법 즉각적인()사용자가 데이터를 입력하는 텍스트 필드와 메시지가 포함된 대화 상자를 표시합니다. "확인"과 "취소" 버튼도 두 개 있습니다. 첫 번째 버튼을 누르면 입력된 텍스트가 서버에 반환되고, 두 번째 버튼을 누르면 부울 값이 반환됩니다. 거짓.
구문은 다음과 같습니다.
즉각적인( 메시지, data_input_field_value)
입력 필드 값은 선택 사항입니다. 사용자의 편의를 위해 해당 필드에 원래 입력되었던 텍스트를 입력할 수 있습니다.
즉각적인(" Skillbox에 인사하세요", "안녕하세요")
결과:
현대의 가능성 자바스크립트양식을 통한 원시적인 데이터 입력 및 출력을 훨씬 뛰어넘습니다. 우리는 이러한 방법을 가장 간단한 예로만 제시했습니다. 게다가, 자바스크립트사용자 작업에 응답할 수 있습니다. 예를 들어 마우스를 움직이거나 특정 키를 누르는 경우입니다. 자바스크립트종종 비동기 작업을 제공하는 데 사용됩니다( 기술 아약스) 페이지의 정보가 다시 로드되지 않고 업데이트되는 경우. 이 모드에서는 데이터가 서버로 전송되고 거기에서 대화형으로 다운로드됩니다. 게다가, 자바스크립트조작할 수 있는 HTML-페이지의 요소(태그 생성 및 숨기기 등) 및 더 많은 작업을 수행합니다.
유용한 도구 개발자 콘솔널리 사용되는 모든 브라우저에는 특별한 개발자 콘솔이 있습니다. 페이지에 스크립트 코드를 표시하고 기타 유용한 정보도 표시합니다. 안에 크롬, 파이어폭스그리고 즉.단축키를 누르면 개발자 콘솔이 열립니다 F12, V 사파리 - Ctrl+Shift+I또는 Ctrl+Alt+C.스크린샷에서 스크립트는 웹 페이지의 다른 요소와 함께 오른쪽 상단에 표시됩니다.
크롬 개발자 콘솔.
코드 편집기앞으로는 편리한 프로그래밍을 위해서는 코드에디터를 설치하거나 IDE(통합 개발 환경),통합 개발 환경. IDE다른 유용한 도구와 통합되고 추가 모듈 연결 등을 지원하는 고급 기능을 갖춘 편집기입니다.
인터넷에는 다양한 목적을 제공하는 사이트에서 호스팅되는 수백만 개의 웹 페이지가 있습니다. 그들 중 일부는 매력적이지만 다른 일부는 그렇지 않습니다.
보기 좋고, 사용하기 쉬우며, 오랫동안 참여를 유지할 수 있을 만큼 대화형인 것은 JavaScript를 사용하는 것입니다. 그것은 무엇을 위한 것입니까? 알아 보자.
다중 패러다임 언어입니다. 즉, 객체 지향, 기능적, 명령형 프로그래밍을 지원합니다. 이름은 Java를 암시하지만 구문은 C 언어에서 파생됩니다.
대부분의 웹페이지는 HTML 코드 형식으로 구축됩니다. 웹 페이지를 매력적으로 만들고 가독성을 향상시키는 다양한 요소를 웹 페이지에 추가할 수 있는 매우 간단한 언어입니다. HTML 코드를 사용하면 웹 페이지에 인라인 이미지, 색상 및 기본 애니메이션을 사용하여 모양을 향상시킬 수 있습니다. CSS(Cascading Style Sheets)를 사용하면 유연성이 향상되고 전체 코드 양과 웹 페이지의 복잡성이 줄어듭니다. 이를 통해 휴대폰, 태블릿, 데스크톱 컴퓨터 등 다양한 장치에서 페이지 콘텐츠를 더 쉽게 표시할 수 있습니다. JavaScript는 주로 웹 페이지에 대화형 요소를 추가하여 웹 페이지를 더욱 사용자 친화적이고 매력적으로 만드는 데 사용됩니다. 이것이 무엇을 할 수 있고 어떻게 사용되는지 살펴보겠습니다.
자바스크립트란 무엇입니까?일반적으로 클라이언트 측에서 실행되는 프로그래밍 언어입니다. 사용자 상호작용에 사용됩니다. 또한 게임, 데스크톱 및 모바일 애플리케이션 개발, PDF 문서 및 데스크톱 위젯 생성에도 사용됩니다. 웹 브라우저에는 이 언어에 대한 지원이 내장되어 있습니다.
실시예 1
첫 번째 예는 매우 간단하며 일반적으로 메뉴 항목에 사용됩니다. 특정 링크나 메뉴 버튼 위로 마우스를 이동하면 색상이 변경됩니다. 사용자 작업에 따른 이러한 색상 변경은 다양한 시각 효과에 사용될 수 있으며 웹 페이지의 모양도 향상시킬 수 있습니다. 아래 예에서 원하는 버튼 위로 마우스를 가져가면 색상이 변경되는 것을 확인할 수 있습니다.
빨간색 녹색 파란색 함수 color(el, color) ( el.style.color = "#FFFFFF"; el.style.BackgroundColor = color; ) 함수 uncolor(el) ( el.style.color = "#000000"; el. 스타일.배경색상 = "#E6E6E6"; )
실시예 2
이것은 이벤트의 완벽한 예입니다. 여러 웹 페이지에서 비슷한 내용을 본 적이 있습니다. 버튼을 누르면 디스플레이에 메시지가 나타납니다. 다음에 수행할 작업이나 유용한 정보를 알려줄 수 있습니다. 아래 예에서는 버튼을 클릭하면 간단한 메시지가 표시됩니다.
단추
JavaScript가 널리 사용되기는 하지만 사용자가 JavaScript에 완전히 의존해서는 안 됩니다. 누구나 코드를 복제할 수 있으므로 특정 보안 문제가 있습니다. 브라우저마다 렌더링 엔진에 따라 이를 다르게 해석하므로 디스플레이에 불일치가 발생할 수 있습니다. 그러나 이러한 우려에도 불구하고 JavaScript는 인터넷 전반에 걸쳐 매우 인기가 높고 널리 사용됩니다.
