자바스크립트 - 01

월요일좋아·2022년 9월 5일
js
0

JavaScript

목록 보기
1/6

수업용 블로그 : https://blog.naver.com/drv983

자바스크립트는 웹 브라우저에서 실행이 된다.

alert

에러메세지

문자열(홑따옴표, 쌍따옴표 동일)

HTML 문서에 Script 삽입 , 외부 링크 하기

https://blog.naver.com/drv983/222752617638

자바스크립트는 <script> ~ </script> 사이에 작성하며, 보통 <body>태그의 가장 아래쪽에 사용함

변수 let , 상수 const

변수를 선언할때는 let 사용
https://blog.naver.com/drv983/222752619388

const로 만든 상수는 값을 변경할 수 없음.

기본 데이터 타입

https://blog.naver.com/drv983/222752620531

typeof : 인수의 자료형 반환

제곱표시 : **

문자열 + 숫자 => 문자열

단, + 일때만 해당되고 나머지 -, / ,* 는 문자열 과 계산시 숫자로 바뀌어서 계산됨

Boolean 타입

true / false

null

값이 없음.(값이 없다는 데이터가 들어있음)

undifined

아예 아무런 값도 넣은적이 없음.

대화상자 함수 alert, prompt, confirm

https://blog.naver.com/drv983/222752630374

prompt

  • prompt(문자열, [디폴트값])

confirm

confirm(문자열질문?)
확인 : true 리턴
취소 : false 리턴

형변환(type변환)

https://blog.naver.com/drv983/222752642651

문자->숫자, 숫자->문자

기본 연산자와 수학

https://blog.naver.com/drv983/222752688950

증가감소 연산자

++, -- 는 1씩 증가, 감소 시킨다.

if와 '?'를 사용한 조건 처리

https://blog.naver.com/drv983/222752799011
조건이 참이면 괄호 안의 코드 실행
if(조건){코드}

객체 Objects

https://blog.naver.com/drv983/222753611099

  • 객체는 {} 로 생성

  • 예시

  • 객체 내부의 데이터 호출하는법
    객체명.키

  • 객체 내부의 값 추가 및 변경

  • 객체 내부에 객체 생성

  • 객체의 객체의 키 접근

DOM

브라우저 환경과 DOM 문서객체모델

https://blog.naver.com/drv983/222754614627

DOM 트리 tree : https://blog.naver.com/drv983/222754801019

태그 객체 선택

    1. id 선택

    1. class 및 일반태그 선택

// 2. class 및 일반태그 선택시
        const h1 = document.querySelector('h1');
// 클래스는 앞에 . 을 붙임
        const second = document.querySelector('.second');
    1. 여러 개 선택


      lis

  • getAttribute (값을 받아오는것)

  • setAttribute (값을 바꾸는것)

DOM selectors (2)

https://blog.naver.com/drv983/222754814941

클래스를 이용한 속성 바꾸기

  • remove : 클래스 제거(효과 제거)
    add : 클래스 추가(효과 적용)

  • toggle

  • textContent

  • onclick : 버튼을 클릭하면 "..." 내부의 자바스크립트가 실행이 된다.

 <button onclick="h1.classList.toggle('cool')">클릭!</button>

함수 function

https://blog.naver.com/drv983/222753078561

function 함수이름(매개변수){
실행코드
}

  • 응용
// 버튼을 클릭했을때 사용할 함수를 미리 만듦
        function clickEvent(){
            console.log('클릭했음!');
            h1.classList.toggle('cool');
        }

// style태그 내의 onclick에 함수를 넣어서 적용
<style>
<button onclick="clickEvent()">클릭!</button>
</style>

(실습1) 주사위게임

app.js파일과 index.html파일 연결 : <body>태그 내에 <script src="app.js"></script> 넣기

<body>

    <div class="container">
      <h1>Refresh Me</h1>

      <div class="dice">
        <p>Player 1</p>
        <img class="img1" src="images/dice6.png">
      </div>

      <div class="dice">
        <p>Player 2</p>
        <img class="img2" src="">
      </div>

    </div>

    <script src="app.js"></script>
  </body>
  • js파일에서 변수 지정
    <img class="img1" src="images/dice6.png"> 이용
const img1 = document.querySelector('.img1');
const img2 = document.querySelector('.img2');

const h1 = document.querySelector('h1');
  • Math.random()과 Math.floor()이용해서 랜덤 숫자가 리턴되도록 함
// 정수 1에서 6까지 랜덤숫자 만들기
// floor : 소수점은 버려준다.

let random1 = Math.floor(Math.random() * 6) + 1;
let random2 = Math.floor(Math.random() * 6) + 1;
console.log('랜덤1: ' + random1, '랜덤2: ' + random2)
  • if문을 이용하지 않고 간단하게 다이스 숫자에 맞춰 img파일 바꿔줄 수 있음.
img1.setAttribute('src', 'images/dice' + random1 + '.png');
img2.setAttribute('src', 'images/dice' + random2 + '.png');
  • if - else if 문으로 승부 결과에 따라 h1의 값 바꾸기
// 누가 이겼는지 player1 player2 => if else 문으로
// const h1 = document.querySelector('h1');로 변수 설정 해줘야함
if(random1 > random2) {
    h1.textContent = '🎲Player 1 wins!'
} else if(random1 == random2) {
    h1.textContent = '🎲Draw!'
} else {
    h1.textContent = '🎲Player 2 wins!'
}

(실습2) 백그라운드 생성기

  • input태그에 onchange=""
<body id="gradient">
	<h1>벡그라운드 생성기</h1>
    <!--  <-- 뭔가 바뀌었을때 따옴표 안의 내용이 실행이 됨. -->
	<input onchange="setColor()" class="color1" type="color" name="color1" value="#00ff00">
	<input onchange="setColor()" class="color2" type="color" name="color2" value="#ff0000">
	<h2>Current CSS Background</h2>
	<h3></h3>
	<script src="app.js"></script>
</body>
  • CSS파일 body태그의 background참고
body {
	font: 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    top: 15%;
	background: linear-gradient(to right, red , yellow); /* Standard syntax */
}
  • 태그객체명 설정
// 태그객체 선택(사용할 객체들)
const h3 = document.querySelector('h3');
const color1 = document.querySelector('.color1');
const color2 = document.querySelector('.color2');
const body = document.querySelector('body');
  • setColor() 함수 생성, 백틱을 이용해 값 적용
// 이벤트 색 입력창을 선택해 색을 바꿨을때 !
// background: linear-gradient(to right, red , yellow);
function setColor() {
    body.style.background = `linear-gradient(to right, ${color1.value} , ${color2.value})`;
    // 백그라운드에 실제 적용된 색을 표시한다.
    h3.textContent = body.style.background;
}
profile
월요일좋아
다음 포스트

자바스크립트 - 02

0개의 댓글