https://opentutorials.org/course/3085
WEB2 - JavaScript - 생활코딩
수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상�
opentutorials.org
JavaScript란
동적(다이나믹)으로 움직이게 할 수 있는 웹 페이지로 구현 가능(사용자와 상호 작용)
웹페이지 내 [버튼]을 넣고 밝은 상태에서 night 버튼을 누르면 웹페이지가 어둡게
어두운 상태에서 day 버튼을 누르면 웹페이지가 밝게 동작하도록 코딩.
검색해보니 멋지게 만들어진 웹사이트 들이 많다.
//html 과 javascript 차이점
html은 정적이고 1+1 그대로 1+1 출력
javascript는 동적이다. 1+1은 2로 계산되어 출력
//이벤트 = 사건
웹페이지 내 경고, 알림
console 을 통해서 바로 자바 안에서 계산, 측정이 가능
alert(' 문자열').length
//데이터 타입
숫자와 연산자
+ - * /
.length 문자열 개수 세기
.toUpperCase 알파벳 소문자를 대문자로
.indexOf 몇 번째 문자열인지 숫자로 표시
.trim 문자열 내 빈칸 없애기
1 숫자
"1" 문자열
1+1 = 2 출력
"1"+"1" = "11" 출력
//변수와 대입 연산자
var name = "이름"
"+name+" -> 콘솔로 한번에 n개 변경 가능
//웹브라우저 제어
css 스타일을 통해서 웹페이지 배경색과 글자색 선언
//CSS 복습
<div> </div> 무색, 무취 한 단락을 쓰는 태그
<span> </span> 무색, 무취 단락을 쓰지 않는 태그
.문자열 -> 클래스 선언
#문자열 -> id 값 선언
클래스 < ID
우선순위
1) ID
2) Class
3) Tag
//제어할 태그 선택하기
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
//조건문 예고
토글, 비교 연산자 배우기
더하기 +
빼기 -
곱하기 *
나누기 /
//비교 연산자와 boolean 데이터 타입
참일때 true, 거짓일때 false 처리 데이터 타입인 boolean
//조건문
if 문을 통해서 해당 코드가 값과 동일한 true 일때 어둡게 처리
해당 코드가 값과 다른 false 일때 밝게 처리
//리펙토링(중복 제거) =? 퇴고
유지보수, 코드의 간결함, 중복 제거
(팁) 다중 선택 : 해당 영역 드래그 후 Ctrl + D
//배열 Array
배열은 [ 문자열, 문자열] 로 구성
추가 시 push
개수 세기 .length
//반복문 Loop
<script>
document.write('<li>1</li>');
var i = 0;
while(i < 3){ i가 3보다 작을때 아래를 작성한다.
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i + 1; i+1 -> 다시 i 가 된다.
}
document.write('<li>4</li>');
</script>
//배열과 반복문 활용
(검색 지향 프로그래밍) --> 구글링
console 에서 쉬프트 + 엔터 시 실행하지 않고 다음 줄 바꿈
위쪽 화살표 이전 코딩 다시 나타남
//함수
function + 이름(인자)
{
}
//매개변수(parameter)와 인자(argument)
함수 안의 매개체인 변수값과 그것을 출력 해주는 인자 값 --> return 안에 넣어줌
//객체 쓰기와 읽기
"이름." 객체로 지정하고 객체를 쓸 수 있음
객체 생성
{
딱지 : 딱지명
}
콘솔 내 로그 확인
console.log(파라미터값);
객체에 함수도 담을 수 있음
객체.함수 = function()
{
}
메서드와 프로퍼티:
객체에 소속된 함수 = 메서드
객체에 소속된 변수 = 프로퍼티
//파일로 쪼개서 정리정돈하기
스크립트 태그 제외한 컬러 코딩을 파일명.js 로 복사
<script src = "파일명.js "></script> => 유지보수, 명확
ㄴ 두번 저장을 하는데 캐시를 저장하기 때문에 서버비용 및 시간 절약 가능
//라이브러리와 프레임 워크
다른 웹에서 자신의 부품을 조립 해서 만드는 생상하는 과정
|
Library |
FrameWork |
|
다른 사람이 잘 정리한 부품을 사용하기 |
프레임 워크 안에서 만드는 느낌 |
[JQuery 라이브러리]
반복문을 한줄 코드로 가능
$('a').css('색상', 파라미터);
tip) ctrl + / 하면 해당 드래그 영역 주석 처리
//UI 와 API
ui : User Interface
api: Application Programming Interface
//JavaScript를 마치며
많은 개념을 배웠지만 정작 쓰는 것은 초반이 많다.
많은 것을 코딩하기 보다는 쉬운 것부터 천천히 실행하라.
한번에 하지 말고 조금씩 살을 붙이고 검색을 통해서 필요한 함수, 태그, 라이브러리를 활용하자.
//참고 할 것(객체, 태그, 툴)
documet 객체
DOC
window
ajax
cookie(리로드 되어도 가능한)
offline web application
webRTC (화상 통신)
speech(음성 인식, 정보 전달)
webGL(3차원 게임)
webVR(가상현실)
자바스크립트를 통해서 새로운 언어와 함께 웹사이트를 직접 만들어 봐야 겠다는 생각이 들었다. 어떤 모습을 해야 할지와 어떤 기능까지 구현할지 정하는 설계가 필요하고 다소 시간이 필요했다.
웹사이트를 만들면서 아래와 같은 조건과 기획들이 필요해 보입니다.
-심플하고 꼭 필요한 기능만 넣자
-그림을 그리지 못하니 평소 가지고 있거나 사진을 jpg 형식으로 넣어서 용량 문제를 없애야 하니 압축시켜서 업로드 하자.
-하나씩 구현하고 힘든 부분은 라이브러리를 찾아서 넣어보자.
-단순히 블로그나 wix와 같은 무료 웹사이트 를 통해서 만드는 거보다 웹의 내부구조를 구현하면서 배우자.
-막히는 부분은 해보고 나서 안되는 경우 검색을 해보고 그래도 안되는 경우 지인의 도움을 얻자.
비개발자인 저로써는 시간이 필요하겠지만 추후 웹사이트 제작 후 다시 한번 포스팅을 할 예정입니다. :)
방문해주셔서 감사합니다.
'코딩 ⌨' 카테고리의 다른 글
| [코딩공부] Ajax 를 배우며 (0) | 2020.06.20 |
|---|---|
| [코딩공부] html & CSS 기초 배우기 (0) | 2020.06.12 |
| 다시 시작한 코딩 공부 (0) | 2020.05.29 |
