2023.10.16
Day41 네 줄 요약
자바스크립트(JS)는 웹 페이지상에서 동적인 처리를 담당한다.
변수의 type에는 var, let, const가 있다.
document.getElementById() 메소드를 통해 웹 페이지(body)의 특정 id의 value를 받아올 수 있다.
jQuery를 사용해 js 문법을 간소화 할 수 있다.
자바스크립트
JavaScript(JS)
웹 페이지의 동적인 처리를 담당
<script> 태그가 JS 태그이며, src로 .js파일을 불러올 수 있다.
User Snippets 설정
느낌표 기호('!')를 사용해서 html 파일의 기본 구조를 불러오는 것과 같이,
특정한 문자(prefix)로 다양한 코드 조각(snippet)들을 불러올 수 있다.
* 설정 순서
[1] User Snippets -> [2] html.json -> [3] prefix & body 설정
* 작성형식
{
"[이름]": {
"prefix [단축어]": "bstructure",
"body [내용]": [
" 내용1 ",
" 내용2 ",
" 내용3 "
],
"description [설명] ": "기본구조"
}
}
* <script> 태그를 추가한 형태
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"basic structure": {
"prefix": "bstructure",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <link rel=\"stylesheet\" href=\"./style.css\">",
" <link rel=\"shortcut icon\" href=\"../favicon.ico\" type=\"image/x-icon\">",
" <title>$1</title>",
"</head>",
"<style></style>",
"<body>"
" $2",
"</body>",
"<script>",
" $3",
"</script>",
"</html>"
],
"description": "기본구조"
}
}
위와 같은 형식으로 기본구조에 <script> 태그 추가
내용 부분에 태그를 감싸는 double quote (") 제외하고, 나머지는 모두 앞에 backslash( \ )를 통해 escape 처리
$1~ 형식을 통해 tab키로 이동할 위치 설정
실행결과
이처럼 계속해서 쓰이는 포맷(스타일 서식, 사용자 정의 함수 등)을 조각화해서 반복적으로 사용 가능
변수
자바스크립트 내에서 사용하는 변수들은 기본적으로 'any' (int, char, String 상관없이 모두 담을 수 있음) 형태
var type도 아직 쓰이긴 하나 대부분 let & const 사용
* 변수의 타입
1) var
: 재선언 (O) 재할당 (O) → 위험도 높음
- var myCar = 'hyundai';
- var myCar = 'audi';
2) let
: 재선언 (X) 재할당 (O)
- let myCar = 'hyundai';
- myCar = 'audi';
3) const
: 재선언 (X) 재할당(X)
- const myCar = 'hyundai'; --> 말 그대로 상수취급
함수
사용자가 웹 페이지상에서 '클릭' 혹은 '키입력'과 같은 action을 취할 때 그에 따른 반응(동적처리)을 기술하는 곳
onclick 예제
1) addEventListener 없이 함수 구현
document.getElementById("result")
: <body> 태그 내부 → id="result" 로 정의된 요소 그 자체를 의미
document.getElementById("inputNum").value
: id="inputNum" 태그의 값을 의미
- <input> 태그는 .value로 요소의 값을 받아오거나 대입할 수 있음
result.innerHTML
: 변수 result에 담긴 태그 요소에 특정 값을 대입 (= 웹 페이지에 값 출력)
- <input> 태그가 아닐 경우 .innerHTML로 요소에 값 대입
<body>
<h1>버튼을 클릭해보세요</h1>
<h3 id="result">결과</h3>
<input type="button" id="btn" value="버튼1" onclick="inputBtn()"/>
</body>
<script>
let result = document.getElementById('result');
function inputBtn() {
result.innerHTML = `버튼을 클릭했습니다!`;
}
</script>
2) addEventListener 사용해서 함수 구현
<body>
<h1>버튼을 클릭해보세요</h1>
<h3 id="result">결과</h3>
<button id="btn" value="버튼1">버튼</button>
</body>
<script>
let result = document.getElementById('result');
let btn = document.getElementById("btn");
btn.addEventListener("click", () => {
result.innerHTML = '버튼을 클릭했습니다.';
})
</script>
실행결과
jQuery
jQuery
js 문법을 간소화 시켜주는 환경 설정
- document.getElementById("id") → $("#id")
- document.getElementById("id").value → $("#id").val()
- innerHTML → html()
태그로 서버에서 받아오는 방식과 파일을 직접 생성해 사용하는 방식이 있다.
아래는 서버 방식에 대한 내용
서버(CDN) 방식
https://releases.jquery.com/ 접속 후 uncompressed → Code Integration 내용을 script src에 삽입
<!-- html 문서 내부에 태그 삽입 -->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
onclick 예제
특별히 함수의 이름을 지어줄 필요가 없는 경우(재사용 x) 익명함수 방식을 사용
<body>
<h1>버튼을 클릭해보세요</h1>
<h3 id="result">결과</h3>
<button id="btn">버튼</button>
</body>
<!-- DNS 방식으로 jQuery 사용 -->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$("#btn").click(() => {
$("#result").html('버튼을 클릭했습니다.');
})
</script>
실행결과
'Spring-Java > Front-End' 카테고리의 다른 글
| Day43_객체 (0) | 2023.10.21 |
|---|---|
| Day42_배열, 배열의 다양한 기능 (1) | 2023.10.21 |
| Day40_상속, 넘침 (0) | 2023.10.16 |
| Day39_입력 태그, 선택자 (2) | 2023.10.15 |
| Day37_여백(margin/padding) 속성, 테이블 태그 (0) | 2023.10.12 |