<script> 태그

<script>

	const container = bm.container;
	const context = bm.context;

	container.addEventListener('click', e => {

		e.preventDefault();

		if (e.target.matches('button')) {
			// <button> 태그를 클릭시 사용자가 에디터에 설정한 메세지를 출력
			alert(context.property.myAlertMessage);

			// 고객 로그아웃 처리
			bm.do('logout');
		}

	}, true);

</script>

블록에서 접근 가능한 bm 객체와 스크립트 예시

• <script> 태그 내에 JavaScript 코드를 작성해서 블록의 동작을 제어할 수 있어요.
• 작성한 <script> 코드는 <template> 과 <style> 이 처음 그려진 뒤에 실행돼요.
• <script> 태그 내에서는 블록 정보에 접근하거나 블록과 관련된 다양한 기능을 사용할 수 있는 bm 이라는 특별한 객체를 사용할 수 있어요. 자세한 내용은 bm 문법을 참고해 주세요.
• <script> 태그를 사용하는 블록은 코드에 따라서 에디터 내 프리뷰(Preview) 지원을 별도로 처리해줘야할 수 있어요. 더 자세한 내용은 해당 페이지의 <script> 태그에서 프리뷰 지원하기 섹션을 참고해 주세요.

⚠️ <script> 태그 사용 시 주의 사항

외부 라이브러리(jQuery 등)를 사용하는 경우 공통 코드를 설정하여 <script> 태그 내에서 활용할 수 있지만, 꼭 필요한 경우가 아니라면 사이트의 속도 저하의 원인이 될 수 있으니 순수 JavaScript(Vanilla JavaScript) 사용을 지향해요.

<script> 태그 사용 — Bad vs. Good

DOM 이벤트 바인딩

<script>

	bm.container.innerHTML = '<h1>안녕하세요!</h1>';

	// 블록 컨테이너에 그려진 HTML 요소에 직접 DOM 이벤트를 바인딩
	const h1 = bm.container.querySelector('h1'); 

	h1.addEventListener('click', e => { 
		e.preventDefault();
		alert('<h1> 태그가 클릭되었어요.');
	});

	// 1초 뒤 <h1> 태그를 새로 생성
	setTimeout(() => {
		bm.container.innerHTML = '<h1>😢클릭해도 창이 안떠요...</h1>';
	}, 1000);

</script>

<script>

	bm.container.innerHTML = '<h1>안녕하세요!</h1>';

	// 블록 컨테이너에 DOM 이벤트를 위임하고 분기
	bm.container.addEventListener('click', e => { 
		e.preventDefault();
		if (e.target.matches('h1')) { 
			alert('<h1> 태그가 클릭되었어요.');
		}
	}, true);

	// 1초 뒤 <h1> 태그를 새로 생성
	setTimeout(() => {
		bm.container.innerHTML = '<h1>☺️클릭하면 창이 떠요!</h1>';
	}, 1000);

</script>

• 블록 컨테이너 내부의 HTML 구조나 내용물이 바뀌는 상황에도 DOM 이벤트를 다시 걸어줄 필요가 없어요.
• 제작하는 블록에서 <script> 태그를 활용해 UI를 동적으로 수정하는 경우에도 상위 컨테이너인 블록 컨테이너를 활용하는 방식이 사이드 이펙트가 덜 발생해요.
• 에디터 내 프리뷰(Preview) 지원 시 자연스러운 동작에 도움이 돼요.

bm.onContextChange 내에서 bm.apply() 호출

<script>

	bm.onContextChange = () => { 
		bm.context.counter++; 
		bm.apply(); 
	}; 

</script>

<script>

	bm.container.addEventListener('click', () => { 
		bm.context.counter++; 
		bm.apply(); 
	}); 

	bm.onContextChange = () => {
		console.log(bm.context.counter);
	};

</script>

• bm.onContextChange 내부에서 절대 bm.apply()를 호출하면 안 돼요. 무한 루프가 발생해 브라우저가 응답하지 않게 돼요.