1. JS 'prompt', 변수, 삼항연산 활용
배운 내용
짝수홀수판별기를 만들어보자
prompt사용자로부터 입력을 받을 수 있는 메시지 창
let n=prompt("원하는 숫자를 입력하세요");삼항연산자조건 판단
핵심 포인트
- 조건판단대상은 단 2가지 (짝수냐 홀수냐)이므로
삼항연산자가 적합함
let result = (n%2==0)? "당신의 숫자는 짝수입니다":"당신의 숫자는 홀수입니다";
console.log(result);느낀 점
-삼항연산자 별표 다섯 개 (★★★★★)
2. CSS position
배운 내용
static모든 태그 요소에 기본적으로 적용되어있는 '디폴트' 속성
차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임relative다른요소에 의해 밀려나거나, 영향을 받은
현재 자신의 위치를 기준으로 한 위치속성absolute자신의 부모요소를 기준으로 한 위치속성
핵심포인트
※주의※
포지션을 적용할 때는 부모포함 조상 중 단 하나라도 relative or absolute가
적용되어 있어야 위치가 깨지지 않음 (포지션에는 기준이 필요하기 때문)
-
수학적 개념과 다른 x축, y축
x축 - left값 (오른쪽으로 갈수록 커짐)
y축 - top값 (아래로 갈수록 커짐) -
overflow: hidden;영역을 벗어나는 경우, 안보이게 처리
3. 비행기 포지션 옮기기 예제
Joypad를 이용해 비행기를 상하좌우로 조정해보자.
body 태그
<body>
<div id="wrapper">
<div id="aside">
<table>
<tr>
<td></td>
<td><button onclick="moveUp()">↑</button></td>
<td></td>
</tr>
<tr>
<td><button onclick="moveLeft()">←</button></td>
<td><button onclick="moveDown()">↓</button></td>
<td><button onclick="moveRight()">→</button></td>
</tr>
</table>
</div>
<div id="section">
<img id="hero" src="../../images/plane/plane.png" alt="비행기">
</div>
</div>
</body>- JOYPAD를 만드려면 총 2층의 3칸짜리 table이 필요 (tr＊2, td＊3)
- button에 onclick 이벤트 핸들러 부여 (클릭 시 효과)
style 시트와 script 태그
<style>
#wrapper{
width: 900px;
height: 600px;
margin: auto;
overflow: hidden;
}
#aside{
width: 200px;
height: 600px;
background-color: rgb(112, 112, 243);
float: left;
/* 방향키 가운데로 정렬하기 */
display: flex;
justify-content: center; /* 가로 정렬 */
align-items: center; /* 세로 정렬 */
}
#section{
width: 700px;
height: 600px;
background-color: skyblue;
float: left;
position: relative;
/* 자식때문에 */
background-image: url(../../images/plane/bg.jpg);
/* 배경은 뒤에 깔려서 이미지와 자리싸움x(충돌x) */
}
button{
width: 60px;
height: 50px;
background-color: rgb(207, 241, 255);
color: black;
border-radius: 15px;
}
#hero{
width: 40px;
position: absolute;
/* 자신의 부모요소를 기준으로 배치하겠음 */
left: 200px;
top: 100px;
}
</style>
<script>
let x=2;
let y=1; //비행기 위치 초기값 맞춰줘야 자연스러움
function moveRight(){
x++;
// 문서 내의 hero요소에 적용된 css 중 position값 중 left값을 증가시키기
let hero = document.querySelector("#hero");
hero.style.left= x*100+"px";
}
function moveLeft(){
x--;
let hero = document.querySelector("#hero");
hero.style.left= x*100+"px";
}
function moveUp(){
y--;
let hero = document.querySelector("#hero");
hero.style.top= y*100+"px";
}
function moveDown(){
y++;
let hero = document.querySelector("#hero");
hero.style.top= y*100+"px";
}
</script>- let x=2, let y=1 로 전역변수 선언
- right,left,up,down 각각 function 주기
- #hero(비행기)는 부모요소(#section)기준으로 배치하므로
#section에position: relative;주기 document.querySelector("#hero")쿼리셀렉터 사용 시 아이디에 #붙이기document.getElementById("hero")겟 엘리먼트 바이 아이디 사용 시 아이디에 # 안 붙여도 됨
느낀 점
함수선언 연습 많이 해야함... 봐도봐도 헷갈리고 변수도 어떻게 줘야할 지 많이 생각해야하는 부분
그리고 오타주의
4. On/Off 스위치 전등 예제
스위치를 on/off하면서 방의 밝기도 조절해보자.
script, body 태그만 살펴보기
<script>
let flag=false;
function onOff(){
flag=!flag;
let img=document.querySelector("img");
let light=(flag)? "on":"off";
img.src="../../images/light/switch_"+ light +".png";
// let dark=document.querySelector("#dark");
let dark=document.getElementById("dark");
// getElementById 쓸 때는 아이디 앞에 # 안씀
let op=(flag)? 0:0.8;
dark.style.opacity=op;
}
</script><body>
<div id="wrapper">
<div id="aside"><img src="../../images/light/switch_off.png" onclick="onOff()"></div>
<div id="section">
<img src="../../images/light/room.jpg" alt="방">
<div id="dark"></div>
</div>
</div>
</body>- 방 밝기 조절하는 법:
방 이미지 위에background-color: black;인 div를 덮고,opacity조절 (불 켰을 때 0, 불 껐을 때 0.8 정도로) - 스위치 움직이는 법:
문서 내의 스위치 이미지의 src값을 기존 것과 '반대 이미지'로 교체
스위치 on/off가 이분법적이기 때문에 T/F 논리값 사용가능 - 껐다 켰다는 false↔true 이고 그 말은 false↔not false
이는 논리연산자! (not)으로 나타내어flag=!flag로 표현 가능
let flag=false; // 삼항연산자가 이 논리값에 의해 on/off 반환을 결정하므로 이 값을 변수로 둠
function onOff(){
flag=!flag;
let img = document.querySelector("img");
let light=(flag)? "on":"off";
img.src="../../images/light/switch_"+ light +".png";
}느낀 점
전역변수 하나를 여러 함수에 쓰려니 머리가 복잡해졌다. 이것저것 신경쓰다보니 괜히 어수선해지고 복잡해져 조금씩 잡혀가던 코드들도 엉망이 되는 것 같았다. 그래서 한 가지 함수를 정리할 때는 일단 그 함수에만 집중하고 마무리 지었더니 문제 없이 여러 개 모두 잘 실행시킬 수 있었다. 당황하지 말고, 조급하지 말자!
5. JS 이벤트 핸들러
배운 내용
이벤트 핸들러이벤트가 발생했을 때 실행될 함수- 웹 페이지에서 이벤트란 사용자가 발생시키는 마우스 클릭, 키보드 입력, 스크롤 등과 같은 행위를 의미
alert()브라우저 화면에 작은 팝업창을 띄우는 함수
안에 넣은 문자열을 그대로 보여줌
주요이벤트
onclickondblclickonmouseover마우스 포인터가 대상에 올려졌을 때onMouseout마우스 포인터가 대상을 벗어날 때onchangeinput 요소 (데이터)가 변경되었을 때onload브라우저에서 문서를 읽을 때onfocusinput 요소에서 대상에 커서가 들어올 때onblurinput 요소에서 대상에 커서가 벗어났을 때onkeydown키를 눌렀을 때 바로 발생onkeyup키를 눌렀다 손을 뗐을 때 발생
키보드 이벤트는 문서 전체가 대상
브라우저 창 안 어딜 클릭했든 상관없이 키보드 입력이 감지
느낀 점
예제를 다루다보면 onclick을 굉장히 많이 쓴다...
6. MySQL sql 기초
배운 내용
SELECT * FROM [테이블명] WHERE text IN (1, 2, 3);
SELECT * FROM [테이블명] WHERE text=1 OR text=2 OR text=3;SELECT * FROM [테이블명] WHERE number BETWEEN 1 and 3;
SELECT * FROM [테이블명] WHERE number>=1 and number<=3;SELECT * FROM [테이블명] WHERE text LIKE '%K%';%K% K가 들어가는
K$ K로 시작하는
$K K로 끝나는
SELECT * FROM [테이블명] WHERE text IS NULL;null은 값이 아니기 때문에 =을 쓸 수 없음
limit 시작행 번호, 개수
select * from emp order by sal desc limit 1,1;
두번째 높은 급여자
select * from emp order by sal desc limit 0,1;
첫번째 높은 급여자데이터 부분 조회 limit과 offset
급여가 낮은 순으로 정렬된 상태에서, 상위 2명은 제외시키고 3번째 부터 시작하여 5명의 이름, 급여, 부서번호를 출력하시오
select ename, sal, emptno from emp order by sal asc
limit 5 offset 2; (상위 2명 제외 `offset` 그 다음 5명만`limit` 출력)다중 order by
SELECT * FROM [테이블명] ORDER BY 열1 ASC/DESC, 열2 ASC/DESC, ...;핵심포인트
order by asc오름차순
기본값이 오름차순이기 때문에 ASC는 생략 가능order by desc내림차순
느낀 점
javascript를 하느라 sql문 복습을 소홀히 했더니 간단한 쿼리문도 다 잊어버려서 예제를 푸는데 꽤나 애를 먹었다. 편식하는 식습관이 몸에 좋지 않은 것처럼 공부편식도 개발적 성장에 좋지 못하다는 것을 다시금 느낄 수 있었다. 조금씩이라도 매일 매일 골고루 복습하는 습관을 길러야겠다.
7. MySQL DDL-데이터 정의어
배운 내용
- Data Definition Language
- 데이터 생성, 수정, 삭제 등 데이터의 존재와 관련
핵심포인트
CREATE데이터베이스, 테이블 등 생성ALTER테이블 수정DROP데이터베이스, 테이블 삭제
create table member(id varchar(20),pwd varchar(64),email varchar(25));
show tables; 테이블(데이터) 확인
desc member; 구조 확인
<컬럼 추가하기>
문자 20자 수용가능한 name컬럼 추가하기
alter table member **add** name varchar(20);
<테이블명 변경>
member -> membership 바꾸고싶을 때
**rename** table member **to** membership;
<컬럼명 변경>
pwd->pass 바꾸고싶을 때
alter table member **change** pwd pass varchar(64); //크기도 명시
<컬럼 용량 추가>
email컬럼의 varchar(25)를 (35)로 늘리고 싶을 때
alter table member **modify** email varchar(35);
<테이블 제거하기>
**drop** table membership;느낀 점
'삭제''초기화' 등 DDL은 아주 무서운 언어다.. 조심!
아이들의 가능성을 믿었던 마음 그대로, 이제는 나의 가능성을 믿고 나아가는 중입니다.🌱