반복문, 문자열과 배열의 property와 methods
html에 javascript 적용하는 간단한 실습
github js-ex-1 ~ js-ex-4, naver-ex 안 js파일까지
github커밋-js연습
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]);
}
callback 함수
(익명함수, 콜백함수): 특정 조건이 만족되면 호출되는 함수. 함수 이름 없음arr.forEach(function(element, index) {
console.log(element);
console.log(index);
});
var result = arr.map(function(element, index) {
return element + " " + "10";
});
console.log(result);
length
: 공백 포함 문자열 글자수 반환trim()
: 문자열 앞, 뒤의 공백 모두 제거. 문자열 내부 공백은 제거 안 됨.charAt(index)
: index번째 글자 1개 가져오기slice(start, end)
: start번째부터 end 전까지 가져오기. 공백 포함split()
: 일정한 규칙으로 문자를 잘라서 배열에 담아 리턴replace(original, new)
: 변경하고 싶은 단어 original을 new로 바꾸기indexOf()
: 특정 단어가 가장 먼저 나오는 위치값 반환. 대소문자 구분. 단어 없으면 -1 반환toUpperCase()
: 문자열 모두 대문자로toLowerCase()
: 문자열 모두 소문자로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(합칠배열)
: 배열 서로 합치기<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>
var hex = document.getElementById('hex');
var btn = document.getElementById('btn');
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
var color = '#';
var random = Math.floor(Math.random() * arr.length);
for (var i = 0; i < 6; i++) {
var random = Math.floor(Math.random() * arr.length);
color += arr[random];
}
hex.textContent = color;
document.body.style.backgroundColor = color;
type=submit
인 버튼을 준비한다.submit
을 작성하면 form 태그 내의 submit
부분을 알아서 찾아준다.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();
});
if(msg) {
// 텍스트 있음
} else {
// 빈 텍스트
}
form.reset()
으로 form 안 모든 input 태그를 초기화한다.if(msg) {
txt.textContent = msg;
form.reset();
}else {
// 빈 텍스트
}
setTimeout(callback(), mili-second)
: 1000ms = 1secif(msg) {
// 텍스트 있음
} else {
// 태그에 클래스 추가
feedback.classList.add('show');
// 1초 후 show 클래스 삭제
setTimeout(function() {
feedback.classList.remove('show');
}, 1000);
}
document.querySelectorAll('.btn')
: css 선택자 그대로 작성해서 객체를 가져올 수 있다.document.querySelectorAll('.btn').forEach (function(element, index){
element.addEventListener('click', function(e){
});
});
e.target
: 마우스로 클릭한 개체를 가져온다.classList
: html태그의 클래스 목록을 가져온다.contains()
: 특정 요소가 포함되어 있는지 여부 boolean으로 반환if(e.target.classList.contains('btn-prev')) {
// 선택한 개체가 btn-prev 클래스를 가지고 있다.
}
if(e.target.classList.contains('btn-next')) {
// 선택한 개체가 btn-next 클래스를 가지고 있다.
}
// 이미지 파일경로, 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++;
}
// if 조건문을 통해 i를 결정하고 난 후
document.getElementById('img').src = arr[i].img;
document.getElementById('name').textContent = arr[i].name;
document.getElementById('txt').textContent = arr[i].txt;
var btnList = document.querySelectorAll('#esport-nav .center li a');
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, '');
e.target.className += (' ' + className);
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);
});
드디어 html에 자바스크립트를 사용하기 시작했다. 이전 시간에 다루었다고 하는데 나는 생소한 걸 보니 어제 너무 띄엄띄엄 들었나보다ㅠ 그래도 내가 실습했던 네이버 페이지에 js 효과를 추가한 게 성공해서 기분이 좋다.