728x90

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <style>
 </style>
</head>
<body>
    <script>
      const a=true;
      const b=false;

      document.write(a+"<br>");

      const c=null; //값이 지정되지 않음 -> 참조하는 값이 없음
      document.write(typeof(c)+"<br>");

      const d=undefined; 
      //변수 선언 후 값을 할당하지 않은 상태 -> 공간자체가 없는 상태
      document.write(typeof(d)+"<br>");   
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <style>
 </style>
</head>
<body>
  <script>
    const user={
      name:'kim',
      age:43,
      man:true,
    };
    const post={
      title:"제목",
      content:"내용",
      user, //user:user 뜻임 //키의 이름과 값에 들어가는 변수의 이름이 같다면 생략가능
    } 

    user.name===user['name'];
    console.log(user.name);  //kim
    console.log(user['name']); //kim
    console.log(user.man);
    console.log(post.user.age);

    const user2={
      name:'lee',
    }

    //user2='hello';
    user2.man=false; //속성은 변경 가능
    console.log(user2);

    delete user2.man;
    console.log('man' in user2);

  </script>
</body>
</html>

 

익명함수, 화살표 함수

 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <style>
 </style>
</head>
<body>
  <script>
    //함수: 목적있는 작업을 수행하도록 설계된 독립된 모듈
    /*function cal(a,b){
      return (a+b)*2;
    }
    const n=cal(1,2);
    const n2=cal(2,3);*/
  ////////////////////////////////////////////////////
  //익명함수: 함수를 변수처럼 사용하는 익명함수
    const cal = function(a,b){
      return (a+b)*2;
    }
    document.write(cal(1,2) +"<br>");
////////////////////////////////////////////

    function func(a){
      return a+3;
    }
    const func3=a=>a+3;

    const func2=()=>{
      console.log('hi');
      return a+3;
    }
    const func4=()=>console.log('hi');

    let n=()=>alert('hi');
    
    let n2=(a,b)=>{
      let msg=`${a}, ${b}`;
      return msg;
    }
    document.write(n2(3,4));

  </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <style>
 </style>
</head>
<body>
  <script>
   
    let n=[];

    for(let i=0;i<6;i++){
      let lotto=Math.floor(Math.random()*44)+1;
      for(let j in n){
        if(lotto==n[j]){
          lotto=Math.floor(Math.random()*44)+1;
        }
      }
      n.push(lotto);
    }
    n.sort(function(a,b){
      return a-b; // 오름차순
      //return b-1 = 내림차순
    });
    document.write(n);

  </script>
</body>
</html>
728x90
728x90

https://denim-era-2c8.notion.site/JAVA-9f5f41fd7f424a35a4bb039b6c49d77d?pvs=4

728x90

'Language > JAVA' 카테고리의 다른 글

[JAVA] 다형성 역할과 구현 ★  (0) 2024.03.10
[JAVA] Scanner / BufferedReader  (0) 2024.03.09
[JAVA] Split / StringTokenizer 비교  (0) 2024.03.09
[JAVA] 종합예시  (0) 2024.03.08
[JAVA] 객체배열  (1) 2024.03.08
728x90

버튼 누르기

 

버튼 누르면 나타남

<!DOCTYPE html>

<head>
  <style>

  </style>

</head>

<body>
  <button type="button" onclick="ch()">button</button>
  <hr>
  <ul>
    <li>I (<span>love</span>) you.</li>
      <li>공부(<span>필수</span>)</li>
  </ul>
 
  <script>
    let n = "hidden";
    function ch() {
      if (n == "hidden") {
        n = "visible";
      }
      else {
        n = "hidden";
      }
      let v = document.querySelectorAll('span');// 배열
      for (let i of v) {
        i.style.visibility = n;
      }
    }
  </script>
</body>

</html>
728x90
728x90

버블링

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작.

가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작.

 

꼭 필요한 경우를 제외하곤 버블링을 막지 마세요!

