[개발일지1일차]JavaScrpit 1/3

1. 학습내용

• html:정적. 전자출판식, 정보
• css : (html 관련) 디자인
• javascript: 동적. 사용자와 '이벤트를 통하여' 상호작용

1) JavaScrpit의 특징

• 모든 웹 브라우저에서 작동한다
• 웹 브라우저에서 실행결과를 즉시 확인 할 수 있다.
  (마우스 '우측' 클릭-검사(ispect)-개발자도구-요소(elements,코드를 볼 수 있음)- 콘솔(console,요소에서 ESC 누름))
• 풀스택 웹 개발 뿐 아니라 다양한 용도의 프로그램을 만들 수 있다.
  (예: 게임, 어플 등)
• 다양한 자바스크립트 공개 API를 사용할 수 있다.
• 다양한 라이브러리와 프레임워크를 사용할 수 있다.
  (예를 들어 제이쿼리(j.Query)자바스크립트 라이브러리는 웹 사이트를 동적으로 개발하기 위해 필요한 여러 기능을 단 몇줄의 코드로 사용 할 수 있도록 만든 라이브러리이다.)

2) alert, confirm

2-1)alert: 경고창
예: alert('여러분 화이팅')

2-2) confirm : true, false (확인/취소)
예: confirm('여러분 화이팅')

3)데이터타입- 숫자와 문자열

3-1) 숫자

<참고1>
산술연산자

• (프로그래밍에서 더하기)

• (프로그래밍에서 빼기)
  *(프로그래밍에서 곱하기)
  / 는 (프로그래밍에서는 나누기)

<참고2> JavaScrpit에서 //는 '주석'이라고 표현함.
예를들어 console.log(1); // 정수
라고 표현한 경우 //이후의 언어는 보이지 않게 된다.
또한, 전체 주석 안에 한 줄 주석을 넣을 수 있다!

3-2) 문자열

<참고1>
문자는 "" (따옴표)로 시작함
"" 대신 '' 도 사용 가능

• JavaScrpit에서는 같은 열에 적어야 하지만, 만약 중간에 적다가 다음 열로 적어야 하는 경우에는

  console.log("Hello\
  World");
  console.log(Hello World);

  와 같이 \ (역슬래쉬) 또는 `` (역따옴표, 역따옴표에서 시작하여 역따옴표로 끝나야 가능)를 사용하면 가능하다.

<참고2>
오타: 'Hello world' 를 사진과 같이 'Hell World' 로 작성한 경우

console.log('Hell World'.replace('Hell', 'Hello'));

로 코딩을 하였을 경우 아래의 사진처럼 올바르게 나온다.

<참고3>
위의 열과 동일한 코드를 해당 열에 붙이기 위해서는
' Pg up'(화살표 위쪽)을 눌러주면 가능하다!

4. 변수/ 대입연산자/상수

예) x=1;
x 는 '변수(variable)' 라고 부름.
  (즉, 변수는 대입 연산자를 통해 값이 바뀔 수 있다는 뜻)
= 는 '대입연산자' 라고 부름
  (즉, 대입 연산자은 오른쪽 항의 값을 왼쪽의 변수에 대입한다. 라는 의미)


4-1) 변수
-var 는 변수 ('바뀔 수 있는 어떤 값')

4-2) 상수 (contrast)

' 상수' = 항상 바뀌지 않는다. 라는 뜻

1=2; 에서 1은 1이므로 error 표시가 뜬다.
따라, 1의 경우 상수(constant)라고 함.

5. 웹브라우저 제어

5-1) 버튼 생성

• 결과 'Hello' 버튼 생성

5-2) night와 day

- 원래 화면

- day 버튼을 눌렀을때

- night 버튼을 눌렀을때

2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들

   1) 2022.03.23 JavaScrpit 중 datatype.html 에서 콘솔을 사용하였을때 계속 적인 오류가 아래와 같이 발생하게 됨

   1-1) 콘솔에서 오류 표시 부분
   

   1-2) datatype.html에서 코딩한 부분

   

3. 해결방법 작성

   1-1) egoing 강사님께서 만드신 datatype.html 비교

   1-2) 콘솔에서 오류 표시 부분을 확인

   • 'missing ) after argument'
     부분에서 ')' 놓쳤는가 확인

   • datatype. html 부분에서 문자열에 오타 부분 확인

     1-3) 수정한 부분

     console.log('Hello World.replace('Hell', 'Hello');

   →

   console.log('Hello World.replace('Hell', 'Hello'));

   로 고쳤을 때
   아래와 같이 정확히 작동하는 것을 확인 할 수 있었다!!
   

4. 학습 소감
   2022.03.23 JavaScrpit(1/3) 수업에서는

   4-1)JavaScrpit 부분말고도 git hub에서 pages 중 본인의 도메인 주소를 만드는 부분이 어려워서 원격지원을 통하여 도와주셨는데 수업 도중에 어려운 부분이 있으면 고민하지 말고 teams 창을 통해 이야기를 해야겠다.

   4-2) JavaScrpit 부분에서는 앞서와 같이 2번의 오타로 인해 수업 후 40분 정도 소요되었었는데 강사님께서 주신 파일만을 의존하지 않고 오타를 찾는다고 시간이 더 걸린 부분도 있지만, 콘솔에서 오류난 부분을 보면서도 함께 강사님께서 주신 파일도 함께하면서 찾은 부분도 있어서 오타를 스스로 찾을 수 있도록 노력해야겠다.

   라는 생각을 하게 되었습니다.