| web(Front-end)의 3요소 - HTML : 웹 문서의 큰 틀(뼈대) - CSS : 스타일(색상, 테두리, 디자인 등등) - JavaScript : 웹 문서 상에 이벤트가 발생했을 때 추가적으로 실행해야 하는 동작들 처리(동적인 효과) * 이벤트 : 사용자가 하는 모든 행위 (자바라는 프로그래밍 언어와는 전혀 무관) |
1. 개요
1) 스크립트 언어란?
- 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해줌.
매우 빠르게 배우고 짧은 소스코드로 상호작용 하도록 고안됨.
2) 자바스크립트란?
웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터 방식"의 스크립트 언어
- 자바 : 컴파일 방식 => 컴파일 단계를 거치고 나서 실행되는 개념 => 오류 잡기 수월
- 자바스크립트 : 인터프리터 방식 => 컴파일 단계를 거치지 않고 곧바로 실행되는 개념
(브라우저에서 html문서가 로딩될 때 코드를 한 줄씩 읽어내는 방식)
자바는 컴파일 + 인터프리터* 방식
=> 소스코드를 한 번 다 읽어내고 나서 프로그램이 컴파일 후 실행되므로
코드상 문법적인 오류가 있으면 바로 빨간줄로 알려줌
*인터프리터 방식
=> 실행하면서 소스코드를 한 줄씩 밀어내면서 실행
(실시간으로 분석해서 실행됨)
=> 코드상에 문제가 있다면 바로 알려주지 않고 실행 시점에 알려줌
3) 장단점
(1) 장점
- 요소에 이벤트가 발생 했을 때 코드를 한 줄씩 읽어나가면서 수행되기 때문에 수행속도가 빠름
- 간단한 코드 작성으로 초보자가 접하기 쉬운 언어(단순한 구조, 원칙)
예) 접근제한자 개념없음,
메소드 정의 시 반환형 정의 안함,
변수 선언 시 자료형을 지정할 필요가 없음(타입추론)
(2) 단점
웹 특화된 기술 => 내부에서 제공되는 기술이 제한적임
HTML내에 소스코드를 작성하기 때문에 외부에 공개됨(개발자 도구이용)
=> 보안에 취약점이 있을 수 있다.
4) 자바스크립트 소스코드 작성 위치에 따른 종류
(1) inline(인라인)
: 이벤트를 부여하고자 하는 요소 내에 간단한 소스코드를 작성해서 실행되게 하는 방법
태그 내에 직접적으로 실행 할 간단한 소스코드를 작성해서 실행시킴
주로 실행해야 하는 소스코드가 매우 소량일 경우 사용
[표현법]
< 태그명 이벤트속성 = "해당 태크에 해당 이벤트가 발생했을 때 실행할 소스코드" >
<!-- 버튼이 클릭되는 순간(==버튼에 클릭이벤트가 발생하는 순간) 알림창 띄운다 -->
<button onclick="window.alert('생일축하합니다')"> 버튼 </button>
<!-- 버튼이 클릭되는 순간(==클릭이벤트가 발생하는 순간) -->
<button onclick="console.log('콘솔창')">콘솔창 출력</button>
<!-- 콘솔창(개발자 도구 탭) : 주로 디버깅할 용도 -->(2) internal(내부) 방식
: 해당 html문서 내에 script태그 영역에 소스를 작성해서 실행되게 하는 방법
script태그 영역에 함수단위로 소스코드들을 작성해놓고
어떤 요소에 어떤 이벤트 발생 시 해당 함수를 호출함으로써 실행시키는 방식
=> script태그는 head, body 태그 내에 아무곳이나 적어도 됨
<!-- 버튼이 클릭되는순간(==클릭이벤트가 발생하는 순간) 알림창 띄워보기 -->
<!-- 인라인 + 내부방식 -->
<button onclick="abc();">알림창</button> <!--버튼을 클릭할 때 함수가 호출된다.-->
<!-- 순수 내부방식 -->
<!-- 콘솔창에 출력하는 버튼 -->
<button id="btn">콘솔창 출력</button>
<script>
//자바스크립트 소스코드를 기술할 수 있는 영역
/*
여러 줄 주석
*/
//접근제한자 (예약어) 반환형 메소드명(매개변수) --> 자바의 메소드
//매개변수가 없는 단순한 함수 만들어보기
//abc라는 이름을 가진 함수 정의(이렇게 이름을 정의한 함수를 "선언적 함수"라고 한다. )
function abc(){
//해당함수를 호출 시 실행할 코드를 기술
window.alert('알림창2');
}
// 순수 내부방식으로 이벤트부여
//1. 이벤트를 적용시키고자 하는 요소(태그)를 가지고 오기
var btn = document.getElementById('btn');
//2. 선택된 요소의 이벤트 속성에 접근해서 해당 이벤트 발생 시 실행할 함수를 대입
btn.onclick = function(){//익명 함수 : 이름이 없는 함수, 해당 이벤트 발생 시 호출
//함수를 호출했을 떄 실행할 코드를 기술
console.log(성공);
abc(); //함수 내부에서 미리 정의된 선언적 함수는 호출이 가능, 없는 함수 호출 시 콘솔창 에러
}
</script>(3) exeternal(외부) 방식
: 소스코드들을 별도의 .js파일로 저장해서 script태그를 가져다가 실행되게 하는 방법
별도의 .js 파일로 소스코드를 작성하고 해당 html문서에 가져다가 실행하는 방법
<head>
<script src="resources/js/sample.js"></script>
</head>
<body>
<h4 onclick="window.alert('h4도 클릭 가능')">3) exeternal(외부) 방식</h4>
<!-- 외부방식 + 인라인 -->
<button onclick="test(); abc();">알림창3</button>
<!--여러 함수를 사용할 땐 ;(세미콜론)붙이기 / 중괄호에도 밑에 내용이 있으면 세미콜론 붙임-->
</body>function test(){
window.alert('test호출');
}
1. 데이터 입출력
1) 데이터를 출력하는 기본구문
(1) 자바스크립트에서의 입/출력
<자바스크립트 데이터 입출력 관련 객체들>
● window : 자바스크립트 내장 객체로 브라우저 창이 하나 열릴 때마다 하나씩 만들어지는 객체
브라우저 창 안에 존재하는 모든 요소들의 최상위 객체 == extends Object(java)
(즉, 모든 곳에 적용되기 때문에 생략이 가능)
=> window.alert(); => alert();
=> console.log(); => window.console.log()
● document : 웹문서(HTML)마다 하나씩 만들어지는 객체
HTML문서에 대한 정보들을 가지고 있음
document.getElementById();
(2) 데이터를 출력하는 기본구문
① window.alert('알림장에 출력할 문구');
② window.console.log('콘솔창에 출력할 문구');
③ document.write('화면에 출력할 문구');
④ 선택한요소.innerHTML/innerText = '해당 요소에 출력할 구문';
=> ①, ②는 많이 다뤄봤으니 ③, ④ 해보기
③ document.write('화면에 출력할 문구');
<button onclick="documentWrite();">화면에 출력</button>
<script>
function documentWrite(){
// document.write('출력');
// document.write('<b>가나다</b><br><hr>ABC');
// 화면에 출력할 문자열에 HTML태그가 있을 경우 해석해서 동적인 요소를 만들어줌
//테이블만들기
var table = '<table border="1">';
table += '<tr>';
table += '<td>1</td>'
table += '<td>2</td>'
table += '</tr>'
table += '</table>'
document.write(table); //덮어쓰기
}
</script><버튼 누르기 전>
<버튼 누르기 후>
④ 선택한요소.innerHTML/innerText = '해당 요소에 출력할 구문';
- innerHTML과 innerText
자바스크립트에서 어떤 요소(Element)안의 값(Content)을 가지고 온다거나
변경하고자 할 때 innerHTML, innerText라는 속성에 접근
=> 가지고 올 때 : 변수 = 선택한요소.innerHTML/innerText;
=> 변경하고자 할 떄 : 선택한요소.innerHTML/innerText = '변경할 값';
<style>
.area{
border : 1px solid black;
width : 500px;
height : 500px;
}
</style>
<div id="area1" class="area" ">
innerHTML과 innerText
자바스크립트에서 어떤 요소(Element)안의 값(Content)을 가지고 온다거나 <br>
변경하고자 할 때 <b>innerHTML, innerText</b>라는 속성에 접근 <br>
=> 가지고 올 때 : 변수 = 선택한요소.innerHTML/innerText; <br>
=> 변경하고자 할 떄 : 선택한요소.innerHTML/innerText = '변경할 값';
</div><button onclick="tagValue();">확인</button>
<script>
function tagValue(){
//1. 먼저 해당 요소 객체를 가져와서 변수에 담는다.
var divEl = document.getElementById('area1');
console.log(divEl);
//선택한 요소 내에 정보들을 알아내고자 한다면 속성들에 .으로 직접 접근해야 함
var divId = divEl.id;
console.log(divId); //id : 해당요소의 id값
console.log(divEl.className); //className : 해당요소의 class값
console.log(divEl.innerHTML); //HTML태그들 포함
console.log(divEl.innerText); //HTML태그들 미 포함
//content값을 가져와버림
//이번에는 변경 => 대입
divEl.innerHTML = '<b>innerHTML로 속성값을 변경함</b>';
divEl.innerText = '<b>innerHTML로 속성값을 변경함</b>';
// 버튼을 클릭하면 tagValue함수를 호출
// tagVaule내의 요소들이 순서대로 실행됨
console.dir(divEl); //해당 값의 디렉토리 구조를 보고자할 때 사용(속성들에 대한 정보)
divE1.style = 'color: red; font-size: 20px;';
}
</script><버튼 누르기 전>
<버튼 누르기 후>
< 실습 : div 클릭 시 "안녕" 이라는 문구 알람창으로 띄워주기 >
<script>
var divEl = document.getElementById('area1');
divEl.onclick = function(){
alert('안녕');
}
</script>2) 데이터를 입력받는 기본구문(변수에 대입가능)
(1) 변수 = window.confirm('질문내용');
confirm 호출 시 "질문내용"과 "확인/취소"버튼이 존재하는 알림창 발생
확인 버튼 클릭 시 true값, 취소버튼 클릭 시 false값 반환
<button onclick="testConfirm();">클릭</button>
<div id="area2" class="area"></div>
<script>
function testConfirm(){
var result = window.confirm('졸리면 확인, 아니면 취소를 누르세요.');
console.log(result);//확인/취소 결과값 확인
var divEl = document.getElementById('area2'); //요소 객체 변수에 할당
//divEl.innerHTML = '<h2>문구테스트</h2>'; //할당한 요소객체 innerHTMl속성값 변경
if(result){
divEl.innerHTML='<h2>졸린상태입니다.</h2>';
}else{
divEl.innerHTML='<h2>안졸린상태입니다.</h2>';
}
}
</script>
(2) 변수 = window.prompt('질문내용');
prompt 호출 시 "질문내용"과 입력할 수 있는 "텍스트 상자"와 "확인/취소"버튼이 보여지는 알림창 발생
- 확인 버튼 클릭 시 텍스트 상자에 입력 되어있는 값이 반환
- 취소 버튼 클릭 시 null값을 반환
<button onclick="testPrompt();">클릭</button>
<div id="area3" class="area"></div>
<script>
//자바스크립트 영역
function testPrompt(){ //선언적함수
var name = window.prompt('이름을 입력해주세요.');
var address = window.prompt('사는 곳을 입력해주세요.');
console.log(name);
console.log(address);
//XX에 사시는 XXX님의 방문을 환영합니다^^ 형태로 div요소 내부에 출력
var divE1 = document.getElementById('area3');
divE1.innerHTML = '<b>' + address + '에 사시는 ' + name + '님의 방문을 환영합니다. </b>';
}
</script>
<실습 : 사용자가 입력한 숫자만큼 list만들기>
<button onclick="testPrompt2();">숫자입력</button>
<ul id="ul1"></ul>
<script>
function testPrompt2(){
var num = window.prompt('숫자를 입력해주세요.');
var ulEl = document.getElementById('ul1');
var str = '';
for(var i = 0; i<num; i++){
str += '<li> 안녕하세요 </li>';
}
ulEl.innerHTML = str;
}
</script>
(3) 변수 = 선택한요소.속성;(id, className, innerHTML, innerText)
(4) 변수 = 선택한input요소.value;
아이디 : <input type="text" name="userId" id="userId"><br>
비밀번호 : <input type="password" name="userPwd" id="userPwd"><br>
<button onclick="testInput();">클릭</button>
<script>
function testInput(){
var inputId = document.getElementById('userId');
var inputPwd = document.getElementById('userPwd');
// console.dir(inputId);
console.log("아이디: " + inputId.value);
console.log("비밀번호: " + inputPwd.value);
//값 수정
inputId.value = '못 쓰는 아이디';
}
</script><버튼 누르기 전>
<버튼 누르기 후>
'클라우드 융합 Full-stack 웹 개발자 양성과정 > HTML, CSS, JavaScript, j-Query' 카테고리의 다른 글
| j-Query - 개요, 기본선택자, 추가적인 선택자 (0) | 2022.11.01 |
|---|---|
| JavaScript - 요소가져오기(접근하기), 변수와 자료형, 문자열과 숫자, 배열, 함수, 객체1, 객체2, window객체, 이벤트, 정규표현식 (0) | 2022.10.24 |
| CSS - 화면구조잡기(기본, 실습, 상세구조, 세부구조), 실습 (0) | 2022.10.19 |
| HTML - 태그(영역, 하이퍼링크관련 태그), CSS - 선택자(기본, 기타, 우선순위), 스타일(글꼴, 텍스트, 목록, 영역, 테두리, 배경, 레이아웃, 화면꾸미기) (0) | 2022.10.19 |
| HTML - test, 태그(글자, 목록, 표, 이미지 및 멀티미디어, 입력 양식 및 폼 관련) (0) | 2022.10.17 |