개발공부 일지
학원수업_35day [HTML,CSS,Javascript (2day) - div,span ] 본문
학원수업/Web(HMTL,CSS,JSP,Servlet)
학원수업_35day [HTML,CSS,Javascript (2day) - div,span ]
짜몽- 2022. 9. 21. 09:10HTML : web document 의 컨텐츠를 담당 **
CSS : web document 디자인 스타일 담당 **
JavaScript : web document 행위 담당 **
ECMAScript 표준을 준수하는 스크립트 언어
ECMA 인터내셔널 : 정보 통신 표준을 제정하는 표준화 기구
ES5 (ECMA5, 2009) : 변수 선언 var -> 중복 선언 가능, Function-level scope
ES6 (ECMA6, 2015) : 변수 선언 let -> 중복 선언 불가 , Block-level scope
const 상수 , arrow function ( 화살표 함수 ) 등이 새롭게 추가
DOM ( Document Object Model ) :
- javascript 에서 Html(web) 문서(document) 의 요소(element)를
제어하기 위한 프로그래밍 인터페이스(제어 방법)를 제공한다
웹브라우저에서 지원
HTML 문서 요소를 계층적으로 지원 ( Dom Tree )
각 요소들을 자바스크립트에서 제어하고 조작하기 위한
함수를 제공
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript basic</title>
</head>
<body>
<script type="text/javascript">
// 자바스크립트 주석(자바와 동일)
/*
* 여러줄 주석
*/
//window.alert("폭포횟집");
//alert("참이슬2만원 개비싸"); // window 생략가능
//HTML 을 이용하여 script 태그 사이에 경고창이 뜨게 작성하는 방법
// alert -> 실행시키자마자 경고창 같이 뜬다.
console.log("콘솔기록 테스트");
console.log("콘솔기록 테스트2");
// console.log 는
// (console객체) (log메서드) () <- 매개변수
</script>
자바스크립트 기초
</body>
</html>console.log() 란?
자바스크립트는 html, css 를 동적으로 만들어 주는 기능을 담당하고 있다.
먼저
자바스크립트의 기본 동작과정은
브라우저에게 ex) '누구'는 oo을 xx 해라! 라는 형식으로 동작한다.
console.log()
console - 객체 ('누구'의 주체)
log - 메서드 (XX의 주체)
OO - 매개변수 (parameter) ( () 안의 것이 OO의 주체가 되는 것) 이다.
<script> </script> 밖에 있는 (body 안에 '자바스크립트' 라고 넣은 문장이 호출 됐다.
consol.log() 와 일반 브라우저에 호출되는 작성 위치 헷갈리지말기!
ECMAScript(ES)는 JavaScript(JS)를 위한 표준화된 스크립팅 언어이다. 최신 브라우저에서 지원되는 현재 ES 버전은 ES5입니다. 그러나 ES6은 핵심 언어의 많은 제한 사항을 해결하여 개발자가 더 쉽게 코딩할 수 있도록 합니다.
ECMA5 는 2009년,
ECMA6는 2015년에 출시됐다
ECMA6는 계속 업데이트를 하고 있고, 기업에서도 ECMA6을 원하나, 회사에서 기존에 쓰고있던 코드라던지 리팩토링을 할 수 있는 상황이 있기 때문에 알아야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript 변수 var, let</title>
</head>
<body>
<script type="text/javascript">
// ECMA5 변수선언 var 을 이용
var a=1;
var b=2; // 중복 선언이 가능
alert(a);
// ECMA6 변수선언 let 을 이용 => 중복 선언 불가
let b=1;
// let b=2; // let 은 중복 선언이 불가
b=3; // 재할당은 당연히 가능
alert(b);
// ECMA6 상수 const 활용
const c=1;
// c=2; // const 상수이므로 재할당 불가
alert(c);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript variable : var 과 let</title>
</head>
<body>
ES5 : var 중복선언가능 function level scope <br>
ES6 : let 중복선언불가 block level scope , 상수 const 등이 추가 <br>
<button type="button" onclick="varTest(7)">var버튼1</button>
<button type="button" onclick="letTest(7)">let버튼2</button>
<script type="text/javascript">
function varTest(num){
if(num>1){
var a=1;
}
alert(a);// if 문 내에 선언된 var a 변수 사용 가능 => function level scope
}
function letTest(num){
if(num>1){
let b=1;
}
alert(b);// if 문 내에 선언된 let b 변수 사용 불가 => block level scope
}
</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="css/home.css">
div
span
function enterKey(){ //enterkey 를 누를때만 이동
if(event.keyCode==13){
'학원수업 > Web(HMTL,CSS,JSP,Servlet)' 카테고리의 다른 글
| 학원수업_39day [HTML,CSS,JSP,Servlet(6day) - ServletConfig, Servletcontext] (0) | 2022.09.26 |
|---|---|
| 학원수업_38day [HTML,CSS,JSP,Servlet(5day) - web ] (0) | 2022.09.23 |
| 학원수업_37day [HTML,CSS,JSP,Servlet(4day) - web ] (0) | 2022.09.23 |
| 학원수업_36day [HTML,CSS,Javascript (3day) - web 구동원리 ] (0) | 2022.09.22 |
| 학원수업_34day [HTML,CSS,Javascript (1day) - Web] (0) | 2022.09.20 |
'학원수업/Web(HMTL,CSS,JSP,Servlet)' Related Articles
more
