2022. 12. 28. 11:10ㆍ코딩배움일지/Web 구현
추상클래스- 쓰이기는 하지만 인터페이스로.
figma
notion- mark down.- 기술면접 준비.
id = 유일한 한가지 값. Database 의 Primary key 와 같은것.
class = 뭉틍거리는것
자바스크립트
웹 요소를 제어합니다
웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게
할 수 있음
웹 사이트 UI 부분에 많이 활용
예) 마우스 포인터를 올렸을 때 펼쳐지는 메뉴
한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠
웹 애플리케이션을 만듭니다
최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며
애플리케이션처럼 동작
예) 온라인 지도의 길찾기 서비스, 데이터 시각화 서비스
공개된 API를 활용한 다양한 서비스
다양한 라이브러리를 사용할 수 있습니다
(라이브러리다)
웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야
할 일이 늘어남 🡪 라이브러리와 프레임워크가 계속 등장
예) 시각화를 위한 d3.js, 머신러닝을 위한 tensorflow.js
DOM 조작을 위한 jQuery 등
예) 웹 애플리케이션 개발을 위한 React, Angular, Vue 등
서버를 구성하고 서버용 프로그램을 만들 수 있습니다
node.js : 프런트엔드 개발에 사용하던 자바스크립트를 백엔드
개발에서 사용할 수 있게 만든 (라이브러리다.)
웹 문서 안에 자바스크립트 작성하기
<script> 태그와 </script> 태그 사이에 자바스크립트 소스 작성
웹 문서 안의 어디든 위치할 수 있지만, 주로 </body> 태그 앞에 작성
자바스크립트 소스가 있는 위치에서 실행됨.
외부 스크립트 파일 연결해서 작성하기
자바스크립트 소스를 별도의 파일(*.js)로 저장한 후 웹 문서에 연결
웹 브라우저에서 스크립트를 해석하는 과정 (js 는 html 보다 해석하는게 느리다.)
① 1행에 있는 <!DOCTYPE html>를 보고 현재 문서가 웹 문서라는 것을 인식
이제부터 HTML 표준에 맞춰 소스를 읽기 시작
② 웹 문서에서 HTML 태그의 순서와 포함 관계 확인
③ 태그 분석이 끝나면 7~14행의 스타일 정보 분석.
④ 20행의 <script> 태그를 만나면 자바스크립트 해석기에게 스크립트 소스 넘김
자바스크립트 해석기에서 <script>와 </scirpt> 사이의 소스를 분석하고 해석
⑤ ②에서 분석한 HTML과 ③에서 분석한 CSS 정보에 따라 웹 브라우저 화면에 표시
⑥ 웹 브라우저에서 사용자가 동작하면 자바스크립트를 실행해서 결과를 화면에
표시
** 시작할떄부터 가져야 하는 것은 head 에 작성
버튼을 눌렸을때 작동하는 것은 body 에 작성
식과 문
식(expression)
값을 만들어 낼 수 있다면 모두 식이 될 수 있다
식은 변수에 저장된다
문(statement)
문의 끝에는 세미콜론(;)을 붙여서 구분하는게 좋다
넓은 의미에서 식이나 값을 포함할 수 있다
간단한 입출력 방법
알림 창 출력
‘확인’ 버튼이 있는 메시지 창 표시
확인 창 출력
‘확인’ 과 ‘취소‘ 버튼이 있는 창 표시
클릭하는 버튼에 따라 프로그램 동작
프롬프트 창에서 입력받기
텍스트 필드가 있는 창 표시
사용자 입력 값을 가져와 프로그램에서 사용
간단한 입출력 방법
document.write( )
아직 document 객체를 배우지 않았으므로 웹 문서(document)에서 괄호 안의 내용을 표시(write)하는 명령문 이라는 정도로만 알아둘 것
괄호 안에서 큰따옴표(" ")나 작은 따옴표(' ') 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시됨
따옴표 안에는 HTML 태그도 함께 사용할 수 있음
console.log( )
괄호 안의 내용을 콘솔 창에 표시
괄호 안에 변수가 들어갈 수도 있고, 따옴표 안에 텍스트를 넣을 수도 있음
따옴표 안에 태그는 사용할 수 없음
'코딩배움일지 > Web 구현' 카테고리의 다른 글
| Web 7일차 3(자바스크립트 기본 문법) (0) | 2022.12.28 |
|---|---|
| Web 7일차 2(자바스크립트) (0) | 2022.12.28 |
| Web 6일차 4(선생님과 함께하는 Oven clone page) (0) | 2022.12.27 |
| Web 6일차 3(선생님과 함께하는 Oven clone page) (1) | 2022.12.27 |
| Web 6일차 2(선생님과 함께하는 Oven clone page) (0) | 2022.12.27 |