백엔드 2주차 수업 시작!
월요일..싫어..~
-반응형 웹 & 미디어 쿼리
: 다양한 화면 크기에 맞게 표시하기 위해서 반응형 웹을 사용한다!
반응형 웹을 만들려면 뷰포트(viewport) 설정이 필요하고 뷰포트는 스타일태그에 작성한다.
보통 세로크기는 잘 지정하지않고 가로크기를 주로 지정한다.
(반응형 웹은...잘 모르겠다..더 공부해야 할 듯..ㅠㅠ)
-자바스크립트
<head>태그 or <body> 안에 <script>태그 작성
예시)
<script type="text/javascript">
alert("스크립트를 실행합니다.")
</script>
javascript는 css처럼 외부파일에서 작성 가능함
파일명은 xxx.js
<script>태그는 따로 작성할 필요 없음.
=>alert("스크립트를 실행합니다. 외부파일")
-자바스크립트 기본 입출력
| alert | alert(’ 팝업창 출력 메세지’); |
| document.write | 현재 브라우저에서 확인 가능 |
| console.log | 현재 브라우저에서 확인 가능 |
자바스크립트 입력
| prompt | prompt(’나이를 입력하세요’); |
| confirm | confirm(’정말 삭제하시겠습니까?’); |
-변수
: 데이터나 결과 값처럼 메모리 저장, 사용이 가능한 값
프로그램을 실행하는 동안 값이 달라질 수 있는 데이터.
- 숫자형 / 문자형 / 논리값 (true/false) / 함수 / 객체 / undefined
변수 선언: var xxx
alert(a); => a 저장된 값 띄우기
document.write(a + "<br>"); //a값 띄우고 줄바꿈처리
document.write("<h3>" + a + "</h3>"); => h3태그 사용해서 a값 굵게 표시
var 변수이름[=값 생갹 가능. 단 생략시 기본값은 undefined]
길이 무제한, 대소문자구분, 숫자 가능. 단, 숫자로 시작은 불가. 특수문자는 _만 가능.
자바스크립트 키워드는 변수명으로 사용 불가능
(권고사항: 2단어 이상 결합된 단어의 경우(SumOfNumber ) 시작 단어를 대문자로 함.)
-연산자
| 산술연산자 | 비교연산자 | 논리연산자 | 대입(할당)연산자 | 조건삼항연산자 | |
| 단항 | 증감연산자 ++, - - | X | not: ! | X | ?: b:c a값이 true면 b false면 c 출력 |
| 이항 | 사칙연산(+,-,*,/) | >, >=, <, <=, ==, !=, ! == | or: ||(버티컬바) and: && | =, +=, -=, … | |
| 삼항 | X | X | X | X |
let result1 = 10/2; document.write("<h3> 10 / 2 = " + result1 + "</h3>");
let result2 = 10%2; document.write("<h3> 10 % 2 = " + result2 + " </h3>");
let result3 = 10/3; document.write("<h3> 10 / 3 = " + window.parseInt(result3) + "</h3>");
=> 반올림해서 정수 값만 가지고 옴(window.parseInt)
let result4 = 10; document.write("<h3> 10(1증가) = " + ++result4 + "</h3>"); // 10에서 1증가되어 11출력
let result5 = 20; let result6 = ++result5; document.write("<h3>" + result5 + "</h3>"); //21나옴
*연산자를 이용해서 결과를 출력할때
- 숫자형 + 숫자형 ⇒ 산술형 ( 5+5 ⇒ 10)
- 문자형 + 숫자형 ⇒ 연결형 (가+5 ⇒ 가5)
- 문자형 + 문자형 ⇒ 연결형 (가+나 ⇒ 가나)
document.write(typeof(변수명)); 하면 타입을 알 수 있음.
변수 타입을 변경하고 싶으면 window.parseInt(변수명) 사용!
-조건문
if-else
if(논리값결과수식){
true 수행 문장
} else {
false 수행 문장
}
-반복문
for
for(시작; 조건; 증가){
반복해야 할 문장
}
for(let i = 1; i ≤ 10; i++){
document.write( i + ”<br>”);
}
-변수 타입
var a
typeof ⇒ undefined
a = 2.99
typeof ⇒ number
a = “스크립트”
typeof ⇒ String
논리값결과표현?true결과표현:false결과표현
x?y:z ⇒ 3 < 5 ? 5 : 3
<자바스크립트 소스를 작성할때 지켜야 할 규칙!>
- 코드 들여쓰기
- tab 사용하면 쉽게 들여쓰기 가능함.
- 세미콜론(;) 사용해서 문장 구분하기
var a = 5; - 공백 넣어서 작성하기
var sum=num+10 ⇒ var sum = num + 10
var num=2; ⇒ var num = 2;
window.parseInt(변수명), prompt, alert 3가지가 이번 수업에서 제일 흥미로웠다!
과제로 숫자를 입력받아서 계산해주는 코드를 작성했는데 이것도 재밌당
알고 있는 내용을 다시 차근차근 정리해봐야지~!
——————————————————————————
* 유데미 바로가기 : https://bit.ly/3V220ri
* STARTERS 취업 부트캠프 공식 블로그 보러가기 : https://blog.naver.com/udemy-wjtb
본 후기는 유데미-웅진씽크빅 취업 부트캠프 3기 백엔드 과정 학습 일지 리뷰로 작성되었습니다.
'웅진씽크빅 스타터스 부트캠프 > 교육일지' 카테고리의 다른 글
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 6주차 학습 일지 (0) | 2023.01.01 |
|---|---|
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 5주차 학습 일지 (0) | 2022.12.25 |
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 4주차 학습 일지 (0) | 2022.12.16 |
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 3주차 학습 일지 (0) | 2022.12.09 |
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 1주차 학습 일지 (0) | 2022.11.26 |