개발일기

24.02.23 html css js 연습 1일차

빛나는맛과탕탕 2024. 2. 23. 12:31
반응형

 

//추가하기, push() 뒤에서, unshift 앞에
console.log('before :'+myArray);
myArray.unshift('orange');
console.log('after :'+myArray);

----------------------------------
before :1,3.14,true,banana,3.14,true
after :orange,1,3.14,true,banana,3.14,true

 

//array in array

const myArray = [1, [3.14, true, 'banana', 3.14], true];

// console.log(myArray);
console.log('before :'+myArray);
const value = myArray.shift();
console.log('shift :'+value);
console.log('after :'+myArray);


//지우기
console.log('before :'+myArray);
const value1 = myArray.pop();
console.log('pop :'+value1);
console.log('after :'+myArray);



-----------------------------------------------

before :1,3.14,true,banana,3.14,true
shift :1
after :3.14,true,banana,3.14,true
before :3.14,true,banana,3.14,true
pop :true
after :3.14,true,banana,3.14

 

//array in array

const myArray = [1, [3.14, true, 'banana', 10], 'apple'];
// console.log(myArray);

// 지우기
console.log('before :'+myArray);
const value = myArray.pop();
console.log('pop :'+value);
console.log('after :'+myArray);

---------------------------------------------------------
before :1,3.14,true,banana,10,apple
pop :apple
after :1,3.14,true,banana,10

 

//array in array

const myArray = [1, [3.14, true, 'banana', 10], 'apple'];
// console.log(myArray);

for(let i= 0; i < myArray.length; i++){
    console.log(myArray[1][i]);
}

-------------------------------------
3.14
true
banana

 

//array in array

const myArray = [1, [3.14, true, 'banana', 10], 'apple'];
// console.log(myArray);

for(let i= 0; i < myArray.length; i++){
    console.log(myArray[i]);
}

----------------------------------
1
[ 3.14, true, 'banana', 10 ]
apple

 

//array in array

const myArray = [1, [3.14, true, 'banana', 10], 'apple'];
console.log(myArray);


---------------------------------
[ 1, [ 3.14, true, 'banana', 10 ], 'apple' ]

 

 

const myArray = [1,2, 'apple', 'banana', 3.14, true];

console.log('myArray length:' +myArray.length);
console.log(myArray);

-----------------------------------------
myArray length:6
[ 1, 2, 'apple', 'banana', 3.14, true ]

 

<!DOCTYPE html>
<html>

<head> 
 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  
  <link href="main.css" rel="stylesheet" type="text/css" />

  <h1 id='grade'>    
    </h1>

    console.log('1 == 1: '+(1 == 1));
    console.log('1 == 2: '+('1' == 1));   
    
  <script>
      let k = true;
      k = false;
      console.log('k : '+k);
      console.log('k type: '+ typeof(k));      
    </script>
      
  <style>
    div#outer {
      display: inline-block;
      background-color: blueviolet;
      margin: 50px;
      border: 3px solid #ff0000;
    }
    div@inner {
      display: inline-block;
      background-color: aqua;
      margin: 1000px 10px 40px 100px;
      padding: 50px 10px 40px 100px;
    }
  </style>
  
</head>

