HTML에서 자바스크립트 로드하기
- inline : 태그에 직접 자바스크립트를 기술하는 방식이다.
장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다.
하지만 정보(HTML)와 제어(Javascript)가 섞여있기 때문에
정보로서의 가치가 떨어진다. - script : 태그를 만들어서 자바스크립트 코드를 삽입하는 방식
html태그와 js 코드를 분리할 수 있다는 점이다. - .js : .js파일로 분류
1. Object Model
- 웹브라우저의 구성요소들은 하나하나가 객체화되어있다.
- 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할
수 있게 된다.
1-1. Window
- 전역객체
1-2. DOM : document object model
1-3. BOM : browser object model
1-4. javascript
2. String객체의 indexOf함수
- indexOf함수는 파라미터로 전달된 문자열이 처음으로
나타나는 위치값을 리턴하지만, 만약 파라미터로 전달된 문자열을
찾지 못하였다면 "-1" 을 리턴한다. - 그러므로 indexOf 함수의 리턴값이 -1보다 크다면 해당 문자열이
존재하는 것이고, 그렇지 않다면 해당 문자열이 포함되어 있지
않은 것으로 판별 할 수 있다.
3. HTML 문서를 제어하는 내장객체 - document
3-1. 특정 HTML 요소를 객체형태로 가져오기
-
document객체는 HTML문서를 제어하기 위하여 특정 HTML 태그
요소를 id값에 의하여 객체 형태로 가져오는 기능을 제공let element = document.getElementById("id속성값");
3-2. HTML 요소의 내용을 제어
-
객체화된 HTML요소의 innerHTML 속성을 사용하면 해당 태그에
속해있는 내용을 새롭게 설정 할 수 있다.element.innerHTML = "<h1>Hello</h1>";
3-3. Style
-
javascript안에 객체화된 HTML요소는 style이라는 하위 객체를
내장한다. -
style 객체는 CSS속성에 대응되는 변수들을 내장하고 있으며,
이 변수에 특정 값응ㄹ 대입하는 것으로 javascript를 통한
특정 요소의 CSS제어가 가능해진다.element.style.CSS대응속성 = "CSS적용값";
3-4. tagname으로 접근하기
let element = document.getElementsByTagName('ul');3-5. classname으로 접근
let element = document.getElementsByClassName('active');navigator
<script>
let info = "<h1>웹 브라우저 정보 확인</h1>"
info += "<p>브라우저 이름 : " + navigator.appName + "</p>";
info += "<p>플랫폼 정보 : " + navigator.platform + "</p>";
info += "<p>사용자 정보(포괄적인 정보) : " + navigator.userAgent + "</p>";
info += "<p>브라우저 버전 : " + navigator.appVersion + "</p>";
document.write(info);
</script>
<script>
// 모바일 브라우저면 true, 그렇지 않으면 false 를 리턴하는 사용자 정의 함수
function isMobile(){
let tmpUser = navigator.userAgent;
let isMobile = false;
if(tmpUser.indexOf("iPhone") > -1
|| tempUser.indexOf("iPad") > -1
|| tempUser.indexOf("Android") > -1
){
isMobile = true;
}
return isMobile;
}
let isMobileWeb = isMobile();
if( isMobileWeb ){
document.write("<h1>모바일 웹 브라우저로 접속하셨습니다.</h1>")
} else {
document.write("<h1>PC용 웹 웹 브라우저로 접속하셨습니다.</h1>")
}
</script> POP
<body>
<h1>open 메소드</h1>
<div>
<a onclick="open1();" href="#">새창 열기</a>
<br>
<a onclick="open2();" href="#">팝업 창 열기</a>
<br>
<a onclick="open3('https://www.naver.com');" href="#">팝업 창 열기2</a>
<br>
</div>
<script>
function open1(){
// 새창 띄우기
window.open('open.html');
}
function open2(){
// 2 : 페이지 이름
// 3 : 사이즈 및 여러 옵션 지정
window.open('open.html', '', 'width=300, height=500, scrollbars=no, toolbar=no,');
}
function open3(url){
window.open(url, '', 'width=300, height=500, scrollbars=no, toolbar=no,');
}
</script>
</body>location
<body>
<input type="button" value="네이버로 이동하기" onclick="goNaver()">
<script>
function goNaver(){
if(confirm("정말 네이버로 이동하시겠습니까?")){
location.href = "https://www.naver.com";
}
}
</script>
</body>
---------------------------------------------------------
<!-- 페이지 최초 로딩시, autoNo() 함수 호출-->
<body onload="authNo()">
<p>
고객님의 인증번호는 <strong id="auth">00000</strong>입니다.
</p>
<!-- 페이지 새로 고침 이벤트 호출 -->
<input type="button" value="인증번호 새로 받기" onclick="refresh()">
<script>
// 두 수 사이의 난수를 리턴하는 함수
function random(n1,n2){
return Math.floor((Math.random() * (n2 - n1 + 1)) + n1);
}
function authNo(){
let value = "";
for( let i = 0; i<5; i++ ) {
value += random(0,9);
}
document.getElementById("auth").innerHTML = value;
}
function refresh(){
// alert("새로고침 기능 넣기");
// 페이지 새로고침
location.reload();
}
</script>
</body>
개발자로 진로 변경을 위해 준비하고 있습니다