티스토리 뷰
수업시간만으로 충분하다고 생각하지 말고 수업시간 외에 1시간정도 시간들여 연습하기!
틈틈히 내주는 과제도 열심히 하기!
홈페이지들(참고 사이트 : 디비컷)을 보고 어떻게 구현했을지 생각해보기
https://www.dbcut.com/bbs/index.php
스크립튼가? CSS인가? 어떻게 만들었지?
로직 > 스크롤을 해서 컨텐츠가 하단에 있을때 움직임을 주어라
window height : 786
content : 800
스크롤양 : 800
스크롤양을 비교하면 컨텐츠 위치를 알수잇음
786 < 800px
801 < 800px
<div style = "opacity:0"></div>
if 801 < 800px
<div style = "opacity:1"></div>
? : 대충 이런 식으로 동작하겠군! (단위 꼭 넣어주기! 그래야 동작함 500은 숫자지만 500px은 숫자가 아님 문자임)
+나중에 공부해서 코드 고치기0913
많이 볼수록 이런 로직들을 알아보는 눈이 생기고 쌓여서 트렌드(많이 사용되는 기능)를 알 수 있음
'대략 이런 식으로 만들어서 동작하겠구나'를 알아볼 수 있게 된다~
코드 자체가 어려운게 아니고 상황을 보는 것, 로직을 생각하는게 어려운 것!
데이터의 사용성을 높이기 위해 변수를 사용!
자바스크립트는 ''보다 ""를 쓰는게 더 좋다.
예약어로 변수 선언하지 않기!
키워드와 공백 문자 사용 X
숫자로 시작할 수 없음
특수기호 _와 $만 가능
CSS : let green-data-icon
JavaScript : let greenDataIcon
변수명을 맨 처음 단어는 소문자 두번째부터 대문자로 작성 camel 표기법
+
스코프(Scope)
스코프(Scope)란 변수에 접근할 수 있는 범위, 유효범위
자바스크립트에선 스코프는 2가지 타입
- global(전역) : 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있음
- local(지역) : 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없음
>전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고,
지역(자바스크립트의 경우 함수 내부)에서 선언된 변수는 지역 스코프를 갖는 지역 변수가 됨
HTML 에서 Javascript 로드하는 방법
Inline 방식 : 태그에 직접 기술 > 섞여있어 정보의 가치가 떨어짐
Script 방식 : <script></script> 태그를 만들어서 자바스크립트 코드를 삽입하는 방식 > html 태그와 js 코드를 분리할 수 있음
외부파일로 분리 : js를 별도의 파일로 분리 > 보다 엄격하게 정보와 제어를 분리 가능
script 파일은 head 태그 보다 페이지의 하단에 위치시키는 것이 더 좋은 방법이다.
데이터 타입에 따라서 쓸 수 있는 명령이 달라짐
추후 연습
(4.마우스와 키보드 이벤트에 대한 스크립트 실행 > 여기서 배워서 touch까지 작살내서
만들다만 그림판 끝장내서 완성하기!@@@)
+차이점 공부
.innerHTML
.innerText
.textContent
<body>
<!-- data_basic.html-->
<script>
var x = '30';
var dx = 70;
console.log(typeof (x+dx)); //string
</script>
</body>이렇게 ( )를 사용해서 묶어주기도 가능
<body>
<!-- data_basic.html-->
<script>
let blean = 70 > 30; //비교문
console.log(typeof blean); //boolean
console.log(blean);
</script>
</body>이렇게 아예 비교문 자체를 선언할 수도 있음.
자바스크립트 주석
<body>
<!-- data_basic.html-->
<script>
console.log(typeof blean); //boolean 코드 뒤 주석
console.log(blean); /* true,false */ /*괄호안이 주석*/
</script>
</body>
el.innerHTML = "<h2>산술연산자</h2>";
el.innerHTML = "10 + 30 =";이러면 "10 + 30 ="만 나옴
el.innerHTML이 마지막 줄로 덮어써져서 마지막 줄만 나옴
el.innerHTML = `<h2>산술연산자</h2>
10 + 30 =
`;이렇게하면 원하는데로 다 출력됨
백틱사용! ""로 그냥 줄바꿈을 하면 오류가 남
let a,b;
a = 10;
b = 30;
el.innerHTML = `<h2>산술연산자</h2>
10 + 30 = ${a + b}
`;변수 먼저 선언하고 값을 나중에 주는게 좋음
백틱을 사용할때는 변수를 ${}안에 사용하기!
// 산술연산자
let a, b;
a = 10;
b = 30;
el.innerHTML = `<h2>산술연산자</h2>
10 + 30 = ${a + b}<br>
10 * 30 = ${a * b}<br>
10 / 30 = ${a / b}<br>
10 % 30 = ${a % b}<br>
10 % 30 = ${a ** b}<br>
`;
// 할당연산자
a += b;
el.innerHTML += `<h2>할당연산자</h2>
a += b => ${a}<br>
a -= b => ${a -= b}<br>
a *= b => ${a *= b}<br>
a /= b => ${a /= b}<br>
a %= b => ${a %= b}<br>
`;
// 증감or감소연산자
a++;
el.innerHTML += `<h2>증감or감소연산자</h2>
a++ => ${a}<br>
`;
할당 연산자는
el.innerHTML += 이렇게도 쓸 수 있음 > 그럼 계속해서 덧붙여서 나옴
// 증감or감소연산자
a++;
a = a + 1; //무조건 1씩 증가 및 감소증감 연산자는 무조건 1씩 증가 2는 안됨
// 증감or감소연산자
a++;
el.innerHTML += `<h2>증감or감소연산자</h2>
a++ => ${a--}<br>
a-- => ${a}<br>
`; // a++; > 11
// 11 --(내릴거야) > 11
// --(내릴거야*이제야 계산*) > 11-1 > 10a++; //선 연산, 후 증가
++a; //선 증가, 후 연산
a--; //선 연산, 후 감소
--a; //선 감소, 후 연산
+
비교연산자
<과=가 뒤바뀌면 안된다
꼭 <(부등호) 다음에 =(등호)가 와야함!
<= (O)
=< (X)
+
Uncaught SyntaxError: Identifier 'x' has already been declared
identifier : 식별자
'유료강의 > 국비지원' 카테고리의 다른 글
| 웹퍼블리셔 기본 6일차 - 날짜함수, 제이쿼리 (0) | 2021.09.28 |
|---|---|
| 웹퍼블리셔 기본 5일차 - switch 문, selector, 날짜함수 (0) | 2021.09.27 |
| 웹퍼블리셔 기본 4일차 - while 문, for 문, 함수선언식, Math (0) | 2021.09.23 |
| 웹퍼블리셔 기본 3일차 - while 반복문, 조건문 활용 (0) | 2021.09.15 |
| 웹퍼블리셔 기본 2일차 - 삼항 조건 연산자, 조건문, 배열 (0) | 2021.09.14 |
- Total
- Today
- Yesterday
- vue
- git
- 깃
- 파이썬
- 드림코딩
- javascript
- 코딩앙마
- Python
- CSS
- TS
- 구름에듀
- js
- 김버그
- 저스트코드
- 코드잇
- 비주얼스튜디오코드
- 제로초
- 회고
- 스파르타코딩클럽
- 리액트
- React
- map
- vscode
- html
- Typescript
- scss
- 타입스크립트
- Til
- 자바스크립트
- 제이쿼리
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |