자바스크립트란?
웹페이지를 동적으로 제어하기 위해서 고안된 언어이다.
"웹 페이지에 생동감을 불어넣기 위해"
전체가 사람이라면
HTML - 뼈대
CSS - 생김새
JS - 움직임
자바스크립트의 강점
1) HTML/CSS 완전한 통합가능
2) 간단하게 처리될 수 있는 일은 간단히 처리
3) 모든 대표적인 브라우저에서 지원되고, 기본 언어로 사용됨
자바스크립트 이후의 언어?
- CoffeeScript : 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드 작성 가능
- TypeScript : 개발을 단ㅅ눈화하고 복잡한 시스템을 지원하려는 목적 ' 자료형의 명시화'에 집중해 만든 언어(MS사 개발)
- Flow : 자료형 강제(TypeScript와는 다른 방식, Facebook 개발)
- Dart : 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 공유의 엔진을 가진 독자적 언어(Google 개발)
코드에디터 *다운로드
설치 방법(참고 - 이미 설치한 이후라서 자세하게 설명해 놓은 사이트 첨부)
https://www.lainyzine.com/ko/article/how-to-install-visual-studio-code-on-windows-10/
[Windows 10] Visual Studio Code 설치하는 방법
Visual Studio Code는 Microsoft에서 오픈소스로 개발하고 있는 코드 에디터입니다. 이 글에서는 Windows 10에서 VS Code를 설치하는 방법을 소개합니다.
www.lainyzine.com
사용하고 있는 확장 플러그인 (extension plug-in)
vscode에서 파일을 웹브라우저로 바로 실행할 수 있는 플러그인
파일이 수정되었을 때 바로바로 수정된 상태로 웹 브라우저에서 보여주는 플러그인 (오른쪽 하단 go live)
저장하면 자동 업데이트
사용하는 언어 양식에 맞게 코드를 한번에 정리해줌
cf. 그외의 플러그인 추천
Visual Studio Code 추천 확장(extension) 플러그인
🔔 이 게시글은 HTML, JavaScript, PHP, React 관련 플러그인에 관해서만 정리되어 있습니다. Visual Studio Code(vs code)는 마이크로 소프트에서 개발한 문서 편집기로 웹 개발에 주로 사용된다. 초기에는 Atom
teserre.tistory.com
cf. 대략적인 디렉토리 계층
자바스크립트의 기본 형식
HTML 안에 속해 있을 때
<head></head>와 <body></body>에 쓰는지는 딱히 상관이 없음
<script></script> 형식으로 태그 안에 코드를 작성한다.
HTML 밖에 js파일이 있을때
<script src="자바스크립트.js"></script>
을 html 파일에 삽입해서 html파일과 js파일을 연결해 줘야함.
자바스크립트의 기본 규칙
1) 하나의 실행문이 끝나면 ; 붙여야함
var i = 0;
document.write(i); // 0
2) 대소문자 구분
var i = 0;
document.write(i); // 0
document.write(I); // undefined
3) 들여쓰기 사용 (대부분의 언어가 비슷 - python의 경우에는 극도로 예민;; 들여쓰기 맞춰주지 않으면 오류가 생김 띄어쓰기의 늪에서 헤어나오지 못할 수도 있음.. 미리미리 띄어쓰기하는 습관 가지기!)
대부분 들여쓰기는 스페이스를 4번 누르거나, tab키로 한번 누르는 것으로 사용하는 경우가 많다.
가끔 vscode에서 tab키로 들여쓰기가 안되는 경우가 있음 이때 Ctrl+N 키를 누르면 대부분 해결 됨.
들여쓰기나 코드가 너무 제멋대로 써져 있거나 할 경우 전체 코드를 선택한 후 Ctrl+K+F 키를 누르면 자동 정렬 됨.
var amountavg = function(){
var avg = sum / num;
}
4) 주석(comment)
한줄 주석일 경우
// comment line
여러줄 주석일 경우
/*
this is
comment line
*/
기본 명령어 prompt, alert, confirm
alert
alert("메세지 내용");
해당하는 메세지를 보여줌
prompt
prompt("입력받을 내용에 대한 텍스트", "입력받는 값 예시");
사용자에게 텍스를 입력 받음
확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 ESC를 누르면 null을 반환
confirm
cofirm("확인받을 텍스트", "true시 동작할 값", "false시 동작할 값");
확인 또는 취소에 대해 확인하는 함수
사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에서 보여짐
사용자가 확인을 누르면 true, 사용자가 취소 또는 ESC를 누르면 false를 반환
*codepen 예시
https://codepen.io/jiwonch/pen/zYWWzBL
zYWWzBL
...
codepen.io
*간단한 예제
let userName = prompt("당신의 이름은 무엇입니까?", "ㅇㅇㅇ");
alert( userName );
//현재 "텍스트" + 변수 이름 + "텍스트"로 표현했지만,
// 새로운 자바스크립트에서는 백팁(`)을 사용해서 표현하기도 함.
// confirm(`당신의 이름은 ${userName} 입니까?`);
let nameConfirm = confirm( "당신의 이름은 " + userName + "입니까?");
alert( nameConfirm );결과화면
1. prompt로 사용자의 이름을 받아 변수 userName에 값을 넣어줌
2. prompt로 받은 값을 가지고 있는 userName을 alert로 보여줌.
3. prompt로 받은 userName이 맞는지 confirm으로 확인함.
( confirm의 경우에는 값에 따라서 이후에 동작이 달라지는 경우가 많기 때문에, if문과 같이 쓰임. )
4. 3번에서 확인을 눌렀으면 맞음 --> true가 출력됨.
5. 3번에서 취소를 누르면, 아님 --> false가 출력됨.
예제 묶음
GitHub - jiwonch/javascript_study
Contribute to jiwonch/javascript_study development by creating an account on GitHub.
github.com
GitHub - jiwonch/javascript_study
Contribute to jiwonch/javascript_study development by creating an account on GitHub.
github.com
GitHub - jiwonch/javascript_study
Contribute to jiwonch/javascript_study development by creating an account on GitHub.
github.com
참고사이트
https://ko.javascript.info/alert-prompt-confirm
alert, prompt, confirm을 이용한 상호작용
ko.javascript.info
https://www.w3schools.com/js/js_comments.asp
JavaScript Comments
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'JavaScript > 스터디(책 200제 포함)' 카테고리의 다른 글
| 변수 - let, var / 상수 - const / 지역변수, 전역변수 / 호이스팅(hoisting) (0) | 2022.08.06 |
|---|
댓글