html:5 로 기초 뼈대 자동불러오기
내장형으로 쓰는법
< body onload(이벤트) = "alert('내장형')"> < /body>
외장형으로 쓰는법
head 안에서 출력하기 ( head 밑에 < script>< /script>)
파일 가져오는법
title밑
< script src = "javaScript.js"> < /script>
변수 선언 3 종류
var 중복선언 가능, 공통작업 에서는 사용하면 안됨), 같은 변수에게는 처음 한번만 선언
let 중복 불가능, 카멜케이스로 변수명 지어야함
const 중복 불가능, 변수 값 변경 불가능, 변수명 모두 대문자로 작성해야함, 상수라고 부름
< style> 에서 한줄 주석은 없음(//)
/ 전체주석만 사용가능/
console 객체의 메서드
log() 매개변수로 전달된 값을 출력
dir(object) 매개변수로 전달된 객체의 속성 출력
time() 시간측정 출력
timeEnd() 시간측정 종료
head 안에서 출력하기
document.write(변수);
alert 알림 띄우기
alert(변수);
객체를 {}로 사용
값변경 person.변수 = 변경할 값;
변수타입 선언 안하면 전역변수
undefined 자료형이 뭔지 정의되지 않은것
정수와 실수를 number라고 함
객체형 null, {}
document.write(10/4); //연산
let num1 = 10;
let num2 = 20;
document.write(num1 + num2);
document.write("가나다라" + "마바사");
테이블만들기
< th> 표의 제목, 기본값 = 굵은 글씨체에, 중앙정렬
< tr> 행(가로), 기본값 = 왼쪽정렬
< td> 열(세로), 기본값 = 왼쪽정렬
(< thead> < tr> < th> < /th> < /tr> < /thead>
< tbody> < tr> < td> < /td> < /tr> < /tbody>)
rowspan: 열을 합치는 개수 지정
width: 너비지정
height: 높이지정
cellpadding: 셀과 경계선 사이의 여백
cellspacing: 셀과 셀 사이의 여백
align: 셀의 가로줄을right,left,center 등으로 정렬
valign: 셀의 세로줄을 top, middle, bottom 등으로 정렬
bgcolor: 테이블 색상
bordercolor: 테두리 색상
tdody: 하나의 그룹으로 묶을때 사용 thead, tfoot와 함께 사용됨
테이블도 header와 body를 나눠주는게 보기 편하다
테이블 제목에만 색넣기
document.write("< th bgcolor='gray'>1< /th>);
alert(0); //false (0은 false가 기본값)
alert(!0); //true (0이 아닌 모든것은 true)
alert(5); //true
alert(!5); //false
alert(!!5); //true
prompt 사용자입력(요즘은 안씀, css를 적용시키지 못함)
var result = prompt("이름을 입력하세요", "여기입력"); // (notice, 사용자입력칸)
alert(result+"이름");
typeof 타입확인
alert(typeof('ㅎㅎ')); -> String type을 알려줌
Number 문자형을 숫자로 바꿔줌( 문자형숫자에 숫자 외의 문자가 들어있으면 출력안됨 NaN)
alert(Number(변수) + Number(변수));
parseInt/parseFloat 문자를 숫자로 바꿔줌(숫자외의 문자가 들어있어도 출력됨)
alert(parseInt(변수) + parseInt(변수));
.length 길이출력
body 안에서 출력하기
console.log(내용);
console.dir(object); js객체의 속성들을 출력
console.time(id); 실행시간을 측정하기 위한 시작시간을 기록
console.timeEnd(id); 실행시간ㅇ르 측정하기위한 끝 시간을 기록
브라우저에서 F12 -> console에 표시됨
연결하기
ddd.js 파일 만들기
body 밑에 < script src = "ddd.js> < /script>
// 주석
/ ** / 시작 끝 전체주석
변수를 선언할때는 기본으로 const를 쓰도록
진짜 필요할 때만 let
str == 0 : true
== "": 아무것도 없으면 전송안함
math객체
calculator.plus(숫자);
Document Object Model의 약자.
자바스크립트에서 html을 객체로 바꾸어서 변경할 수 있다.
console.log(title)
-> 맨밑의 title은 head에 해당되는 title
자바스크립트는 html과 css를 바꾸는 기능을 하지만 이벤트에 반응하기 위해 만들어졌다.
이벤트란? 웹사이트에서 발생하는 것들을 말한다.
click,resize,submit,input, change, load, before, closing, printing 같은 것들
addEventListener구문
target.addEventListener(type, listener);
예제)
function handleResize(){
console.log("I have been resized")}
resize
window.addEventListener("resize", handleResize);
handleResize 를 할 때 , 뒤에 ()를 붙이지 않는다. ()는 함수를 자동즉시 호출
); 는 내가필요한 시점에 함수를 호출하는 것
const title = document.getElementById("title"); //html에 ID 타이틀을 찾아
title.innerHTML = "Hi from JS"; //title이 가진 내용을 바꿔
function handClick(){ //함수생성
title.style.color = "yellow"; //타이틀의 색상을 노란색으로
}
title.addEventListener("click", handClick); //타이틀을 클릭했을때 함수안에 내용이 실행된다.
Date
new Date() 현재날짜와 시간
.getFullYear()
세션
서버에 저장하는 데이터
컴퓨터의 브라우저별로 식별
쿠키
클라이언트에 저장하는 사용자정보
