자바스크립트는 사용자와 상호작용을 하는 언어이다
<script> 태그 안쪽에 오는 것이 자바스크립트
버튼 <input type="button" value="hi">
버튼 눌렀을 때 경고창 뜨게 onclick="alert('hi')"
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
야간모드 설정 코딩 / c는 대문자로!!
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">
day 모드 설정 코딩
(1===1)을 보았을때 === 는 비교연산자이고, 1 두개는 좌항 우항으로 나뉘는 이항 연산자이다 / true 또는 false(Boolean 불리언)이라는 결과를 만들어냄
<script>
document.write("1<br>");
if (true){
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");
</script>
true라면, 바로 아래 코드가 실행된 후 3<br은 무시한 채 4< br출력
false라면, 바로 아래 코드가 무시된 후 3<br 출력 후 4<br출력
<input id="night_day" type="button" value="night"#night_day").value === 'night '){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
}
">
이 조건문은 night라면 아래의 값이 출력되고 그것이 아니라면 day모드가 출력된다
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
}
">
이런식으로 this, target을 통해 중복을 없애줄 수 있음
while(ture){
document.write('<li>2</li>');
document.write('<li>3</li>');
}
false가 될때까지 아래의 것을 반복한다
while은 반복문
반복문을 카운트하기 위해 i변수를 사용함 / var i = 0; 코드사용 / i = i + 1; 을 통해 카운트
document.write('<li>1</li>');
var i = 0;
while(i < 3){
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i + 1;
}
document.write('<li>4</li>');
<script>
var coworkers = ['egoing', 'leezche', 'duru', 'taeho', 'graphittie'];
</script>
<h2>Co workers</h2>
<ul>
<script>
var i = 0
while (i < coworkers.length) {
document.write('<li>'+coworkers[i]+'</li>');
i = i + 1;
}
</script>
위 코드를 통해 배열과 반복문을 사용 가능
연속되지 않는 반복은 함수를 통해 해결한다
<script>
function two(){
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>');
two();
document.write('<li>3</li>');
two();
</script>
를 사용하면
1
2-1
2-2
3
2-1
2-2
가 출력된다
<script>
function sum2(left, right){
return left+right;
}
document.write(sum2(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+'</div>');
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');
</script>
함수를 다양한 용도로 활용하기 위해 return을 사용한다
객체는 연관있는 함수, 변수를 정리해주는 폴더같은 역할 (객체에 속하는 함수 = 메소드)
객체는 중괄호 {} / 배열은 대괄호 []
정보를 순서대로 저장 = 배열 / 순서 없이 저장 = 객체
<script>
var coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
document.write("programmer : "+coworkers.programmer+"<br>");
document.write("designer : "+coworkers.designer+"<br>");
coworkers.bookkeeper = "duru";
document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
coworkers["data scientist"] = "taeho";
document.write("data scientist : "+coworkers["data scientist"]+"<br>");
</script>
위와 같이 "이고잉" "리체"를 꺼내올 수 있으며, coworkers.bookkeeper = "duru";를 통해 "두루"를 추가할 수 있음
coworkers["data scientist"] = "taeho"; 같이 띄어쓰기 필요한 경우 대괄호를 통해 추가할 수 있음
</script>
<h2>Iterate</h2>
<script>
for(var key in coworkers) {
document.write(key+' : '+coworkers[key]+'<br>');
}
</script>
을 통해 한번에 가져올 수 있음 / key는 29강 메모 기준 programmer, designer 등등
코드가 많아지면 함수로 정리정돈, 함수가 많아지면 객체로 정리정돈
javascript도 css처럼 OO.js 파일에 따로 코드들 보관하여 <script src="OO.js"></script>를 통해 적용 가능
" ' 기능은 같지만 문자열 안에 인용구와 같은 표현을 할 때 구분해서 사용한다 큰 따옴표 안에 큰 따옴표를 삽입하면 문자열의 끝으로 인식하여 에러가 발생한다 백슬래시를 사용하여 문자 그 자체를 의미하게 할 수도 있지만 문자열이 지저분해지므로 특별한 경우가 아니라면 다음 중 1번의 방법으로 많이 사용한다
1. console.log('팀장님이 나에게 "일을 해"라고 하였다.');
2. console.log("팀장님이 나에게 \"일을 해\"라고 하였다.");
개발 공부