JavaScript35 [Javascript] html 파일에 자바스크립트 삽입하기 지난 포스트에서 hello, world를 출력했습니다. 출력하는 예제에서는 부분에 파일이 여러개로 나뉘지 않기 때문에 문서구조가 간단해집니다. 그러나 스크립트 내용이 길어 지면 오히려 가독성을 방해하고 복잡한 구조를 형성하기 때문에 한 줄의 간단한 코드가 아닌이상에야 사용하지 않습니다. 그래서 대부분 외부파일을 임포트하는 방식을 선호하고 권장합니다. 2. 외부파일을 임포트하기 자바스크립트 파일을 html문서 외부에 두고 임포트하여 사용하는 방식입니다. console.log("Hello, World!"); src속성을 사용하는 순간 태그 사이의 자바스크립트 코드는 무시되므로 두 가지를 혼용할 수는 없습니다. 2021. 1. 25. [JavaScript] Hello World! Hello World! 이미 언어를 배운적이 있다면 굉장히 익숙할 문장입니다. 혹은 배우지 않았더라도 코딩 교육이 장려되기에 어디에선가 한번쯤은 패러디로 들어봤을 문장입니다. 그렇기에 여느 책, 강의, 문서와 마찬가지로 "Hello, World!"문장으로 서두를 띄우려고 합니다. +자바스크립트에 대한 내용은 html을 어느정도(기초) 알고있다는 가정하에 진행됩니다. 1. 코드 작성 준비 우선 VSCode를 켜고 빈 html 파일을 생성합니다.(확장자가 .html) 그다음 html을 치면 다음과 같은 자동완성이 보이는데 그중 html:5를 선택합니다. 그러면 이렇게 기본 구조가 완성된 html 파일을 자동으로 작성해 줍니다. 혹은 아래 내용을 복사해주세요. 이렇게 되면 자바스크립트를 사용하기 위한 기초 h.. 2021. 1. 25. [Javascript] 에디터 설치하기 자바스크립트를 시작하기전에 다른언어들과 마찬가지로 에디터를 설치하려고합니다. 자바스크립트의 에디터로는 노트패드, 에디트플러스, 아톰, 서브라임 텍스트, 비주얼 스튜디오 코드, 웹스톰 등이 있습니다. 저는 현재 학생 라이선스를 통해 웹스톰을 사용 중 입니다. 그러나 학생라이선스가 없거나 미구매 하셨다면 웹스톰은 배우는 과정에서 구매해서 쓰기엔 조금 부담스러운 가격을 가지고 있습니다. 그렇기에 비주얼 스튜디오 코드 환경에서 자바스크립트를 실행하시는 것을 추천드립니다. 비주얼 스튜디오 코드는 상대적으로 가볍고 훌륭한 확장성을 가지고 있습니다. 아래 사이트에서 다운로드 하시면 됩니다. code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Vis.. 2021. 1. 22. [JavaScript] 개발자 도구 자바스크립트를 학습하다보면 개발자 도구를 꽤 자주 들여다보게 됩니다. 그래서 자바스크립트에 들어가기 이전에 이 도구를 간단히 알아보고 넘어가겠습니다. 크롬을 기준으로 "F12"를 누르시면 됩니다. 그러면 이런창이 나오는데 이 창이 바로 개발자 도구 입니다. 상단에 보면 Console, Elements, Sources..등이 있습니다. 이 탭들에서 제가 공부하면서 사용하고 들여다보는 횟수가 빈번한 탭 세 가지를 간략히 설명하겠습니다. 1. Console 콘솔 탭은 코드의 실행 로그와 코드 실행의 기능을 가지고 있는 창입니다. 나중에 배울 console.log()의 내용을 확인하거나 특정 명령을 통해 요소 추출, 오류나 경고 메세지의 확인을 할 수 있습니다. 그렇기 때문에 결과 창의 이 부분을 확인하여 오류.. 2021. 1. 22. [JavaScript] 자바스크립트 개요 1. 자바스크립트란? 자바스크립트(JavaScript)란, 넷스케이프에서 개발한 웹 전용 스크립트 언어입니다. 이름에 자바가 들어가지만 자바와의 연관성은 없고 언어 개발 당시 자바를 닮았고, 자바의 인기에 편승하고자 이름을 붙였다고 합니다. 1996년도에 인터넷 익스플로러 3.0에 탑재되기 시작하여 널리 퍼지기 시작했고 현재 대부분의 웹브라우저(익스플로러를 포함한 크롬, 마이크로소프트 엣지, 파이어폭스, 사파리 등)에 탑재되었습니다. 자바스크립트는 ECMA를 통해 표준화를 거쳐 현재 ES6의 버전을 가지고 사용하고 있습니다. 262.ecma-international.org/11.0/#title ECMAScript® 2020 Language Specification 262.ecma-international.. 2021. 1. 21. 이전 1 ··· 3 4 5 6 다음 300x250
