본문 바로가기

IT STUDY

JavaScript - CSS호출, button, dom, 로직흐름

반응형

	//HTML : 정보를 담고있음
	//CSS : 디자인
	//JavaScript : 웹 브라우저, HTML을 프로그래밍적으로 제어하는 역할
	//BOM : 브라우저, 컴퓨터에 접근 객체

	//어떤 객체든지 가장 상위 Window를 포함하고있다. (DOM,BOM,JavaScript)
	//alert('HELLOWORLD');
	//	window.alert('helloworld');

	//로직흐름제어
	function func_confirm() {
		if (confirm('ok?')) {
			alert('ok');
		} else {
			alert('cancel');
		}
	}

	//버튼 누르면 alert반응
	function func_alert() {
		alert('ok');
	}

	//버튼 누르면 alert에 입력창 나옴
	function func_prompt() {
		if (prompt('name') == 'helloworld') {
			alert('helloworld');

		} else {
			alert('fail');
		}
	}
	//연결한 URL로 접속
	function func_reload() {
		location.href = 'http://google.com';
	}

	//console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash)
	//alert(location.pathname);
	//alert(navigator);

	//클릭 시 저장해둔 list 링크 타고 팝업생김
	function winopen() {
		//window.open(list라는 팝업창을 실행시킴)
		win = window.open('list', 'ot', 'width=300px, height=500px');
	}
		//입력하는 인자값을 msg의 매개변수로 전달받아서 실행함
	function winmessage(msg) {
		//innerText : 텍스트 입력, HTML 코드 및 쿼리 등 명령어 수행해도 텍스트로 인식
		win.document.getElementById('message').innerText = msg;
	}
		//켜있던 팝업창 종료 시킴
	function winclose() {
		win.close();
	}

	// getElementsByClassName : 주어진 클래스를 가진 모든 자식 엘리번트의 HTML Collection 반환
	//CSS
	//JavaScript
	// 해당 class 찾아와서 컬러 바꿔줌
	var lis = document.getElementsByClassName('active');
	//alert(lis.length);
	for (var i = 0; i < lis.length; i++) {
		lis[i].style.color = 'red';
	}
	
  • HTML
  • CSS
  • JavaScript
  • HTML
  • CSS
  • JavaScript
반응형