패스트 캠퍼스 MGS 3기 - 4월 19일(Javascript 특강)
💡 Keyword
- 함수
- 선택자 -
getElementById
, getElementsByClassName
, querySelector
- PSEUDO CODE
getElementById
, getElementsByClassName
, querySelector
Javascript 특강
ref: https://northern-goldfish-40c.notion.site/Javascript-Manual-5d89d48726164d82a9b3b8c247b8c3a4
- 영어를 잘하면 js를 해석하는 데 큰 도움이 된다.
- 컴퓨터는 멍청하다. (지식이 많은 친구, 지능은 0)
js
에는 내장 함수가 엄~청 많아서 모두 외우려고 하기 보다는 필요할 때마다- 내가 어떤 기능이 필요한지 파악하고,
- 그 기능을 검색하는 방식으로 접근하기!
👩💻 예제 1
버튼을 클릭하면 모달창을 띄우는 예제를 만들어 보자!
🤔 tip
- 보통 함수 이름은
명사 + 명사
로 짓는다.showAlert
/show-alert
둘 다 가능하다.""
안에서""
가 필요하면''
을 사용.
: '~의'로 해석html
태그에서on
은 '~을 기다린다'로 해석하면 이해가 쉽다. (onclick
: 클릭을 기다린다!)
함수를 이용하기
함수는 긴 코드를 한 단어로 축약한다고 생각하면 이해가 쉽다.
style.ccs
#alertBox{
background-color: #c6c6c6;
border-radius: 10px;
font-weight: 800;
padding: 20px;
display: none;
}
#alertBox span {
cursor: pointer;
color: blue;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="alertBox">
<p>
모달창
<br>
<span onclick="모달창닫아줘()">
누르면 닫힘
</span>
</p>
</div>
<button class="showAlert" onclick="모달창열어줘()">
누르면 나타남
</button>
<script>
function 모달창닫아줘() {
document.getElementById('alertBox').style.display = 'none'
}
function 모달창열어줘() {
document.getElementById('alertBox').style.display = 'block'
}
</script>
</body>
</html>
❗ Dry한 코드 바꾸기
'Dry하다!!'라는 것은 반복되는 코드가 있다는 의미이다.
개발자들이 첫 번째로 싫어하는게 ‘반복’이므로 비슷한 동작을 수행하는 코드가 있다면 그것을 하나로 축약시키는 것이 좋다.
이전 코드에서 반복되는 부분인 function()
의 코드를 바꿔보자.
index.html
<body>
<div id="alertBox">
<p>
모달창
<br>
<span onclick="모달창여닫기('none')">
누르면 닫힘
</span>
</p>
</div>
<button class="showAlert" onclick="모달창여닫기('block')">
누르면 나타남
</button>
<script>
function 모달창여닫기(열거나닫거나) {
document.getElementById('alertBox').style.display = 열거나닫거나;
}
</script>
</body>
모달창을 두 개 만들기
style.ccs
#alertBox, #alertBox2 {
background-color: #c6c6c6;
border-radius: 10px;
font-weight: 800;
padding: 20px;
display: none;
}
#alertBox span, #alertBox2 span {
cursor: pointer;
color: blue;
}
index.html
<body>
<div id="alertBox">
<p>
모달창 1
<br>
<span onclick="모달창여닫기('none')">
누르면 닫힘
</span>
</p>
</div>
<div id="alertBox2">
<p>
모달창 2
<br>
<span onclick="모달창열고닫기('none')">
누르면 닫힘
</span>
</p>
</div>
<div>
<button class="showAlert" onclick="모달창여닫기('block')">
누르면 모달창1 나타남
</button>
<button onclick="모달창열고닫기('block')">
누르면 모달창2 나타남
</button>
</div>
<script>
function 모달창여닫기(열거나닫거나) {
document.getElementById('alertBox').style.display = 열거나닫거나;
}
function 모달창열고닫기(열거나닫거나) {
document.getElementById('alertBox2').style.display = 열거나닫거나;
}
</script>
</body>
❗ Dry한 코드 바꾸기
Dry 1
<script>
function 모달창여닫기(열거나닫거나) {
document.getElementById('alertBox').style.display = 열거나닫거나;
}
function 모달창열고닫기(열거나닫거나) {
document.getElementById('alertBox2').style.display = 열거나닫거나;
}
</script>
Dry 2
<div id="alertBox">
<p>
모달창 1
<br>
<span onclick="모달창여닫기('alertBox', 'none')">
누르면 닫힘
</span>
</p>
</div>
<div id="alertBox2">
<p>
모달창 2
<br>
<span onclick="모달창여닫기('alertBox2', 'none')">
누르면 닫힘
</span>
</p>
</div>
위의 두 부분(Dry 1, Dry 2)에서 반복이 일어나고 있으므로 코드를 바꾸어 보자! addEventListener
와 콜백 함수를 이용하였다.
style.css
#alertBox {
background-color: #c6c6c6;
border-radius: 10px;
font-weight: 800;
padding: 20px;
display: none;
}
#alertBox span {
cursor: pointer;
color: blue;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="alertBox">
<p id="target"> 모달창 1 </p>
<span id="closeSpan">
누르면 닫힘
</span>
</div>
<div>
<button class="showAlert" onclick="모달창열기('모달창 1')">
누르면 모달창1 나타남
</button>
<button onclick="모달창열기('모달창 2')">
누르면 모달창2 나타남
</button>
</div>
<script>
// 옛날 문법
function 모달창열기(내용) {
document.getElementById("alertBox").style.display = "block";
document.getElementById("target").innerHTML = 내용;
}
// 최신 문법
document.getElementById("closeSpan").addEventListener("click", function () {
document.getElementById("alertBox").style.display = "none";
})
</script>
</body>
</html>
👉 실행 결과
addEventListener
- add: 추가할 것이다.
- Event: 일, 사건(=사용자의 행동)
- Listener: on(~를 기다리는 중)
- 2개의 인자가 필요! 어떤 행동을 기다릴 것인지, 어떤 행동을 할 것인지
- (내용 추가하기..) 콜백 함수 순서에 따라..어쩌고 1. 사용자가 span 태그를 클릭 2. ...
👩💻 예제 2
<input>
을 이용하여 사용자의 입력을 받아서 유효성 검사 예제를 만들어 보자!
사용자가 검색어를 입력했을 때, 검색어를 입력하지 않았을 때, 그리고 공백을 입력했을 때를 고려한다.
🤔 제어문(조건문) 조건 작성 시 알아둘 것!!
=
,==
,===
=
: 대입 연산자==
: 좌항의 값과 우항의 값을 비교, 같으면true
다르면false
===
: 좌항의 값과 우항의 값을 비교 & data type도 비교- booleanData의 특징
- 숫자 0은
false
- 0이 아닌 양수는
true
- 문자열이 선언되어 있지 않으면
false
- 문자열이 선언되어 있으면
true
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" name="" id="targetInput">
<button id="submitBtn">제출</button>
<div id="result">
</div>
<script>
document.getElementById("submitBtn").addEventListener("click", function () {
var userInput = document.querySelector("#targetInput").value;
if (!userInput.trim()) {
alert("공백을 입력하지 마세요!!")
}
else {
alert(userInput)
}
});
</script>
</body>
</html>
👉 실행 결과
PSEUDO CODE
컴퓨터 언어가 아닌 사용자(개발자) 언어로 미리 코딩하는 것을 뜻한다.
사용자의 입력한 값을 받아 화면에 출력하는 예제로 예시를 들면,
<input>
에 값을 입력- 인풋태그 추적해서
- 사용자가 입력한 값 가져온 다음 👉 '값을 어떻게 가져오지?'라는 생각이 들 땐 구글링 적극 활용하기(how to get value input tag in javascript)
- 버튼을 클릭
- 입력한 값을
<div>
안에 출력
무작정 코드부터 짜는 것이 아니라! 필요한 기능을 먼저 생각해보고 코드로 옮기는 이러한 과정은 매우 중요하다. 처음엔 머릿속에 바로 떠올리고 코드로 옮기는 것이 쉽지 않겠지만.. 습관화해야 한다!!
선택자
js
에서 tag
를 선택할 수 있는 방법에는 3가지의 방법이 있다.
-
getElementById
id
의 값으로tag
를 선택tag
를 무조건 하나만 선택
-
getElementsByClassName
-class
의 값으로tag(들)
을/를 선택tag
를 여러 개 선택한다고 가정, 따라서 배열로 접근해야 함
-
querySelector
css-selector
로tag
를 선택- 제일 위에 있는
tag
하나만 선택, 여러 개 선택하려면querySelectorAll
사용
🤔
id
는 중복 ❌,class
는 중복 ⭕?
id
를 여러 번 사용해도 실제로는 웹어플리케이션에 에러가 발생하지 않는다. 동작은 문제 없이 되지만 개발자들끼리id
는 한 번만 쓰자고 약속한 것!
🤔 구글링 Tip:
""
: 꼭 포함해야 하는-
: 빼고 싶은
👉 "react" -vue: react를 검색하는데, vue가 포함된 검색결과는 보기 싫어!*
: 기억이 나지 않는 키워드 검색 시
👉 react vs *: react랑 무언가를 비교하고 싶은데 뭔지 모르겠어... react와 무언가를 비교한 검색결과들을 모두 보고싶어!
Author And Source
이 문제에 관하여(패스트 캠퍼스 MGS 3기 - 4월 19일(Javascript 특강)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jytrack/패스트-캠퍼스-MGS-3기-4월-19일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)