-Core : 언어가 가지는 기본 문법
1) 자료형 : Number(정수 + 실수), String('', "", ``), Boolean(참-1, 거짓-0), Object([], {}, HTMLObject), 함수, Symbol
2) 변수 선언 : var, let(지역변수, 전역변수), const(상수화) ==> 모호함;;
(Typescript 시간되면 꼭 공부해보기)
3) 연산자
: 산술연산자
: 비교연산자
: 논리연산자
: 삼항연산자
: 단항연산자 typeof
: 기타 : . [] ()
: (복합)대입연산자 = += -= *=
4) 조건문, 반복문
5) 함수(function)
6) 배열
: 여러 개의 데이터를 하나로 처리할 때 사용 []
: 인덱스를 이용해 접근 가능
: 하나의 타입만 들어가는 것은 아님, 아래와 같이 넣을 수 있다. 물론 저렇게 사용하지 않음.
let ary = [10, 11, 34.5, "홍길동", [5, 10, 15]];
7) { } Object -JSON
-DOM : 자바스크립트에서 HTML에 접근하는 문법
1) 리턴타입(HTMLObject) document.getElementById(" ")
2) HTMLObject로부터 얻을 수 있는 정보
-innerHTML : 시작과 끝 태그 사이의 값(R/W 모두 가능) -> 문자열
-value : 반드시 input 태그의 value값(R/W 모두 가능) -> 문자열
3)
(코어문법) isNaN("문자열") : numberic 데이터가 아닌 값이 포함되어 있는지 여부 체크
trim("문자열") : 문자열의 맨앞, 맨뒤에 포함된 공백 제거
문자열.length : 속성(R)만 가능, 문자열의 길이를 측정
HTMLObject.focus() : input태그로 포커싱을 맞추는 함수
HTMLObject.select() : input태그 내의 문자열을 선택하고 포커싱을 맞추는 함수
-BOM : JS로 브라우즈 객체에 접근하는 문법
<함수 호출하는 방법 2가지>
더보기
btn.onclick = function() {
myfunction();
}
start.onclick = timer;
push, pop
꺼내면 사라짐
더보기
mycar.push('버스'); //마지막에 데이터를 추가!
console.log(mycar);
//stack처럼 동작 push <--> pop
console.log(mycar.pop());
console.log(mycar);
출력값
버스
['자동차', '트럭']
<concat>
더보기
//배열이 여러개일때 합치기
let food = ['채소', '소고기', '생선'];
let drink = ['웰치스', '콜라', '사이다'];
let all = food.concat(drink);
console.log(all);
출력값
['채소', '소고기', '생선', '웰치스', '콜라', '사이다']
<setAttribute로 속성값 변경시키기!>
더보기
let btn = document.getElementById("btn");
btn.onclick= function(){
tag.innerHTML = "네이트";
tag.setAttribute("tilte", "네이트로 이동합니다."); //전달인자 2개 필요
}
<image src setattribute setInterval>
더보기
<script>
window.onload = function(){
let myimg = ["apple.png", "grape.png", "orange.png", "lemon.png", "strawberry.png"];
let image = document.getElementById("image");
setInterval(function(){
let position = Math.floor(Math.random() * myimg.length); //0부터 5까지 위치를 랜덤하게 선택
let path = "../images/" + myimg[position];
image.setAttribute("src", path);
}, 1000)
};
</script>
</head>
<body>
<div id="content">
<h1>[이미지 바꾸기]</h1>
<img id="image" src="../images/lemon.png" alt="과일">
</div>
JSON
: 키에 해당하는 부분에 ""를 넣음. 특별한 객체, 자바스크립트로 만들어진 json
: 통신용 데이터타입으로 사용
: let obj2 = {"name" : '임재범', "age": 30, "phone" : '010-2222-3333'};
'{"name" : '임재범', "age": 30, "phone" : '010-2222-3333'}' : ''이 있으면 문자열이기 때문에 값을 얻어오기가 어렵다.
{"name" : '임재범', "age": 30, "phone" : '010-2222-3333'}이 JSON ==> 데이터를 얻기가 쉽다.
<복습하면 좋을 코드>
window.onload = function(){
let receiveData = [
{"name" : "손오공", "age" : 25},
{"name" : "사오정", "age" : 31},
{"name" : "저팔계", "age" : 29}
];
//위의 데이터를 분해해서 값을 target위에 출력하기
let btn = document.getElementById("btn");
let output = '';
btn.onclick = function(){
for(let i in receiveData){
let name = receiveData[i]["name"];
let age = receiveData[i]["age"];
output += `${i+1}번 = 이름 : ${name}, 나이 : ${age} <br>`;
}
document.getElementById("target").innerHTML = output;
}
}
</script>
</head>
<body>
<input type="button" id= "btn" value="분해">
<div id="target"></div>
</body>