STUDY/CODING (9) 썸네일형 리스트형 [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 9 [Day 9] Ⅳ. JacvaScript 2 1. 숫자와 연산자 - 숫자의 종류: 자바스크립트는 숫자에 대해 하나의 자료형만 갖는다. 1. 십진수(decimal): 0~9까지만 사용하여 숫자를 표현 - 정수(integer): e.g.,10, 400, -5 - 부동소수점(float): 소수점 이하 6자리까지 정밀도, e.g., 12.5, 6.4486547 - 배정도 부동소수점(double): 소수점 이하 15자리까지 정밀도 ※ 배정도 부동소수점이 소수점 이하를 더 많이 표현할 수 있어 정확함. 2. 이진수(binary): 0과 1만 사용하여 숫자를 표현 3. 8진수(octal): 0~7까지만 사용하여 숫자를 표현 4. 16진수(hexadecimal): 0~9, a~f까지 사용하여 숫자를 표현, CSS 색상.. [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 8 [Day 8] Ⅲ. JacvaScript 1 4. 변수란? 숫자 또는 문자열과 같은 값의 컨테이너, 값이 변경될 수 있음. - 변수와 선언: 변수를 사용하기 위해서는 우선 변수를 선언해야 함. 1. 변수 선언 - var + 원하는 변수 이름 var myName; var myAge; 2. 선언하지 않은 변수를 사용한 경우 - 오류 문구 생성 - 변수의 초기화 및 업데이트 1. 값으로 초기화 - 원하는 변수 이름 = '초기화 값' myName = 'Chris'; myAge = 37; 2. 변수를 선언하고 초기화하는 법(동시에) var myName = 'Chris'; 3. 변수의 값이 할당되면 다른 값으로 업데이트 할 수 있음 var myName = 'Chris'; myName = 'Bob'; myAge = .. [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 7 [Day 7] Ⅲ. JacvaScript 1 3. 문제해결 - 에러의 종류 1. 문법 에러 - 자바스크립트 문법이 잘못된 경우 - 개발자 도구 콘솔 탭에서 확인 2. 논리 에러 - 코드의 논리가 잘못된 경우 - 코드 분석을 통해 확인 - 문법 에러 고치기 (예제: https://github.com/theun0524/theun0524.github.io/tree/javascript-debug-1) 1. index.html을 크롬 브라우저로 오픈 후 개발자 도구 탭 2. Console 탭에서 에러 확인 3. script.js:39 를 클릭하면 에러가 난 파일과 에러를 발생시키는 코드의 위치를 알려줌 4. 편집기에서 해당 파일, 위치 확인 후 에러 해결방안 탐색 - 철자의 경우 검색엔진(구글, 익스플로러 등)을.. [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 6 [Day 6] Ⅲ. JacvaScript 1 2. JavaScript 기초 - 숫자 맞추기 제작 1. 화면 구성 2. 설명(일반 언어로) 간단하게 숫자 만들기 게임을 만들고 싶다. 숫자는 1과 100 사이의 수 중에서 무작위로 선택되어야 하고, 플레이어는 10번의 기회 안에 그 숫자를 맞춰야 한다. 각 순서마다 숫자를 맞췄는지 틀렸는지는 당연히 알려줘야 하고, 틀렸다면 큰지 작은지도 포함해서 알려줘야 한다. 또한 이전에 써냈던 번호들도 보여줘야 한다. 게임은 플레이어가 숫자를 맞추거나 기회를 모두 소진하면 끝나게 된다. 게임이 끝나면 플레이어가 다시 게임을 할 것인지 묻게 된다. 3. 설명을 작은 단계로 쪼개기 - 1과 100 사이의 숫자 중 무작위 추출. - 1부터 플레이어의 순서를 기록. - 플레이어.. [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 5 [Day 5] Ⅲ. JacvaScript 1 1. JavaScript 소개 - JavaScript란? 주기적으로 바뀌는 화면, 능동적인 지도, 2D/3D 그래픽, 동영상 등 웹페이지에서 볼 수 있는 정보들을 조금 더 복잡하고 알맞게 표시됨이 가능해지는 것. - 웹 기술 계층 구조 1. HTML: 웹 페이지 상에서 문단, 제목, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 마크업 언어. 2. CSS: 배경색, 폰트, 컨텐츠의 레이아웃 등을 지정하여 HTML 컨텐츠를 꾸며주는 스타일규칙 언어. 3. JavaScript: 동적으로 컨텐츠를 바꾸고 멀티미디어를 다루어 웹 페이지를 꾸며주도록 하는 프로그래밍 언어. - 간단한 예제 살펴보기 Player 1: Chris 예제 출처: https://.. [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 4 [Day 4] Ⅱ. HTML & CSS 3. 실습 - 웹 사이트 설계 - HTML 구조 잡기 1. index.html 웹 프로그래밍 기초 HTML CSS 실습 2. HTML & CSS 강의 소개 본 강의는 웹 개발에 필요한 기초적인 내용을 소개하는 것을 목표로 합니다. 여러분들은 본 강의를 통해서 간단한 웹 페이지를 생성하고 배포하기 위한 기초적인 기술과 도구들에 대해서 이해할 수 있을 것입니다. 이 수업의 강의 대상은 프로그래밍을 처음 공부하시는 분들을 위한 기초적인 내용을 다룰 것입니다. 목차 HTML CSS 실습 2. lecture-2-1.html 웹 프로그래밍 기초 HTML CSS 실습 2. HTML & CSS 2.1 HTML HTML은 Hypertext Markup Language의 약어로, 웹.. [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 3 [Day 3] Ⅱ. HTML & CSS 2. CSS - CSS(Cascading Style Sheets)란? 웹 페이지를 꾸미기 위한 코드. HTML문서의 요소를 선택적으로 꾸밀 수 있게 해줌. 1. Rule set(Rule): CSS의 전체 구조 2. Selector: 꾸밀 요소를 선택하는 역할 (상기 예시에서는 p) 3. Declaration(선언문): 중괄호 '{}' 안에 들어가는 선언문으로써 선택자에 적용되는 style을 나타냄 4. Property(속성): 선택자의 요소를 꾸밀 수 있는 속성 속성값과 구분하기 위해 콜론(:) 사용, 속성끼리의 구분을 위해 세미콜론(;) 사용 5. Property value(속성값): 속성에 할당할 수 있는 값 ※ 여러 개의 Selector에 하나의 Propert.. [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 2 [Day 2] Ⅱ. HTML & CSS 1. HTML - 요소(Element) 1. Opening tag: 요소의 이름, 여닫는 꺽쇠괄호로 표현. 요소/효과가 시작되는 곳. 2. Closing tag: Closing tag의 요소 이름 앞에 슬래시(/)를 더하여 표현. 요소/효과가 끝나는 곳. 3. Content: 요소의 내용 4. Attribute(속성): content로 표시되지 않는 추가 정보를 담고 있음. 하나의 요소에 여러개의 속성 추가 가능. 속성 이름 뒤에는 등호기호(=)와 인용기호(")로 둘러싸인 속성값이 존재. 5. Nesting(중첩): 요소가 다른 요소 안에 위치하는 것. 6. Empty Element(빈 요소): Content를 가지고 있지 않은 요소 (ex: img tag) - H.. 이전 1 2 다음
