안녕하세요!
지금 막 자바스크립트 입문 마지막 강의를 봤습니다!
보고나니 뿌듯하면서도.......
제가 아직 파라미터라는 개념이 안 잘생겨서요! (파라미터 강의는 이미 여러번 봤습니다 ㅠㅠ)
제가 이렇게 코드를 짰습니다. : 마지막 강의(한글자씩 출력되는 애니메이션) 입니다!
<!--more-->
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<link rel="stylesheet" href="type.css">
<body>
<div>
<button>버튼</button>
<h1>abcdef</h1>
<h2>ghijk</h2>
</div>
<script>
// 버튼을 누르면,
// H1 빈칸으로 만들고 : h1Tag.innerHTML = '';
// 0.5초 후에 h1 안에 입력,
// 0.5초 후에 h1 안에 b를 더함,
// 0.5초 후에 h1 안에 C를 더함,
var h1Tag = document.querySelector('h1');
var h1Text = document.querySelector('h1').innerHTML;
var h2Tag = document.querySelector('h2');
var h2Text = document.querySelector('h2').innerHTML;
$('button').on('click', function(){
animation1(h1Tag, h1Text);
})
$('button').on('click', function(){
animation1(h2Tag, h2Text);
})
function animation1(h1Tag, h1Text){
h1Tag.innerHTML = '';
for( let i = 0; i < h1Text.length; i++ ){
setTimeout(function(){
h1Tag.innerHTML = h1Tag.innerHTML + h1Text[i]
}, 500 * i);
}
}
</script>
</body>
</html><!--more-->
Q1
function animation1(h1Tag, h1Text) 에서 파라미터를 2개를 줬습니다.
(h1Tag, h1Text) 인데!!! h2 가 실행되는 이유를 모르겠습니다.
파라미터를 처음 설명하실 때, 아무거나 입력가능 이라고 하셨는데...
여기서 h1Tag, h1Text 는 무엇일까요 ㅠㅠ?
위에처럼 짜고 실행 시켜보니, a 와 g, b 와 h h1 와 h2가 동시에 출력이 되는데
Q2. h1 나오고 h2 나오게 하려면, 함수를 하나 더 만들어서 초의 시간을 바꿔야하나요?
하...파라미터 때문에 이 수업 수강하는 이유가 제일 큰데
너무 이해하기 어렵네요 ㅠㅠㅠ 살려주세요