버블링은 유용합니다. 버블링을 꼭 멈춰야 하는 명백한 상황이 아니라면 버블링을 막지말기. 아키텍처를 잘 고려해 진짜 막아야 하는 상황에서만 버블링을 막아야한다!

 

캡처링 단계는 거의 쓰이지 않고, 주로 버블링 단계의 이벤트만 다뤄집니다

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id ="di">
<a class="link" href="#none">link</a>
</div>
  
  <script src="cl.js"></script>
</body>

</html>
let n = document.getElementById('di'); // 상위요소
let m = document.querySelector('#di a'); // 하위요소
//상위 요소로 전달되는 버블링,
//하위요소로 전달되는 캡처링


n.onclick=function(){
    this.style.borderBlockColor='red';
}
m.onclick=function(e){
    e.stopPropagation(); //버블링, 캡처링 막는 함수
    this.style.borderBlockColor='blue';
}
body{
    margin: 20px;
}

#di{
    border: 1px solid black;
    padding: 30px;
}
#di a{
    text-decoration: none;
    border: 1px solid black;
    padding: 10px;
}

 

 

 


<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id ="di">
<a class="link" href="http://naver.com">네입버</a>
</div>
  
  <script src="cl.js"></script>
</body>

</html>
let n = document.querySelector('.link');

n.addEventListener('click',function(e){
    e.preventDefault();

let m = this.getAttribute('href');
console.log(m);

let z = confirm('네이버로 이동할려?');
if(z==true){
    location.href=m;
}
});
728x90

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] ES6  (0) 2024.04.22
[JS] Visibliity  (0) 2024.04.16
[JS] 함수 사용법  (0) 2024.04.05
[JS] 문제 자동생성, 10초가 지나면 자동채점  (0) 2024.04.04
[JS] 종합복습(문서객체이벤트)  (3) 2024.04.04
728x90

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul>
        <li>디비!</li>
        <li>빅데이터!</li>
        <li>에이아이!</li>
    </ul>
    


    <script src="cl.js"></script>
</body>
</html>
let n = document.getElementsByTagName('li');
for(let i of n){ //= iterator
    i.addEventListener('click',function(){
        this.style.fontSize="1.2em";
    })
    
}

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
 <p>자바스크립트를 배워봅시다</p>


    <script src="cl.js"></script>
</body>
</html>
let n = window.open('','d','width=150, height=100');
n.document.write('cheers');

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<p>숫자를 클릭하면 1~3까지 랜덤숫자 ㄷㄷㄷㅈ!</p>
 <div onclick="on()">
    <span name="a">1</span>
    <span name="a">1</span>
    <span name="a">1</span>
</div>
<p id="aa">성공!</p>


    <script src="cl.js"></script>
</body>
</html>
function on() {
    let n = document.getElementsByName("a");
  let arr = [
    Math.floor(Math.random() * 3) + 1,
    Math.floor(Math.random() * 3) + 1,
    Math.floor(Math.random() * 3) + 1,
  ];

  // 1 1 1  위치에 arr 배열값 넣기

  for(let i=0 ; i < arr.length ; i++){
    n[i].innerHTML=arr[i]
  }

  let m = document.getElementById('aa');
  if(n[0].innerHTML==n[1].innerHTML && n[1].innerHTML==n[2].innerHTML){
    m.innerHTML="성공";
}else{
    m.innerHTML="실패";
}
}

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<p>숫자를 클릭하면 1~3까지 랜덤숫자 ㄷㄷㄷㅈ!</p>
 <div id="num">
    <span onclick="on(this)">1</span>
    <span onclick="on(this)">1</span>
    <span onclick="on(this)">1</span>
</div>


    <script src="cl.js"></script>
