개발자로 가는 길(국비지원과정)/3.HTML,CSS,JavaScript, jQuery
[복습 Day17] Javascript 개요, 자바스크립트의 데이터타입, 연산자, 백틱, 익명함수(이벤트와 연결, window.onload), innerHTML, 호이스팅(표현함수), 부트스트랩 사용방법
by 레아Leah
2022. 1. 24.
Javascript 개요
-HTML페이지에 Interactive한 작업을 하기 위해 탄생한 언어
-웹에서 동작하도록 페이지 내에 포함된다.
-인터프린팅하는 언어이다.
-브라우저 엔진
-자바스크립트의 위치
1)<HEAD></HEAD>사이에 <SCIPT></SCIPT>
2)너무 길경우 *.js 외부로 저장한 후 <scipt src="*.js></script> 따로 빼서 사용할 수 있다.
3)태그 내에 이벤트와 함께 사용함.
=>1,2번을 권장
※자바스크립트 주의사항※
-html, css, javascript를 따로따로 분리해서 사용하는 것이 좋다.
-js : 웹문서(html + css)가 로드가 끝난 후 실행시키는 것이 좋다.
-<script>태그는 문서에 어디있어도 작동하지만 문서의 마지막이나 <head>위치에 둔 후 문서의 로드가 끝난 후 실행시키도록 함!
<JS의 데이터 타입>
number(실수)
string : '', "", 백틱`(문자열의 interpolation을 사용할 수 있음. ex ${a}) 모두 문자열
boolean
undefined : 변수를 선언한 후 데이터 초기화를 하지 않았다는 뜻
함수(function)
Object(배열[], 멥{})
Symbol
(데이터타입은 아니고 값인 null : 참조하고 있는 데이터가 없다. )
<데이터 선언시 사용하는>
-let : 많이 사용함.
-var
-const : (final)변수를 상수화시켜서 값을 한번 초기화하면 두번 치환하지 못하도록 함.
<연산자>
1) 산술연산자 : + - * / % ++ --
2) 비교연산자
let c =10;
let d = 20;
let e = "10";
console.log(`c > d = ${c > d}`);
console.log(`c== e = ${c == e}`); // ==는 자바의 unboxing기능(타입은 다르지만 값이 같아서 true)
console.log(`c=== e = ${c === e}`);//타입이 달라서 false
console.log(`true + false = ${true + false}`);
출력값
c > d = false
c== e = true
c=== e = false
true + false = 1
true의 값 1, false의 값 0
3)논리연산자
논리연산자 &&논리곱 ||논리합 !논리부정
console.log(`${17 <= age <= 19}`);
위의 코드는 17 <= age에서 true가 나오면 true의 값 1으로 변환되어 1<= 19이므로 true만 나오는 연산식이다.
<파이썬과 js의 차이점>
"4" *5
파이썬 출력값 : 44444
자바스크립트 출력값 : 20
<삼항연산자>
let f = false;
console.log((f) ? "참":"거짓");
출력값 거짓
<할당연산자>
: LV=RV, +=, -=, *=, *=
<단항연산자>
: typeof, ., []
<innerHTML>
-시작과 끝태그 사이에 값을 넣는다.
-끝태그가 있는 경우에만 사용가능하다.
-함수가 아니다.
window.onload = function(){ //익명함수
let input;
let btn = document.getElementById("btn"); //해당하는 아이디를 가진 요소를 불러오라는 뜻
btn.onclick = function() {
input = document.getElementById("num").value; //value는 read도, write도 가능하다.
if(parseInt(input)%2==0) {
document.getElementById("result").innerHTML="<b style='color:red;'>짝수입니다.</b>";
}else{
document.getElementById("result").innerHTML="<b style='color:red;'>홀수입니다.</b>";
}
}
}
<body>
<h2>조건문과 반복문</h2>
<input type="text" id="num" placeholder="숫자를 입력">
<input type="button" id="btn" value="클릭하시오.">
<div id="result"></div>
</body>
<자바스크립트>
1) core문법
2) DOM(document object)
-document.getElementById()
속성
innerHTML: r/w가 가능 =을 기준으로 왼쪽에 있으면 넣기? 오른쪽에 있으면 읽어오기
let num1 = parseInt(document.getElementById("num1").value); //read
document.getElementById("result").value= result; // write
value
3) BOM
<자바스크립트 함수>
프로그램 내에서 특정 작업을 수행하기 위한 독립적인 코드 블럭
함수는 정의하고, 호출하여 실행한다.
함수는 연산시 필요한 데이터를 외부에서 전달받아 사용(파라미터), 그리고 그 결과는 리턴할 수 있다.표현함수, 선언함수 ==> 호이스팅의 차이가 있다.
선언적 함수
| [복습 Day19] 자바스크립트 마무리, Spring 시작, IntelliJ설치 (0) |
2022.01.26 |
| [복습 Day18] 자바스크립트 core, dom, 연산자, 함수 호출 방법, innerHTML, setAttribute, getAttribute, JSON (0) |
2022.01.25 |
| [복습 Day16] 인라인 블록, position absolute, relative, static, fixed, Float, Visibility, Flex (0) |
2022.01.20 |
| [복습 Day15] lable for, maxlength, minlength (0) |
2022.01.19 |
| [복습 Day14] html, css, 쿼리 스트링 (0) |
2022.01.18 |