Notice
Recent Posts
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
관리 메뉴

공부기록용

바닐라 JS로 크롬 앱 만들기(06) 본문

📚강의록📚/노마드)Javascript

바닐라 JS로 크롬 앱 만들기(06)

과부하가즈아 2023. 6. 29. 16:33

https://nomadcoders.co/javascript-for-beginners/lobby

 

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

Javascript For Beginners

nomadcoders.co

 

🔴Math

🔴createElement()

🔴.appendChild()

Math

Math.random()_0보다 크거나 같고 1보다 작은 무작위 숫자(random number)를 반환합니다.

임의의 부동 소수점을 반환한다.

반환된 부동 소수점은 0부터 1 미만이다.

즉, 0은 포함되지만 1은 포함되지 않는다.

Math.round()_인수로 전달받은 값을 소수점 첫 번째 자리에서 반올림하여 그 결괏값을 반환합니다.

인수의 소수점 이하를 반올림한 정수를 반환한다.

Math.round(10.49);  // 10

Math.round(10.5);   // 11

Math.round(-10.5);  // -10

Math.round(-10.51); // -11

Math.ceil()_인수로 전달받은 값과 같거나 큰 수 중에서 가장 작은 정수를 반환합니다.

인수의 소수점 이하를 올림한 정수를 반환한다.

Math.ceil(10.95);  // 11

Math.ceil(11.01);  // 12

Math.ceil(11);     // 11

Math.ceil(-10.95); // -10

Math.ceil(-11.01); // -11

Math.floor()_ 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수를 반환합니다.

인수의 소수점 이하를 내림한 정수를 반환한다. Math.ceil의 반대 개념이다.

 

양수인 경우, 소수점 이하를 떼어 버린 다음 정수를 반환한다.

음수인 경우, 소수점 이하를 떼어 버린 다음 -1을 한 정수를 반환한다.

Math.floor(10.95);  // 10

Math.floor(11.01);  // 11

Math.floor(-10.95); // -11

Math.floor(-11.01); // -12
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-sccale=1.0" />
    <link rel="stylesheet" href="CSS/style.css">
    <title>momentum App</title>

</head>

    <body>
        <form class="hidden" id="login-form">
            <input required maxlength="15" type='text' placeholder="what is your name?" />
            <input type="submit" value="Log In" />
        </form>
        <h2 id="clock">00:00:00</h2>
        <h1 id="greeting" class="hidden"></h1>
        <div id="quote">
            <span> </span>
            <span> </span>
        </div>    
        <script src="js/clock.js"></script>
        <script src="js/greeting.js"></script>
        <script src="js/quotes.js"></script>
    </body>

</html>
const quotes = [
    {
        quote: 'I never dreamed about success, I worked for it',
        author: 'Estee Lauder'
    },
    {
        quote: 'Do not try to be original, just try to be good.',
        author: 'Paul Rand'
    },
    {
        quote: 'Do not be afraid to give up the good to go for the great',
        author: 'John D. Rockefeller'
    },
    {
        quote: 'If you cannot fly then run. If you cannot run, then walk. And if you cannot walk, then crawl, but whatever you do, you have to keep moving forward.',
        author: 'Martin Luther King Jr.'
    },
    {
        quote: 'Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.',
        author: 'Thomas Edison'
    },

];

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");


const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)]; // quotes를 무작위로 데려옴

quote.innerText = todaysQuote.quote; // span안에 무작위로 데려온 todaysQuote의 quote요소를 넣어줌
author.innerText = todaysQuote.author; // span안에 무작위로 데려온 todaysQuote의 author요소를 넣어줌
const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");


const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)]; // quotes를 무작위로 데려옴

quote.innerText = todaysQuote.quote; // span안에 무작위로 데려온 todaysQuote의 quote요소를 넣어줌
author.innerText = todaysQuote.author; // span안에 무작위로 데려온 todaysQuote의 author요소를 넣어줌

background.js를 추가 해줄 것

<script src="js/background.js"></script>
const images = ["00.jpg","01.jpg","02.jpg","03.jpg","04.jpg", "05.jpg"];

const randomImage = images[Math.floor(Math.random() * images.length)];

const bgImage = document.createElement("img");

bgImage.src = `img/${randomImage}`;

document.body.appendChild(bgImage);

> 배열로 만들어서 랜덤하게 출력되게 하는 것

> const randomImage = images[Math.floor(Math.random() * images.length)];

>> Math.random()으로 부동 소수점을 반환받는다. -> 0.21043932964564327 / 0.7622302957577392등등

>> * images.length를 해주면서 0.21043932964564327 * 6이 되고

>> Math.floor()로 소수점 이하를 내림한 정수를 반환한다. -> 0  2 3등등으로 반환

>> 그럼 그게 images[0]이면 00.jpg되고, images[2]면 02.jpg된다.

createElement()

html에서 직접 추가하지 않고 js에서 추가하는 방법 

.createElement( 'h1' )

> 생성

<h1></h1>
const bgImage = document.createElement("img");

> html에 <img>를 추가함

> 변수 bgImage에 저장

 

bgImage.src = `img/${randomImage}`;

> 요소 src의 속성 을 img값으로 설정

> 템플릿 리터럴( )을 사용하여 변수 ${...}값을 randomImage소스 경로에 동적으로 삽입

> 이것은 randomImage변수가 이미지 파일의 이름이나 경로를 가지고 있다고 가정

>> images[0]이면 00.jpg되고, images[2]면 02.jpg

>> 경로/파

.appendChild()

선택한 요소 안에 자식 요소를 추가

document.body.appendChild(bgImage);

> 요소를 HTML 문서의 요소 img에 자식으로 추가합니다. body메소드는 요소 의 끝에 요소를 appendChild()추가하는 데 사용됩니다 .bgImagebody

>> bgImage_html에 <img>추가한걸 body의 자식 요소로 넣겠다. 

.createTextNode()

선택한 요소에 텍스트를 추가

.createTextNode( 'My Text' )

> 는 My Text라는 문자열을 만듭니다.

'📚강의록📚 > 노마드)Javascript' 카테고리의 다른 글

바닐라 JS로 크롬 앱 만들기(08)  (0) 2023.07.10
바닐라 JS로 크롬 앱 만들기(07)  (0) 2023.07.10
바닐라 JS로 크롬 앱 만들기(05)  (0) 2023.06.29
바닐라 JS로 크롬 앱 만들기(04_2)  (0) 2023.06.28
바닐라 JS로 크롬 앱 만들기(04_1)  (0) 2023.06.28
'📚강의록📚/노마드)Javascript' Related Articles more
Comments