<body>

  
  
  <div id="outer">
    <div id="inner">
      HELLO
    </div>

    
  </div>
  
  <hr>
  
  <img src="https://www.gigabyte.com/FileUpload/Global/KeyFeature/1680/innergigabyteimages/kf-img.png" alt="그림1" height="100px" width="200px"/>
  
  <hr>  
  
  <!-- <ol>
  <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
    <li>네번째</li>    
  </ol>

  <hr> <!--수평 rule -->
  
  <!-- <ul>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
    <li>네번째</li>
  </ul> --> 
  <script src="script.js"></script>

  <div class="container mt-3">

    
    <div class="divclass" id="first">      
      <h1>H1입니다.</h1>           
    </div>
    
        <div class="divclass" id="second">      
      <h2>H2입니다.</h2>
    </div>   
    
          <div class="divclass" id="third">
          <h2>H3입니다.</h2>
        </div>


  <a href="https://www.google.com">구글</a>

 <h1>여기입니다.</h1> 
    

    <h1 id='h11'>여기입니다.</h1>
    <h1 id='h12'>요기일까?</h1>
    <h1 id='h13'>여긴가?</h1>
    <h1 id='h14'>여긴가?</h1>
     
    <h1 id='grade'>
       </h1>
      
    <script>

      
        const score = parseInt(prompt());

      const msg = (score >= 50) ? 'pass' : 'fail';
      document.querySelector('h1#grade').textContent = msg;
      
      //switch
      // switch (score) {
      //   case 100:
      //     document.querySelector('h1#grade').textContent = '완벽';
      //     break;
      //   case 90:
      //     document.querySelector('h1#grade').textContent = '충분';
      //     break;
      //   default:
      //     document.querySelector('h1#grade').textContent = '나머지';  
      // }
      //   if(score >=90) {
      //   document.querySelector('h1#grade').textContent = 'A';
      //   }
      // else if( score >= 80){
      //   document.querySelector('h1#grade').textContent = 'B';
      // } else{
      //   document.querySelector('h1#grade').textContent = 'C';
      // }
      
       const userMsg = prompt(); // 사용자 입력 : prompt()
       const userNumber = parseInt(userMsg); // 사용자 입력 문자열 --> 정수
      // const result = userNumber % 2;

      // if(result == 1){//홀수 
      //   msg = userMsg+"는 홀수입니다."
      // }
      // else { //짝수
      //    msg = userMsg + "짝수입니다."
        
      // }

      // document.querySelector('h1#h11').textContent = msg;
      
      
      // console.log("사용자가 입력한 메시지는 "+userMsg);
      // console.log("입력한메세지 "+userMsg); // debugging 용도
      
      // document.querySelector('h1').textContent = userMsg;      
      // document.querySelector('h2').textContent = userMsg;


      // const allh1 = document.querySelectorAll('h1');
      // allh1.forEach( (elem, index) => { elem.textContent = userMsg;});
        
      
      
      //const 한번 대입하면, 변경불가.
      //let : 일반 변수
      // let a = 10;
      // let b = 20;
      // let c = a + b;
      // const d = a * 10;

      // // 제곱
      // const e = 2 ** 3; 
      // console.log(e);
      
      
      // 2. type of --> 자료형 이름
      // console.log('hello의 자료형은 '+typeof("hello")); // string
      // console.log('4의 자료형은' + typeof("hello")); //string
      // console.log('3.14의 자료형은' + typeof(3.14)); 

      // console.log('string concat의 문자열 더하기 결과는' + '123'+5);
      //console.log('parseInt의 결과는' + (parseInt('123')+5));
      
      // 문자열을 숫자로 바꿔주는 함수.. parseInt(문자열) --> 함수
      
      // console.log('parseInt의 결과는 : ' +  parseInt('123')+5)
      
      
      //1. 출력 명령어 --> chrome --> 개발자도구 -->    console
      //console.log("이것은 자바스크립트입니다.?");
      
      //console.log(`이것은\n 자바스크립트입니다. by backtick`);
      // back-tick, 좌상단, 1전키 좌측 옆에 있는 
            
    </script>
    
  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer>
    
  </script>
</body>

</html>
반응형

'개발일기' 카테고리의 다른 글

24.03.10 python 기본 연습  (0) 2024.03.10
24.02.18 개발일기 node.js moudle 시스템  (0) 2024.02.18
23.11.14 개발일기 string 하드코딩  (0) 2023.11.14
23.11.10 개발일기 Calendarfragment viewmodel  (0) 2023.11.11
23.11.9 개발일기 Calendar labelmonth 달 한글로 출력  (0) 2023.11.09

'개발일기'의 다른글

  • 현재글24.02.23 html css js 연습 1일차

관련글

티스토리툴바