1) 학습한 내용
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위텍스트를 클릭해보세요</p>
<script>
var heading = document.querySelector('#heading');
heading.onclick = function(){
heading.style.color = 'red';
}
</script>
</body>자바스크립트에 querySelector() 는 특정 name,id,class를 제한하지 않고 css선택자를 사용하여 요소를 찾는다. 같은 id 또는 class 일 경우 스크립트의 최상단 요소만 로직에 포함한다.
querySelector(#id) => id 값 id를 가진 요소를 찾습니다.
querySelector(.class) => class 값 class를 가진 요소를 찾습니다.querySelectorAll
querySelector와 사용 방법은 동일하며 선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환합니다. 반환객체가 nodeList이기에 for문 또는 forEach문을 사용한다.
아래 코드와 같이 ","를 사용하면 여러 요소를 한번에 가져올 수 있다.
querySelectorAll("#id,.class");Javascript 적용 위치
사진은 김소연 님이 작성하신 코드이다.
자바스크립트 적용법은 아래와 같이 작성한다.
<script src="자바스크립트 위치"></script>작성을 한 다음에 body 구간에 집어넣는데 보통은 /body 태그 바로 위에 놓는다. 이는 부트스트랩 자바스크립트를 적용시킬 때와 똑같은 방식이다.
document.write() 메소드
document.write() 메소드는 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력한다. 따라서 document.write() 메소드는 대부분 테스트나 디버깅을 위해 사용된다.
예제
<script>
document.write(4 * 5);
</script>하지만 웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 된다.
따라서 document.write() 메소드를 테스트 이외의 용도로 사용할 때에는 충분히 주의해서 사용해야 한다.
예제
<button onclick="document.write(4 * 5)">버튼을 눌러보세요!</button> var name = prompt("이름을 입력하세요")
document.write("<b><big>" + name + "</big></b>님 환영합니다.")표현식과 문장
표현식
자바스크립트에서 값을 만들어내는 간단한 코드
문장
하나 이상의 표현식이 모여 문장을 구성. 문장 끝에는 마침표를 찍듯이 세미콜론(;) 또는 줄밖무을 넣어서 문장의 종결을 나타냄
프로그램
줄바꿈으로 문장을 구분해 코드를 작성
키워드
await
break
case
catch
class
const
continue
debugger
default
delete
do
else
export
extends
finally
for
function
if
import
in
instanceof
new
return
super
switch
this
throw
try
typeof
var
void
while
with
yield
let
static
식별자
프로그래밍 언어에서 이름을 붙일 때 사용하는 단어. 주로 변수명이나 함수명 등으로 사용
- 키워드를 사용 안됨
- 숫자로 시작 불가
- 특수 문자는 _ 와 $만 허용
- 공백 문자를 포함할 수 없음
식별자를 만드는 일반적인 관례
- 클래스의 이름은 항상 대문자로 시작
- 변수와 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작
- 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자
식별자의 종류
구분 단독으로 사용 다른 식별자와 사용
식별자 뒤에 괄호 없음 변수 속성
식별자 뒤에 괄호 있음 함수 메소드
주석
프로그램 코드를 설명할 때 사용하며 프로그램 진행에는 전혀 영향을 주지 않음.
자바스크립트 주석
//을 입력함으로써 한 줄 주석을 표현
/와 /를 입력하여 여러 줄 주석을 표현 (/ 와 / 사이에 있는 몯느 문장은 실행되지 않음.)
출력
자바스크립트는 다른 프로그래밍 언어와 비교해서 출력 방법이 많고 복잡한 편
- 간단한 표현식 결과 확인하기
- 01 구글 크롬의 주소창에 about:blank를 입력해 빈 페이지로 들어가 단축키 Ctrl + Shift + i를 눌러서 개발자 환경을 띄우기
- 02 about:blank에서 [Console]탭을 클릭해 구글 크롬 개발자 도구에 진입. 이곳에 어떤 값을 입력하면 곧바로 그 결과가 출력 - 경고창에 출력하기
- 개발 전용 에디터를 사용할 때의 출력하는 방법
- alert() 함수를 사용하여 웹 브라우저에 경고창을 띄우기 - 콘솔에 출력하기
- console.log() 메소드 사용
자바스크립트 스타일 가이드
스타일 가이드란?
코딩 규칙을 스타일 가이드, 코딩 컨벤션, 코딩 스타일 ,표준 스타일 등으로 부름
코딩 규칙은 왜 필요할까?
자바스크립트는 다른 프로그래밍 언어에 비해 데이터 유형이 유연해서 오류 발생이 잦다.
오픈 소스에 기여하거나 누군가와 공유할 소스라면 더욱 깔끔한 소스가 중요하다.
팀 프로젝트를 진행한다면 통일된 코딩 규칙이 필요하다
코딩 규칙에 따라 작성된 웹 사이트는 유지 보수도 수월하고 그만큼 비용도 줄어든다.
- 코드를 보기 좋게 들여쓴다.
- 'tab'키나 '스페이스바'를 눌러 2칸이나 4칸 들여씀
- 최근에는 공백 2칸 들여쓰기를 많이 사용함.
- 세미콜론으로 문장을 구분한다.
- 세미콜론을 붙일 것을 권장함
- 소스는 한 줄에 한 문장만 작성하는 것이 좋다.
-
공백을 넣어 읽기 쉽게 작성한다.
-식별자나 연산자, 값 사이에 공백을 넣어 읽기 쉽게 작성한다. -
코드를 설명하는 주석을 작성한다.
- 한 줄 주석 : 스래시 2개 바로 뒤에 작성
- 여러 줄 주석 : 여는 기호를 맨 앞에 담는 기호를 맨 뒤에 넣고 그 사이에 주석 내용을 작성
- 주석 사이에 또다른 주석을 넣을 수 없음.
- 식별자는 정해진 규칙을 지켜 작성한다.
- 첫 글자는 반드시 영문자나 언더스코어(_), 달러 기호로 시작해야 한다.
- 두 단어 이상의 하나의 식별자를 만들 때 단어 사이에 공백을 둘 수 없다.
- 예약어는 식별자로 사용할 수 없다.
- 중괄호의 위치
for (let i = 0; i < length; i++){
const element = array[i]
}
for (let i = 0; i < length; i++)
{
const element = array[i]
}
자료형 이해하기
숫자형
숫자
- 정수 : 소수점 없는 숫자
-실수 : 자바스크립트는 실수를 정밀하게 계산하지 못함
- 자바스크립트는 실수를 정밀하게 계산하지 못한다.
문자열
작은 땅모표나 큰 땅모표로 묶은 데이터
논리형
- 참이나 거짓의 값을 표현하는 자료형. 불린 유형이라고도 함.
- 조건을 확인해서 조건이 맞으면 true, 맞지 않으면 false라는 결과갓 출력
undefined 유형
자료형이 정의되지 않았을 때의 데이터 상태
변수 선언한 하고 값이 할당되지 않은 자료형
null 유형
데이터 값이 유효하지 않은 상태
변수에 할당된 값이 유효하지 않다는 의미
배열
하나의 변수에 여러 값을 저장할 수 있는 복합 유형
자바스크립트는 데이터 유형이 유연하다. 즉, 변수의 데이터 유형이 중간에 바뀔 수가 있다.
불 자료형
자바스크립트에서는 참과 거짓 값을 표현할 때 불자료형을 사용
불 만들기
=== 양쪽이 같다
!== 양쪽이 다르다
> 왼쪽이 더 크다
< 오른쪽이 더 크다
>= 왼쪽이 더 크거나 같다
<= 오른쪽이 더 크거나 같다.2) 학습내용 중 어려웠던 점
이번 수업은 자바스크립트에 관한 개념이 소개되어졌다. 그 이외에는 이번 수업은 대체적으로 무난했었다.
3) 해결방법
이번 일을 계기로 자바스크립트에 관한 서적과 공부를 더 해야 할 필요가 있다. 누군가에게 의지하는 것은 안된다. 결국, 공부는 스스로 하는 것이기 때문이다.
4) 학습소감
첫 자바스크립트 수업인데 첫 시간부터 팀즈에 문제가 생겨서 수업이 제대로 진행되지 않았다. 거기에다, 강사가 자바스크립트를 제대로 다루지 못해 나는 자바스크립트에 관한 공부에 대해서 스스로 공부 해야 한다는 생각을 가지게 되었다. 그리고 이번 수업을 통해서, 프론트 엔드 뿐만 아니라 백엔드도 공부를 해야 한다는 생각을 가지게 된 나는 Django나 Node.js에 눈길을 가게 되었다. 사실 이전부터 백엔드를 공부해야 한다는 생각을 하고 있었다.
