21.06.01
Java Script
@JavaScript
=> 웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 객체 기반의 스크립트 언어.
% JS의 특징
- 모든 웹 브라우저에서 동작한다.
- 웹 브라우저에서 실행 결과를 즉시 확인
- 다양한 용도의 프로그램 개발
- 다양한 자바스크립트 공개 API
- 다양한 라이브러리와 프레임워크
내부에선 <script> 태그 안에 작성 가능하며, 외부의 JS 파일을 가져올 수도 있다.(ex - script src = "" )
@ JS 실습
- 위와 같이 구성된 페이지의 배경 색 및 글자 색을 변경 한다.
- "DESIGN" 을 누르면 색상을 변경, "DEFAULT" 버튼을 누르면 원래의 색상으로 돌아간다.
% 코드
- "document"는 문서 전체를 의미 한다. -> 문서 안의 무언가를 바꾸려면 사용해줘야 함.
- "querySelector"는 위의 사진과 같이 "ID" 나 "CLASS" 혹은, "태그" 자체를 선택할 수 있다.
- "addEventListener"를 사용, 특정 동작 발생시 수행하는 이벤트를 형성 한다. 해당 실습은 "click" .
- 그리고 "addEventListener" 에는 수행할 기능도 넣어줘야 하는데, 위를 보면 넣음과 동시에 어떤 기능인지를 작성해주었다. --> 배경화면 및 글자 색상 변경 => "fuction"
아래는 실습의 결과이다. 각 버튼을 누르면 해당 화면처럼 변경
@JS - 출력( write / log / alert )
- 보는것과 같이 JS를 사용하기 위해선 "<script>"를 쓰고 그 안에 작성. --> CSS의 <style>과 비슷
- "document.write( )"는 HTML문서 내부에 값을 출력 한다. JSP의 out.print( )와 마찬가지로 태그도 사용 가능하다.
- "console.log( )"는 해당 페이지의 콘솔 창에 값을 띄운다 .
- "alert( )"는 지정한 값으로 알림 팝업창 을 띄운다.
실습 결과
@ JS에서의 변수
- 변수의 형태는 위의 3가지( val / let / const ) 형태가 존재한다.
- 각 형태별로 변수를 재선언/할당 가능 여부가 다르다 .
- 연산자를 통해 각 자료형을 변환하는 명령어는 위와 같이 4개 존재한다.
@JS 실습 - 문자형 변환
<body>
<script>
let num1 = '100';
let num2 = 200;
console.log("100과 200의 더한결과는 >>",Number(num1)+num2)
console.log((num2))
console.log((num1))
</script>
</body>
- 기존의 자바에서 사용하던 것처럼, 재선언은 불가 하지만 재할당은 가능 한 "let"을 이용하였다.
- JS에서는 " / "가 자바와 다르게 나머지까지 연산 해버린다. 때문에 나머지 연산자 "%"를 사용
- 숫자인 문자열을 숫자형 데이터로 연산하면 강제로 형변환을 하여 연산이 된다.
- 출력한 값을 Console에 출력하였는데, Chrome 한정으로 숫자는 파란색, 문자는 검정색으로 출력 된다.
- 첫번째 출력창을 보면 " , "로 구별하여 출력하였다. 만일 더해버리면 숫자형 값이 문자형으로 형변환 된다.
- 자바에서 문자형 + 숫자형 을 생각하면 이해될것.
반응형
'국비교육기관 > 수업' 카테고리의 다른 글
| 59일차 XGBoost / JavaScript - 배열실습, 함수 (0) | 2021.06.03 |
|---|---|
| 58일차 JavaScript - 숫자 연산, 조건문, 배열, 난수 (0) | 2021.06.02 |
| 56일차 머신러닝 - Adaptive Bootstrap / JSP - 시험 (0) | 2021.05.31 |
| 55일차 머신러닝 - 캐글 참가 / JSP - Interface 실습 (1) | 2021.05.28 |
| 54일차 머신러닝 랜덤 포레스트 실습 / JSP 게시판페이지 (0) | 2021.05.27 |
댓글