[수업 2째주 3일차] JavaScript-1

19159 단어 자바스크립트JavaScript코딩기초개발자JavaScript

1. 학습일지

<script></script>

사이에 JS 코드를 입력
=> 웬만하면 Head 안에 입력할것.

-JS는 대소문자 구분 필요!!
- js는 동적인 언어로 실행할때 마다 계산해서 보여줌
:HTML과 CSS는 시간적 요소에 따라 생기는 건 아님

-promt();

<script>
prompt();
// 입력할 수 있는 팝업창이 뜸
//EX
prompt('윈도우창','입력창');
</script>

-alert();

<script>
alert();
// 경고창 처럼 팝업창이 뜸 괄호안에 원하는 값을 넣을 수 있음
//EX
alert('글자 입력');
</script>

alert(); 괄호안에 '' 혹은 "" 안에 입력하지 않은 것은 숫자로 처리된다.

<script>
alert();
//EX
alert('1+1');
//입력 시 숫자 2로 출력된다.
</script>

-console.log();
:화면에 로그를 출력해서 콘솔창에서 보여줌. 주로 코드가 실행이 잘되는지 확인할 때 쓰임.

<script>
console.log(1); //정수
console.log(1.5); //실수

 //Operator
     console.log(1+1); //2
     console.log(2-1); //1
     console.log(2*2); //4
     console.log(4/2); //2
      
 // 함수
   console.log(Math.random());   //리로드시 랜덤한 실수가 뜸     
   console.log(Math.floor(1.9)); //소수를 내림차순으로 해서 정수로 보여줌       
   console.log(Math.floor(Math.random()*100)); //랜덤하게 뜨는 실수에 100을
   곱해 정수로 나타나게 함.
   
//문자열   
    console.log('Hello World');
    console.log("Hello World");
    console.log(`Hello 
    World`);  // `` 기울어진 따옴표안에 적을 시 줄바꿈 가능함.

    console.log('Hello World'.length); //length는 ''안의 글자수를 숫자로 출력
    console.log('Hell World'.replace('Hell','Hello')); //처음에 적은 조건을 바꿔서 출력되게 함
    console.log('Hello '+'World'); 

    console.log('1'+'1');  //11로 출력됨. 각자 문자 취급해서.  

</script>

-console.log('Hello '+'World'); 입력 시 ''안에 띄어 쓸 만큼 띄어서 쓰지 않으면
HelloWorld 라고 붙여서 출력됨. 반드시 'Hello하고 띄우고' 닫아야 함.

-document.write();
:console.log와는 다르게 문서 그 자체에 입력되어 보여짐.
Html에 적어 출력되는 것과 같이 화면상에 출력됨.

<script>
         document.write(1+1); //2가 출력됨
         document.write('<br>'); //html에 있던 내용이 줄바꿈되어 출력
         document.write(Math.random()); //랜덤으로 소수가 화면상에 출력
</script>

-var 는 variable의 약자로 '변수(변하는수)'를 말함.
var a는 자바스크립트 엔진(자바스크립트 코드를 해석하는 도구)에게

"야, 이제 데이터 저장공간을 마련해! 이름은 a로 하고!" 라고 선언 하는것을 말함.

이런 것을 변수를 선언한다라고 표현함.

요즘엔 var보다는 let을 많이 씀.

<html>
   <body>
      <h1>Variable</h1>
      <script>
         var a = 1;
         a = 2;
         console.log(a); //이러면 정의한 수와 맞지 않아 에러뜸.

         let b = 1;
         b = 2;
         console.log(b); //이러면 정의한 수와 맞지 않아 에러뜸.
          //=은 대입 연산자, 1은 상수
      </script>

      <script>
         // 10000: 가격
         // 0.1: 부가가치세율 이라 정의 혹은
         let 가격 = 10000;
         let 부가가치세율 = 0.1;
         let 부가가치세 = 가격*부가가치세율;
         console.log(부가가치세); //계산한 값이 출력됨. 1000라고.
         
      </script>
   </body>
</html>

+추가로 배운 부분: 다크모드 만들기

우선 Html로 버튼 만들기

 <input type="button"  value="Night">

그런다음 input 태그 안에 onclick을 적음
onclick은 js이벤트를 실행시켜 준다.

 <input type="button"  value="Night" onclick="
         document.querySelector('body').style.backgroundColor = 'black'
         document.querySelector('body').style.color = 'white'
         ";>

-document.querySelector는 html에 태그를 지정할 수 있는 명령문이고, 안에 ''를 쓰고
태그명을 쓰면 된다. id와 class라면 스타일시트(CSS)작성할 때 쓰는 것과 동일한
#과 .을 쓰고 적으면 된다.

참고로 background-color는 CSS에서는 -을 쓰지만 JS는 -적을수 없기 때문에
color에 앞 c를 대문자로 써서 붙여 쓰면 적용된다. (backgroundColor)

반대로 환한 화면을 만들고 싶으면, 버튼 이름과 색상 명만 바꾸면 된다.

2. 학습내용 중 어려웠던 점 및 해결방법

위에서도 상술했다시피,
-console.log('Hello '+'World'); 입력 시 ''안에 띄어 쓸 만큼 띄어서 쓰지 않으면
HelloWorld 라고 붙여서 출력됨. 반드시 'Hello하고 띄우고' 닫아야 함.

이걸 몰라서 출력될때 띄어 쓰기가 안되어서 당황했으나 강사님께서 화면의 띄우신 부분을
자세히 보니 알수 있어서 다시 한번 입력해 출력해 보니 해결할 수 있었다.

추가로 console.log();에서 ()안에 내용을 줄바꿈해서 적으려면 역슬래쉬를 써도 되는데 그에
해당되는 키를 못찾아서 해맨것도 있었다. (\키임)

3. 학습소감

HTML과 CSS는 기존에 조금 알던 내용이 있어서 JS를 배우고 싶은 마음이 컸다.
이번 '대구 AI 스쿨'을 통해 처음부터 차근차근 배워 나갈 수 있어 좋았다.
특히 웹이나 스마트 폰 환경에서 '다크모드'를 자주 쓰기 때문에 관련 코딩을 꼭 배워보고 싶었는데 오늘 막간을 이용해 배울 수 있었던 점이 신기했고 해내서 뿌듯했다.

[PG] 조이스틱
[백준] 13414번

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage