1. 학습한 내용
1)JavaScript
JavaScript 에서 배우는 명령어중
document.write('')의 경우에는 화면에 출력이 되어서 나오고
Console.log('')의 경우에는 마우스 우클릭-검사 를 하였을때 나오는 개발자 도구의 Console 부분에만 출력이 되는 차이를 가지고있다.
0과 1 사이의 숫자를 랜덤으로 출력하는 Math.random()
메시지를 출력하는 alert{''}
True/False 여부를 확인하는 confirm{'') true false
입력한 단어가 console 로그에 나오는 prompt('')
등이 있다.
특별히 중요한점으로는 입력하는 코드가
예를들어
alert(1); alert(2); alert(3);
이라는 코드를 입력하였을때 화면에 1이 나오고 2가, 그다음 3이 나오는 시간순서대로 나오게 되는데 이것은 프로그램 으로써 중요한 부분이다.
2)Number 숫자
이 중 간단한 사칙연산과 같은 + - * / 등을 연산자라고 하며
Math.random() , Math.floor() 등을 함수라고 칭한다.
3)String 문자열
입력할때 문자와 숫자는 구분을 하여야하는데 이때 '' 와 ""는 차이를 가지지 않는다.
자바스크립트는 코드를 한줄에 써야하며, 이때 줄바꿈을 하여야할때는 글끝에 (백슬래시) 를 하여 이어쓰거나
해당 문장전체를 `(백틱) 으로 감싸면 다른줄이어도 출력이 된다.
4)Variable 변수
변수는 데이터에 이름을 붙인것이다.
예전에는 var를 사용하였지만 let 이라는 코드가 나온이후로는 let을 쓸것을 추천받았다.
변수는 해당 변수에 대한 값을 지정하는것으로
위의 사진을 예로 들었을때
본래 가격 10000, 부가가치세율이 0.1일때 부가가치세는 부가가치세는 가격과 부가가치세율을 곱한 1000이다.
이를 코드로 적게되면
console.log(10000*0.1);
를 쓰게됬을때 1000 이라는 값이 나온다.
하지만 이 코드만 보았을때 10000이 무엇인지 알수없고 0.1이 무슨 의미인지를 알수없게된다.
따라서 이 각자의 숫자에 이름을 붙이는 것으로 변수가 되는데
let 가격 = 10000; //가격은 1만이다
let 부가가치세율 = 0.1; // 부가가치세율은 0.1이다
let 부가가치세 = 가격*부가가치세율ㅣ // 부가가치세는 가격과 부가가치세율을 곱한것이다
console.log(부가가치세);
이를 실행시키면
부가가치세는 가격*부가가치세율이 되고
가격은 10000, 부가가치세율은 0.1 이기때문에
1000 이 나온다는것을 알수있게된다.
5)버튼 만들기 및 다크모드 적용
마지막으로 button 버튼을 만들어 내는 수업을 통하여 웹페이지의 다크모드를 적용할수 있는것을 해보았다.
위와같은 코드를 넣는 것으로 다크모드 버튼을 만들어 낼수 있었는데. 이를 분해해보자면
"night mode 라는 이름의 button을 인풋한다. 이때 버튼을 1번 누르면 body항목의 배경화면은 black이 되고, body항목의 폰트색은 white 가 된다."
이다.
또한 아래의 다른 버튼의 경우
"day mode 라는 이름의 button을 인풋한다. 이때 버튼을 1번 누르면 body항목의 배경화면은 white가 되고, body항목의 폰트색은 black이 된다."
따라서 위의 night mode 버튼을 누르게 되면 아래와 같이 배경이 검정색으로 변하는 것을 볼수있게된다.
해당 기능은 현재 진행중인 웹페이지에서 확인이 가능하다
night mode 버튼과 day mode 버튼은 수업이 진행되면서 하나로 압축하게되었다.
2. 학습내용 중 어려웠던 점
오늘 배웠던 내용중 버튼을 만드는것이 가장 어려웠는데.
이는 그 전에 배웠던 head 에서 디자인을 하는 css와 다르게 body 내부에서 디자인, 스타일을 바꿀수 있다는 점이었다.
그래서 사용하는 용어 또한 조금씩 달랐기 때문에 코드를 짜도 작동이 제대로 하지 않는 등의 문제가 발생했을때는 당황을 많이 했다.
3. 해결방법
그러나 이번 시간에는 개발자 도구를 배웠고 console에 관해서도 알게 되었는데, 이것이 좋은점은 웹페이지에서 오른쪽 클릭을 하여 검사를 누르고 console 내용을 보았을때, 에러가 나면 전체코드중에 몇번째가 잘못되었다는 것이 표기가 되어서 그부분을 수정해가면서 확인을 할 수 있었고
또한 키보드 화살표를 누를경우 그 전에 실행해보았던 코드가 그대로 나와서 조금씩 수정해보면서 틀린점을 찾을수있었다.
4. 학습소감
JavaScript 의 경우 이름만 들어보고 생전 처음 접하는 수업이었기 때문에 생소한 점도 많고 어렵기는 했지만, 그 만큼 할수 없었던 것을 할수 있게 되어 성취감도 들었으며, 모르는 부분이 많기 때문에 배워야 할 점이 많다는 것은 두렵기도 하면서 기대가 되는 부분이 있어서 즐거웠다.
