1. event와 자바스크립트 연동
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
[이벤트 종류]
예) 버튼을 클릭했을때 이벤트 처리
<button onclick="alert('Hello World')"> 클릭하세요. </button>
※ print 하는 방법
자바 : System.out.println();
JSP : expression : <%= %>
out.println() - implicit object (익명 오브젝트) : 정의를 안해도 쓸 수 있음
<--> explicit object(명시적 오브젝트) : 정의를 해야 쓸 수 있음
Javascript 는 찍어내는 방법 (4가지)
1. .innerHTML
2. document.write()
3. window.alert()
4. console.log()
2. var vs. let 변수
var 변수는 일반적으로 전역, 지역 범위를 가리지 않고 사용 가능
let 변수는 블럭 내부에서만 사용(지역변수를 처리할때 사용함)
var 전역변수 예)
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = "I can display " + carName;
}
var 지역변수 예)
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
var carName = "Volvo";
document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML = typeof carName;
</script>
[결과]
※ var 키워드로 선언된 변수는 Block Scope { } 를 가질 수 없다.
ex.
{
var x = 2;
}
만약 var 키워드로 선언한 변수를 다시 블럭에서 선언하면 외부의 변수도 다시 선언됩니다.
<script>
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
document.getElementById("demo").innerHTML = x;
</script>
[결과]
2
이 문제를 해결하기 위해서 let 변수id="demo"></p>
</body>
</html>
[이벤트 종류]

예) 버튼을 클릭했을때 이벤트 처리
<button onclick="alert('Hello World')"> 클릭하세요. </button>
※ print 하는 방법
자바 : System.out.println();
JSP : expression : <%= %>
out.println() - implicit object (익명 오브젝트) : 정의를 안해도 쓸 수 있음
<--> explicit object(명시적 오브젝트) : 정의를 해야 쓸 수 있음
Javascript 는 찍어내는 방법 (4가지)
1. .innerHTML
2. document.write()
3. window.alert()
4. console.log()
2. var vs. let 변수
var 변수는 일반적으로 전역, 지역 범위를 가리지 않고 사용 가능
let 변수는 블럭 내부에서만 사용(지역변수를 처리할때 사용함)
var 전역변수 예)
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = "I can display " + carName;
}
var 지역변수 예)
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
var carName = "Volvo";
document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML = typeof carName;
</script>
[결과]

※ var 키워드로 선언된 변수는 Block Scope { } 를 가질 수 없다.
ex.
{
var x = 2;
}
만약 var 키워드로 선언한 변수를 다시 블럭에서 선언하면 외부의 변수도 다시 선언됩니다.
<script>
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
document.getElementById("demo").innerHTML = x;
</script>
[결과]
2
이 문제를 해결하기 위해서 let 변수를 사용한다.
<script>
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>
[결과]
10
let 은 어떻게 활용할까?
for 문을 사용할때 for 문 돌때 index 변수로 사용가능.
case1) var 변수로 사용하면.
var i = 5;
for (var i = 0; i < 10; i++) {
// some statements
}
// Here i is 10
case2) let 변수를 사용하면.
let i = 5;
for (let i = 0; i < 10; i++) { ==> 여기서 선언한 let i = 0; 은 블럭 내부에서만 돌아간다.
// some statements
}
// Here i is 5
※ Hoisting
변수 var은 Hoisting 가능한데, 변수 let은 Hoisting 이 불가능하다.
ex. var 예
carName = "Volvo";
alert(carName);
var carName;
==> 유효
ex. let 예
carName = "Volvo";
let carName;
==> 에러
3. 함수 정의, 람다
익명함수 == 함수의 람다
a = function(m, n){
return m+n;
}
a = (m,n) => m+n;
ex. 화씨를 섭씨로 변경하는 함수 만들기
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
//일반함수
function toCelsius1(f) {
return (5/9) * (f-32);
}
document.getElementById("demo1").innerHTML = toCelsius1(77);
//익명함수
toCelsius2 = function(f) {
return (5/9) * (f-32);
}
document.getElementById("demo2").innerHTML = toCelsius2(80);
//람다함수
toCelsius3 = (f) => (5/9) * (f-32);
document.getElementById("demo3").innerHTML = toCelsius3(90);
</script>
[결과]
}
'비트교육센터[전문가반]' 카테고리의 다른 글
| Spring MVC [비트교육센터] _ 복습01 (0) | 2021.04.21 |
|---|---|
| JavaScript 복습02 (0) | 2021.03.23 |
| 2021.03.12 수업 내용 정리 (0) | 2021.03.14 |
| 2021.03.11 수업 내용 정리 (0) | 2021.03.11 |
| 이클립스 Git 연동, Commut&Push, Pull 하는 방법 (0) | 2021.03.08 |
