0820 개발일지

38200 단어 JavaScript대구AI스쿨JavaScript

학습내용

반복문, 문자열과 배열의 property와 methods
html에 javascript 적용하는 간단한 실습

github js-ex-1 ~ js-ex-4, naver-ex 안 js파일까지
github커밋-js연습

github커밋-naver-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. 헥사코드 조합해서 작용하는 함수 만들기

  1. 헥사코드 조합법: #로 시작, 숫자는 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 = '#';
  1. 배열 arr에서 랜덤한 요소 뽑아내는 random 변수 만들기
var random = Math.floor(Math.random() * arr.length);
  1. 6번 반복해서 color 값 만드는 반복문 작성
for (var i = 0; i < 6; i++) {
  var random = Math.floor(Math.random() * arr.length);
  color += arr[random];
}
  1. 반복문 완료 후 만들어진 color값 html 태그에 적용
hex.textContent = color;
document.body.style.backgroundColor = color;

2. 랜덤한 인용문구와 작가 보여주기

  • 반복문 안에서 객체 정보에 접근하는 것 외에는 1번 실습과 유사함

3. input 태그 이용해서 받은 입력값 화면에 출력하고 값이 없으면 에러메시지 보여주기

1. form 태그의 submit 기능 사용하기

  1. html에서 form 태그를 사용하고, 그 안에 type=submit인 버튼을 준비한다.
  2. js 파일에서 form 객체를 불러온 후, addEventListener의 첫 번째 인자로 submit을 작성하면 form 태그 내의 submit부분을 알아서 찾아준다.
  3. 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으로 받은 메시지 종류에 따른 분기처리

  1. 메시지가 있는 경우, 없는 경우로 나누기: 빈 문자열은 false로 처리되는 특성을 이용해 if로 경우의 수를 나눈다.
if(msg) {
  // 텍스트 있음
} else {
  // 빈 텍스트
}
  1. 텍스트가 있는 경우: 텍스트를 표시해준 후 form.reset()으로 form 안 모든 input 태그를 초기화한다.
if(msg) {
  txt.textContent = msg;
  form.reset();
}else {
  // 빈 텍스트
}
  1. 빈 텍스트인 경우: 경고문이 보이게 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. 경우에 따라 현재 페이지 조절하기

  1. 이미지 파일 경로, 제목, 설명 정보를 가진 객체들을 배열로 저장해두었다.
// 이미지 파일경로, 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'
    }
]
  1. 객체에 접근할 인덱스를 저장하는 변수를 하나 만든다.
var i = 0;
  1. 이전, 다음 경우에 따라 인덱스값을 조정해준다.
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++;
}
  1. 이렇게 완성된 현재 인덱스를 가지고 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 효과 주기

  1. 클래스 삽입 및 삭제할 html태그들 전부 가져오기
var btnList = document.querySelectorAll('#esport-nav .center li a');
  1. 선택된 html태그 전부에 addEventListener 적용
  • forEach를 사용해봤으니 이번엔 for문 사용해보았다
for(var i = 0; i < btnList.length; i++) {
  console.log(btnList[i]);

  btnList[i].addEventListener("click", function(e) {
    e.preventDefault();

  });
};
  1. 먼저 기존에 class=on을 가진 태그를 찾아 클래스를 없애준다.
var current = document.querySelectorAll(str_btnList + '.' + className);
current[0].className = current[0].className.replace(className, '');
  1. 현재 선택된 태그에 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);
});

어려웠던 점

  1. 문자열의 메소드 중 trim()을 시도했는데 아무런 변화가 없었다.
  2. 네이버 nav에 active 효과를 적용할 때, 처음에는 on클래스를 현재 태그에 추가하는 것은 쉬웠지만 다른 버튼에 적용된 on클래스를 삭제해 주어야 하는 것이 어려웠다.

해결방법

  1. 처음엔 trim()을 그저 공백을 전부 제거하는 메소드로 이해해서 왜 변화가 없는지 알 수 없었다. 추가로 검색해보니 문자열 앞뒤의 공백만 제거하는 기능이라는 것을 알게 되었다.
  2. 비슷한 사례를 검색해보고 해결했다. 처음에 나는 현재 태그를 수정함과 동시에 다른 모든 태그들을 수정해야 될 줄 알았는데, 그냥 기존에 on클래스를 가진 태그가 있다면(주로 1개) 매번 삭제해주면 모든 태그를 수정할 필요가 없는 것이었다.

소감

드디어 html에 자바스크립트를 사용하기 시작했다. 이전 시간에 다루었다고 하는데 나는 생소한 걸 보니 어제 너무 띄엄띄엄 들었나보다ㅠ 그래도 내가 실습했던 네이버 페이지에 js 효과를 추가한 게 성공해서 기분이 좋다.

http 프로토콜 헤더 정보와 본문
PyQt5에서 셀에 컨트롤 추가

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage