> 1. 학습한 내용

< 자바스크립트 기초 1 >
1. Visual Studio에서의 javascript와 웹에서의 javascript 간의 문법이 다름.
console.log()-> 코드 문제를 해결하거나 데이터 흐름을 추적할 때 요긴하게 사용하는 기능(디버깅)

• https://poiemaweb.com/js-hello-world 에 들어가면 매우 자세한 설명히 적혀있어 참고함. (출처 감사합니다.)
  

2. javascript는 사용자와 상호 작용하는 것이다.

• "<스크립트> </스크립트>" - visual stuio 에서 javascript를 시작하는 선택자

  

4. // 표시 -> 주석, 설명 달기 (밑의 캡쳐보드에 녹색부분)

5. operator -> 연산자 +,-,*,/ 등..

   

6. Math.xxxxxx (여기서 'Math'는 '객체')

   

7. console.log(Math.floor(Math.random()100))
   floor-내림, random-임의의숫자를, -까지의

• Number/문자열(string)
• 그리고, 기본적으로 javascript에선 문자열은 한 줄에 다 표현되도록 설계, 여러줄에 표시하려면 역슬래쉬를 사용해서 enter키 누르고 문자를 작성한다.(이렇게 하면 다른'열'에 작성됨.), `(백틱)은 다음 줄에 작성됨(다른 '행')
• 글자수 확인하기 -> console.log('xxxxxx'.length);
• 글자 바꾸기 -> console.log('xxxx yyyy'.replace('xxxx', 'kkkk')
• 문자 연산자와 산술 연산자는 다름. 모양은 같더라도 기능이 다르게 작동함.
  ex)console.log('1'+'1') / console.log(1+1)

  
  
  
  

12. style 이라는 '속성'에는 css 스타일 속성이 들어가도록 설계되어있다.

    
    

• https://www.google.com/search?q=CSS+style+%EC%86%8D%EC%84%B1&sxsrf=APq-WBvorhx5kiCyZnekRjMpv4ke2et0NQ%3A1648020107657&ei=i8o6YuTVJ6uwmAW6kILICA&oq=css+%EC%8A%A4%ED%83%80%EC%9D%BC&gs_lcp=Cgdnd3Mtd2l6EAEYATIHCCMQsAMQJzIHCAAQRxCwAzIHCAAQRxCwAzIHCAAQRxCwAzIHCAAQRxCwAzIHCAAQRxCwAzIHCAAQRxCwAzIHCAAQRxCwAzIHCAAQRxCwAzIHCAAQRxCwA0oECEEYAEoECEYYAFAAWABg9QtoAXAAeACAAQCIAQCSAQCYAQDIAQrAAQE&sclient=gws-wizdocument.querySelector
• https://www.google.com/search?q=html+%EA%B8%80%EC%9E%90%EC%83%89&oq=html+%EA%B8%80%EC%9E%90%EC%83%89&aqs=chrome..69i57j0i20i263i512j0i512l3j69i60j69i61j69i60.7838j0j7&sourceid=chrome&ie=UTF-8
• https://www.google.com/search?q=%3Cstyle%3E+%EC%BD%94%EB%93%9C&oq=%3Cstyle%3E+%EC%BD%94%EB%93%9C&aqs=chrome..69i57j0i30.8529j0j7&sourceid=chrome&ie=UTF-8
  인라인스타일(inline style, HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법.이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있음)과 내부스타일시트(internal style sheet,내부 스타일 시트를 이용하는 방법은 HTML 문서 내의 <헤드>태그에 <스타일>태그를 사용하여 CSS 스타일을 적용.) 그리고 외부스타일시트(external style sheet,외부 스타일 시트를 이용하는 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줌.외부에 작성된 이러한 스타일 시트 파일은 .css 확장자를 사용하여 저장됨.스타일을 적용할 웹 페이지의 <헤드>태그에 <링크>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용됨.이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있음.)를 사용해서 html을 여러 방식으로 디자인 할 수 있다.
  

14. 버튼 만들기, 경고창 띄우기, 다크모드 만들기

    버튼을 만든 것이다. 다크모드, 데이라이트모드.
    버튼을 누를 시, 경고창을 띄우는 코드작성.

15. 변수(Variable)
    변수는 데이터에 이름을 붙인 것!

    

> 2. 어려웠던 내용들

웹 상에서 '검사'->'console'기능에서 작업하는 것과 visual studio code 상에서 작업할 때 다른 문법을 사용하는 것이 지속적으로 헷갈렸다. 또한 적혀 있는 것을 보면 이게 어떤 것을 의미하는 코드인지는 알것 같기도 하나, 백지에 내가 원하는 모습을 구현하기 위해 코드를 적는 것은 마음처럼 빨리빨리, 그리고 잘, 되지 않아 답답하다. '첫술에 배부르랴'라는 말이 있기는 하다만, 그래도 첫술에 배가 부르고 싶은 것은 사람의 욕심인가... 그리고 대문자, 소문자를 어떻게 쓰느냐에 따라서도 코드가 적용되기도 하고 안되기도 하는 건 좀... 너무 까다로운거 아닌가 싶기도 하다. 물론 대문자를 써야되는 경우와 소문자를 써야되는 경우가 달라 그걸 구분하도록 설계되어 있기에 그렇다는 것은 알지만... 그래도 좀;; 그리고 스타일 시트 적용하는게 너무 복잡했다. 방법도 여러가지라서 외울게 쌓이는 느낌...(하악..좋...좋아!)(?)

> 3. 해결방법

배운 내용들을 메모장에 모두 옮겨 적어가며 용어와 기능별로 구글에서 검색하여 친절한 분들이 여러 사이트들에 기록해놓은 설명과 자료를 보며, 또 그 분들이 내놓은 예제들도 적용해보며 연습에 연습을 거듭하고 있다. 일상 생활에서 쓰이는 '언어'와 마찬가지로 부딪치고 깨지면서라도 계속 연습을 거듭하는 것이 정답이라고 생각한다. 그리고 한번 작성해놓고는 화면을 두개를 띄워놓고 다른 사람들과 어떻게 다른지도 계속 첨삭, 분석하고, 더 나아가서는 '여기는 이렇게 해보면 안되려나?'와 같은 마인드맵 형식으로 계속 사고를 확장해 나가다보면 가까운 시일내에 '내것'으로 만들 수 있지 않을까.

이런식으로 style 관련 시트들을 찾아보기도 했다.

> 4. 학습소감

즉각즉각 입력하는 코드값이나 문법에 따라 웹페이지가 바뀌는 것은 무언가를 해냈다는 성취감이 계속 들게 만들어주어서 좋은 것 같다. 이래서 컴퓨터프로그래밍에 매력을 느끼는게 아닌가 싶기도 하다. 즉각적인 feedback이 있기 때문에. 하지만 언어가 마찬가지로 사용하는 것과 그 안의 용어와 지식을 기억하고 배우는 것은 매우 다른 것처럼, 이 컴퓨터 속의 '언어'란 놈도 어디서 안보고 머리속에서 다 끄집어 내면서 무에서 유를 창조해내는 경지까지 가려면 앞길이 캄캄하다라는 생각이 들기도 한다. 하지만 현실의 언어를 계속해서 배우고 마스터하려고 노력하는 나로써는 이 디지털 언어들도 결코 놓치고 싶지 않다. 앞으로도 계속 여러 곳의 자료들을 찾아가며 공부를 해나가야겠다.