HTML: 웹페이지 내용을 구성
CSS: 레이아웃과 디자인을 설정
Javascript: 사용자 이벤트 처리 및 동적 화면 구성
javascript 삽입
external: js파일 삽입하기
<script src="Script.js"></script>
head 안 script 태그 안에 적기
<head>
<script>
/*여기에 작성
script가 head안 말고 body 안에 있어도 작동됨
하지만 보통 head안에 많이 적음
*/
</script>
</head태그 안에 적기(주로 이벤트를 태그 안에 많이 적음)
<p onclick="window.alert('hello');">hello</p>출력
HTML element(tag, id, class)안에 적기: innerHTML
HTML output으로 출력: document.write()
alert로 적기: window.alert()
console에 적기: console.log()
HTML element에 접근하기
id로 접근: document.getElementById(id)
<script>
window.alert('hello');
console.log('stop');
document.write('haha');
document.getElementById("demo").innerHTML = 5 + 6;
</script>Statements(programming instruction)
변수: 구분없이 모두 var 사용
statements 구분할때 semicolons 사용
자바스크립트 함수:
function myFunction() {
/*여기에 내용*/
}
function myFunction(a) { //파라미터 쓸때는 변수 이름만 적으면 됨
/*여기에 내용*/
}break, continue, do...while, for, if..else, return, switch, try ... catch 모두 자바와 똑같이 사용 가능
fuction: 함수 선언할때 사용
var: 변수 선언할때 사용
debugger: 실행중인 자바스크립트를 멈추고 debuggin function을 부를때 사용(debugging function 부르는 것은 사용 가능할 때만 가능)
Syntax, data type
string 끼리 덧셈 가능
string과 숫자도 덧셈 가능(숫자를 string 취급해서 더한다)
ex)
5 + 2 + "7" = "77"
"7" + 2 + 5 = "725"
string끼리 뺄셈, 곱셈은 숫자 취급해서 계산
계산하기에 너무 큰 수는 Infinity, 계산이 안되거나 숫자가 아닌 string을 계산하라고 할 때는 NaN으로 뜸
string은 ""이나 '' 둘 다 사용 가능
변수는 대문자 소문자 구분됨
변수이름은 - , _ , 대문자, 소문자 사용 가능
자바스크립트는 unicode characterset 사용
연산자는 +, -, *, (xy -> x의 y제곱), /(정수끼리 나눠도 나누어 떨어지지 않으면 실수로 표시됨), %(나머지), ++, -- 모두 사용 가능
+= 같은 식으로 사용 가능
boolean(true나 false를 가질 수 있는 타입)사용 가능
배열 사용 가능 ({}로 선언함)
객체 사용 가능 ([]로 선언함)
typeof: 변수의 타입 알려줌
자바스크립트로 처음 변수 선언할때 타입: undefined
변수 타입을 undefined로 하면 타입이 정해지지 않은 undefined가 되지만 null로 하면 타입은 남은 상태로 내용만 모두 삭제되게 됨
this: 현재 object
//boolean
(x == y) // Returns true
(x == z) // Returns false
//array
var cars = ["Saab", "Volvo", "BMW"];
//objects
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
var name = objectName.propertyName;
var name2 = objectName["propertyName"];
var x = new String(); // Declares x as a String object
var y = new Number(); // Declares y as a Number object
var z = new Boolean(); // Declares z as a Boolean object
//typeof
typeof "" // Returns "string"
typeof "hello" // Returns "string"
typeof 0 // Returns "number"
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
주석
/*
길게 주석 쓸때는
이거 사용하면 됨
*/
//짧게 쓸 때는 이거Event
onchange: HTML 요소가 바뀌었을때
onclick: HTML 요소를 클릭했을때
onmouseover: 마우스를 HTML 요소 위로 올렸을 때
onmouseout: 마우스를 HTML 요소 밖으로 옮겼을 때
onkeydown : 키보드 키를 눌렀을 때
onload : 브라우저가 페이지를 모두 불러왔을 때
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
String
length: txt의 길이
문자열 검색
indexOf(찾을 단어),search(찾을 단어): 단어가 있다면 시작점의 index를 return, 없다면 -1을 return
indexOf(찾을 단어, 시작 index): index부터 끝까지 중 단어가 있으면 시작점의 index return, 없으면 -1 return
lastIndexOf(찾을 단어): 마지막 world의 시작점의 index를 return, 없다면 -1을 return
문자열 추출
slice(start, end): start부터 end 앞까지 잘라서 return
slice(start): start부터 끝까지 잘라서 return
substring(start, end): start부터 end 앞까지 잘라서 return
substr(start, length):start부터 length만큼 잘라서 return
문자열 교체
replace(바꿀 문자열, 바꾼 문자열) : 바꿀 문자열을 찾아서 가장 첫번째 것을 바꾼 문자열로 바꾸고 return
대문자, 소문자로 바꿈
toUpperCase(): 대문자로 바꾸고 return
toLowerCase(): 대문자로 바꾸고 return
concat()
concat(문자열1, 문자열2); : 문자열과 문자열1, 문자열2를 합쳐서 return
trim()
trim(): 문자열 앞 뒤의 공백을 없애줌
split()
split(문자): 문자로 나눈 뒤에 배열로 return
var txt = "hello world and world";
var sln = txt.length; //txt의 길이
var num1 = txt.indexOf("world"); //txt에서 world가 들어있으므로 첫번째 world의 시작점의 index를 return
var num2 = txt.indexOf("world", 12), // 12번째 index 부터 찾으므로 txt에서 두번째 world의 시작점의 index를 return
var num3 = txt.indexOf("read"); // txt에 read가 없으므로 -1 return
var num4 = txt.lastIndexOf("world"); //txt 마지막 world의 시작점의 index를 return
var str1 = txt.slice(6,11); //6번째 인덱스부터 10번째 인덱스까지 잘라서 return
var str2 = txt.substring(6,11); //6번째 인덱스부터 10번째 인덱스까지 잘라서 return
var str3 = txt.substr(6, 5); //6번째 인덱스부터 10번째 인덱스까지 잘라서 return
var txt2 = txt.replace("world", "hello"); //첫번째 world를 hello로 바꾸고 return
var txt3 = txt.concat(" ", ", hello!!"); //txt와 " "와 ", hello!!"를 합쳐서 return
var array = txt.split(" ");//공백으로 나누어서 배열에 저장
var x = "hello \"world\"!!";
//\",\',\\ : escape 문자 ->",',\를 나타냄
/*
\b Backspace
\f Form Feed
\n New Line(엔터)
\r Carriage Return
\t Horizontal Tabulator(탭)
\v Vertical Tabulator
*/
var x = "John";
var y = new String("John");
var z = new String("John");
(x == y) //:true -> x,y 값이 같기 때문
(x === y) //:false -> x,y 타입이 다르기 때문
(x == y) //:false -> 다른 객체이므로
(x === y) //:false -> 다른 객체이므로
//-> 객체와 문자열은 비교가 가능하지만 객체끼리는 비교할 수 없음Numbers
toString(num): num 진수로 바꾸어서 string으로 바꿈
toExponential(): exponential notation을 사용해 적어서 string으로 return
toFixed(num): 소수점 num 자리에서 반올림
toPrecision(num); 전체 숫자의 갯수가 num개
var myNumber = 32;
myNumber.toString(10); // returns 32
myNumber.toString(32); // returns 10
myNumber.toString(16); // returns 20
myNumber.toString(8); // returns 40
myNumber.toString(2); // returns 100000
myNumber.toString(); //return "32"
var x = 9.656;
x.toExponential(2); // returns 9.66e+0
x.toExponential(4); // returns 9.6560e+0
x.toExponential(6); // returns 9.656000e+0
x.toFixed(0); // returns 10
x.toFixed(2); // returns 9.66
x.toFixed(4); // returns 9.6560
x.toFixed(6); // returns 9.656000
x.toPrecision(); // returns 9.656
x.toPrecision(2); // returns 9.7
x.toPrecision(4); // returns 9.656
x.toPrecision(6); // returns 9.65600
var x = 500;
var y = new Number(500);
var z = new Number(500);
(x == y) //:true -> x,y 값이 같기 때문
(x === y) //:false -> x,y 타입이 다르기 때문
(x == y) //:false -> 다른 객체이므로
(x === y) //:false -> 다른 객체이므로
//-> 객체와 숫자는 비교가 가능하지만 객체끼리는 비교할 수 없음Arrays
push(str): 배열 마지막에 str 추가
unshift(str): 배열 처음에 str 추가
pop(): 배열의 마지막 것을 삭제
shift(): 배열의 첫번째 것 삭제
length: 배열의 길이
toString(): 배열을 문자열로 바꾸어서 return(,로 구분)
join(char): 배열을 문자열로 바꾸어서 return(char로 구분)
splice(add할 위치, remove, add할 것): add할 위치에 remove 숫자 만큼 삭제하고 add할 것을 추가
slice(num); index가 num 인 것 삭제
concat(array): 배열에 array를 합침
sort: 오름차순 정렬
reverse: 거꾸로 하기
<html>
<head>
<script>
var name = ["Sara", "James", "Mary"];
document.getElementById("demo").innerHTML = name[0];
name.push("John"); //name = ["Sara", "James", "Mary", "John"];
name[name.length] = "Lemon"; //name = ["Sara", "James", "Mary", "John", "Lemon"];
var x =
name.length; // person.length will return 5
document.getElementById("demo").innerHTML = name.toString(); //결과: Sara,James,Mary,John,Lemon
document.getElementById("demo").innerHTML = name.join(" * "); //결과: Sara*James*Mary*John*Lemon
name.pop(); //name = ["Sara", "James", "Mary", "John"];
name.shift(); // name = ["James", "Mary", "John"];
name.unshift("Sara"); //name = ["Sara", "James", "Mary", "John"];
name[0] = "lilly"; //name = ["lilly", "James", "Mary", "John"];
delete name[0]; //name = [undefined, "James", "Mary", "John"];
name.splice(2, 1, "Marin", "Luna"); //name = [undefined, "James", "Marin", "Luna", "John"];
var name2= ["Nora", "Betty"];
name.concat(name2); //name = [undefined, "James", "Marin", "Luna", "John", "Nora", "Betty"];
name.slice(0); //name = ["James", "Marin", "Luna", "John", "Nora", "Betty"];
name.sort(); //Betty,James,John,Luna,Marin,Nora
name.reverse(); //Nora,Marin,Luna,John,James,Betty
</script>
</head>
<body>
<p id="demo"></p>
</body>
</html>sort
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); //1,5,10,25,40,100
points.sort(function(a, b){return b - a}); //100,40,25,10,5,1
points.sort(function(a, b){return 0.5 - Math.random()}); //랜덤한 순서로 바뀜
