학습내용
반복문, 문자열과 배열의 property와 methods
html에 javascript 적용하는 간단한 실습
github js-ex-1 ~ js-ex-4, naver-ex 안 js파일까지
github커밋-js연습
javascript 기초
반복문
- while(조건) {행동} : 조건이 참이면 행동 실행
- do {행동} while (조건): 최초 한 번은 실행한 후 조건 파악
- for(가변값 시작점; 조건; 규칙)
- break (즉시 종료), continue(아래 코드 건너뛰고 실행)
배열, 객체 반복문 for ~ in
var arr = ['banana', 'apple', 'watermelon'];
for (var i in arr) {
console.log(i); // 배열 인덱스
console.log(arr[i]);
}
for (var i in student) {
console.log(student[i]);
}배열 내장 메소드 forEach
callback 함수(익명함수, 콜백함수): 특정 조건이 만족되면 호출되는 함수. 함수 이름 없음- forEach는 return을 사용할 수 없다.
arr.forEach(function(element, index) {
console.log(element);
console.log(index);
});배열 내장 메소드 map
- forEach와 유사하지만 return을 사용할 수 있다.
- 배열에 map을 사용한 return값은 배열로 반환된다.
var result = arr.map(function(element, index) {
return element + " " + "10";
});
console.log(result);문자열 주요 property, method
length: 공백 포함 문자열 글자수 반환trim(): 문자열 앞, 뒤의 공백 모두 제거. 문자열 내부 공백은 제거 안 됨.charAt(index): index번째 글자 1개 가져오기slice(start, end): start번째부터 end 전까지 가져오기. 공백 포함split(): 일정한 규칙으로 문자를 잘라서 배열에 담아 리턴replace(original, new): 변경하고 싶은 단어 original을 new로 바꾸기indexOf(): 특정 단어가 가장 먼저 나오는 위치값 반환. 대소문자 구분. 단어 없으면 -1 반환toUpperCase(): 문자열 모두 대문자로toLowerCase(): 문자열 모두 소문자로
배열 주요 property, method
length: 배열 안 데이터 개수 반환push(): 배열의 마지막에 데이터 추가unshift(): 배열의 처음에 데이터 추가pop(): 배열 마지막부터 하나씩 값 삭제하고 삭제한 값 반환shift(): 배열 앞에서부터 하나씩 값 삭제하고 삭제한 값 반환join()배열의 모든 값 차례대로 가져와서 특정 규칙에 따라 한 문장으로 결합해서 문자열 리턴
var arr1 = ['apple', 'banana', 'watermelon'];
var arr2 = ['laptop', 'mic', 'keyboard'];
var str1 = arr1.join(', ');
console.log(str1); // "apple, banana, watermelon"기준배열.concat(합칠배열): 배열 서로 합치기
실습
1. 버튼 클릭하면 랜덤한 색상코드 생성해 body의 배경색 바꾸고 색상코드 보여주기
1. html 작성
- js파일에서 html 태그를 불러와야 하기 때문에
<script>태그를 불러올 html 아래쪽에 넣어준다.
<body>
<!-- 버튼을 클릭하면 body의 배경색 바뀌고 색상코드 보여주기 -->
<h1>HEX color : <span id="hex"></span></h1>
<button id="btn" type="button">click</button>
<!-- html 태그가 먼저 나오고 js에서 그걸 가져와야 함 -->
<script src="js/main.js"></script>
</body>2. js에서 조작할 태그 객체 불러오기
var hex = document.getElementById('hex');
var btn = document.getElementById('btn');3. 헥사코드 조합해서 작용하는 함수 만들기
- 헥사코드 조합법: #로 시작, 숫자는 0~9, 알파벳은 a ~ f, #제외 총 6자리 조합 -> 조합할 재료 배열에 넣어서 준비
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
var color = '#';- 배열 arr에서 랜덤한 요소 뽑아내는 random 변수 만들기
var random = Math.floor(Math.random() * arr.length);- 6번 반복해서 color 값 만드는 반복문 작성
for (var i = 0; i < 6; i++) {
var random = Math.floor(Math.random() * arr.length);
color += arr[random];
}- 반복문 완료 후 만들어진 color값 html 태그에 적용
hex.textContent = color;
document.body.style.backgroundColor = color;2. 랜덤한 인용문구와 작가 보여주기
- 반복문 안에서 객체 정보에 접근하는 것 외에는 1번 실습과 유사함
3. input 태그 이용해서 받은 입력값 화면에 출력하고 값이 없으면 에러메시지 보여주기
1. form 태그의 submit 기능 사용하기
- html에서 form 태그를 사용하고, 그 안에
type=submit인 버튼을 준비한다. - js 파일에서 form 객체를 불러온 후, addEventListener의 첫 번째 인자로
submit을 작성하면 form 태그 내의submit부분을 알아서 찾아준다. - submit의 경우 작동 완료와 동시에 바로 브라우저를 새로고침 하는 기능을 원래 가지고 있다. 이렇게 원래 태그가 가지고 있는 본연의 기능 제어하고 싶을 때는 두 번째 인자인 콜백함수에 매개변수(이벤트함수)를 추가한 후 (e 등) 이벤트 함수의 내장메소드
preventDefault()를 사용한다.
<form id="form">
<input type="text" id="msg">
<button type="submit" id="btn">입력</button>
</form>var form = document.getElementById('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
});2. input으로 받은 메시지 종류에 따른 분기처리
- 메시지가 있는 경우, 없는 경우로 나누기: 빈 문자열은 false로 처리되는 특성을 이용해 if로 경우의 수를 나눈다.
if(msg) {
// 텍스트 있음
} else {
// 빈 텍스트
}- 텍스트가 있는 경우: 텍스트를 표시해준 후
form.reset()으로 form 안 모든 input 태그를 초기화한다.
if(msg) {
txt.textContent = msg;
form.reset();
}else {
// 빈 텍스트
}- 빈 텍스트인 경우: 경고문이 보이게 css클래스를 추가했다가 1초 후 다시 클래스를 삭제해서 보이지 않게 한다.
setTimeout(callback(), mili-second): 1000ms = 1sec
if(msg) {
// 텍스트 있음
} else {
// 태그에 클래스 추가
feedback.classList.add('show');
// 1초 후 show 클래스 삭제
setTimeout(function() {
feedback.classList.remove('show');
}, 1000);
}4. prev, next 버튼 누르면 이전, 다음 이미지 보여주기
1. btn 클래스를 가진 모든 객체 가져오기
document.querySelectorAll('.btn'): css 선택자 그대로 작성해서 객체를 가져올 수 있다.- 가져온 객체 전부에 클릭이벤트를 적용하기 위해 forEach 사용
document.querySelectorAll('.btn').forEach (function(element, index){
element.addEventListener('click', function(e){
});
});2. 가져온 버튼이 prev인지 next인지 알아내기
e.target: 마우스로 클릭한 개체를 가져온다.classList: html태그의 클래스 목록을 가져온다.contains(): 특정 요소가 포함되어 있는지 여부 boolean으로 반환
if(e.target.classList.contains('btn-prev')) {
// 선택한 개체가 btn-prev 클래스를 가지고 있다.
}
if(e.target.classList.contains('btn-next')) {
// 선택한 개체가 btn-next 클래스를 가지고 있다.
}3. 경우에 따라 현재 페이지 조절하기
- 이미지 파일 경로, 제목, 설명 정보를 가진 객체들을 배열로 저장해두었다.
// 이미지 파일경로, title, description 들어가는 배열
var arr = [
{
img: 'img/img-1.jpg',
name: "nature 1",
txt: 'nature description 1'
},
{
img: 'img/img-2.jpg',
name: "nature 2",
txt: 'nature description 2'
},
{
img: 'img/img-3.jpg',
name: "nature 3",
txt: 'nature description 3'
}
]- 객체에 접근할 인덱스를 저장하는 변수를 하나 만든다.
var i = 0;- 이전, 다음 경우에 따라 인덱스값을 조정해준다.
if(e.target.classList.contains('btn-prev')) {
// 이전 버튼 누르다가 0번째에 도달하면 가장 뒤로 보내준다.
if(i === 0) {
i = arr.length;
}
i--;
}
if(e.target.classList.contains('btn-next')) {
// 다음 버튼 누르다가 마지막에 도달하면 가장 앞으로 보내준다.
if(i === arr.length - 1) {
i = -1;
}
i++;
}- 이렇게 완성된 현재 인덱스를 가지고 html요소에 필요한 값을 넣어준다.
// if 조건문을 통해 i를 결정하고 난 후
document.getElementById('img').src = arr[i].img;
document.getElementById('name').textContent = arr[i].name;
document.getElementById('txt').textContent = arr[i].txt;추가 연습
1. 상단 nav 메뉴 클릭하면 css 클래스 바꿔서 active 효과 주기
- 클래스 삽입 및 삭제할 html태그들 전부 가져오기
var btnList = document.querySelectorAll('#esport-nav .center li a');- 선택된 html태그 전부에 addEventListener 적용
- forEach를 사용해봤으니 이번엔 for문 사용해보았다
for(var i = 0; i < btnList.length; i++) {
console.log(btnList[i]);
btnList[i].addEventListener("click", function(e) {
e.preventDefault();
});
};- 먼저 기존에
class=on을 가진 태그를 찾아 클래스를 없애준다.
var current = document.querySelectorAll(str_btnList + '.' + className);
current[0].className = current[0].className.replace(className, '');- 현재 선택된 태그에 on 클래스를 적용해준다.
e.target.className += (' ' + className);2. 1번 기능을 함수로 만들어 다른 곳에도 적용해보기
- nav 메뉴들 중 저렇게 클릭하면 css 속성이 바뀌게 하고 싶은 부분이 많을 것 같아서 버튼 리스트와 클래스명(대부분 on으로 작성했으나 가끔 active가 있을 것을 고려함)을 받아 효과를 적용하는 함수로 만들었다.
var navActive = [
{
str_btnList: '#esport-nav .center li a',
className: 'on'
},
{
str_btnList: '#ent-header .ent-header-center li a',
className: 'on'
}
];
navActive.forEach(function(element, index) {
activeButton(element.str_btnList, element.className);
});어려웠던 점
- 문자열의 메소드 중 trim()을 시도했는데 아무런 변화가 없었다.
- 네이버 nav에 active 효과를 적용할 때, 처음에는 on클래스를 현재 태그에 추가하는 것은 쉬웠지만 다른 버튼에 적용된 on클래스를 삭제해 주어야 하는 것이 어려웠다.
해결방법
- 처음엔 trim()을 그저 공백을 전부 제거하는 메소드로 이해해서 왜 변화가 없는지 알 수 없었다. 추가로 검색해보니 문자열 앞뒤의 공백만 제거하는 기능이라는 것을 알게 되었다.
- 비슷한 사례를 검색해보고 해결했다. 처음에 나는 현재 태그를 수정함과 동시에 다른 모든 태그들을 수정해야 될 줄 알았는데, 그냥 기존에 on클래스를 가진 태그가 있다면(주로 1개) 매번 삭제해주면 모든 태그를 수정할 필요가 없는 것이었다.
소감
드디어 html에 자바스크립트를 사용하기 시작했다. 이전 시간에 다루었다고 하는데 나는 생소한 걸 보니 어제 너무 띄엄띄엄 들었나보다ㅠ 그래도 내가 실습했던 네이버 페이지에 js 효과를 추가한 게 성공해서 기분이 좋다.
문서화를 좋아하는 개발자