</body>
</html>
function on(obj) {
    let n = document.getElementsByTagName("span");
    let m = (Math.random() * 3) + 1;
    let m2 = Math.floor(m);
  
    // 성공 메시지를 위한 p 태그 생성
    let z = document.createElement('p');
    let z2 = document.createTextNode('성공');
    z.appendChild(z2);
  
    // 실패 메시지를 위한 p 태그 생성
    let z3 = document.createElement('p');
    let z4 = document.createTextNode('실패');
    z3.appendChild(z4);
  
    // 숫자 표시
    obj.innerHTML = m2;
  
    // 모두 같은 숫자인지 확인
    if (n[0].innerHTML == n[1].innerHTML && n[1].innerHTML == n[2].innerHTML) {
      // 성공 메시지 출력
      document.body.appendChild(z);
    } else {
      // 실패 메시지 출력
      document.body.appendChild(z3);
    }
  }

 

728x90
728x90

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="st.css">
    <script src="cl.js" defer></script>
</head>

<body>
    <h2>문제는 자동으로 생성되며, 10초가 지나면 자동 채점</h2>
    <h3>남은시간
        <span id="sec">10</span>
    </h3>
    <hr>
    <span class="op"></span><input type="text" class="ans"><br>
    <span class="op"></span><input type="text" class="ans"><br>
    <span class="op"></span><input type="text" class="ans"><br>
    <span class="op"></span><input type="text" class="ans"><br>
    <input type="button" value="다시" class="re"><span class="res"></span>


</body>

</html>
let opEle = document.querySelectorAll(".op");
let ansEle = document.querySelectorAll('.ans');
let secEle = document.querySelector('#sec');
let reEle = document.querySelector('.re');
let resEle = document.querySelector('.res');

// 31 + 23
let ops = new Array('+', '-', '*'); // 나눗셈 연산자 제외
let num1 = 0;
let num2 = 0;
let time = 10; // 10 9 8 7 6 5 4 3 2 1 0
window.onload = function () {
    let t = setInterval(function () {
        secEle.innerText = time--;

        if (time < 0) {
            clearInterval(t);

            let o = 0;
            for (let i = 0; i < opEle.length; ++i) { // opEle.length로 수정
                if (eval(opEle[i].innerText) === parseInt(ansEle[i].value))
                    o++;
                else {
                    opEle[i].style.textDecoration = 'line-through';
                    ansEle[i].style.color = 'red';
                    ansEle[i].value = eval(opEle[i].innerText);
                }
            }
            resEle.innerText = "정답: " + o + "개";
        }
    }, 1000);
};

for (let i = 0; i < opEle.length; i++) { // opEle.length로 수정
    num1 = Math.floor(Math.random() * 101);
    num2 = Math.floor(Math.random() * 101);
    opEle[i].innerText =
        num1 + " " + ops[Math.floor(Math.random() * 3)] + " " + num2; // ops.length로 수정
}

reEle.addEventListener('click', function () {
    location.reload();
});
.op{
    float: left;
    width: 100px;
    margin-left: 30px;
    }
    .ans{
    width: 120px;
    }

 

 

메소드 정리!


onload() - 웹 페이지의 모든 리소스가 로드되고 나서 실행

clearInterval()setInterval 함수로 설정된 일정한 시간 간격으로 실행되는 작업을 중지하는 데 사용

eval() - 문자열로 표현된 JavaScript 코드를 실행하는 데 사용됩니다. 이 함수는 주어진 문자열을 JavaScript 코드로 해석하고 실행

Math.floor() - 주어진 숫자의 내림값(바닥값)을 반환합니다. 즉, 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 정수를 반환합니다. 실수를 정수로 변환할 때 유용하게 사용

cf)  Math.floor(3.8)은 3을 반환하고, Math.floor(-2.3)은 -3을 반환

728x90

'Language > JavaScript' 카테고리의 다른 글

[JS] 버블링, 캡처링 / preventDefault()  (0) 2024.04.12
[JS] 함수 사용법  (0) 2024.04.05
[JS] 종합복습(문서객체이벤트)  (3) 2024.04.04
[JS] Stop Watch 만들기  (0) 2024.04.04
[JS] 종합복습2  (0) 2024.04.04

+ Recent posts