2016년 7월 27일 수요일

03day Javascript

Javascript

  • java - 언어설계 유사
  • 자료
    • 객체자료형
    • 자료형의 종류
      • 문자열 : '', ""
      • 함수 : 
      • undefined : nullpoint exception
      • 변수 : var ( var 있으면 지역변수 없의면 전역변수)
        • 중복선언가능 (다른사람이 짜둔 코드를 가져오는경우 에러 가능성)
      • 연산자
  • 제어
    • if
    • witch
    • for
    • for in
    • while
    • do while
    • break
    • continue
    • 중첩을 통해서 알고리즘을 만듦
  • 함수
    • 모듈 , 라이브러리
    • 자료 , 제어
      • 단위 처리 효과
    • 사용자 정의 함수
      • 선언적 함수
      • 익명함수
        • 변수로 선언가능
          • 다른 함수의 파라미터, 리턴으로 사용가능
      • →일급 함수(현대 언어들이 채택)
    • 내장함수
      • ...
  • 객체
    • 사용자 정의 객체(JSON)
    • 라이브러리
      • 내장
        • 기본자료형
          • Object
          • Date
          • ...
        • BOM
        • DOM  : 브라우저객체모델의 document객체
      • 외부추가
        • JQuery
        • http://processing.org/


1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
    //window 객체 속성과 메서드 출력 -- 브라우저마다 출력결과 다름
    /* var output ='';
    for(var key in window){
        if(key != 'external'){
            output += '* '+ key + ' : '+window[key] + '\n';
        }
    }
    console.log(output); */
    //각 속성 보기
    console.log(window['screenTop']);
    console.log(window.screenTop);
    console.log(window['screenLeft']);
    console.log(window.screenLeft);
    
    console.log(window.location);
</script>

</body>
</html>


2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
    //window객체 함수
    //alert('경고창');  //window.alert('경고창');

    //새창
    open("http://www.naver.com"); //사이즈가 없으면 탭으로 뜸
    //top /left: 창의 위치
    //width / height: 창의 크기
    //...
    open("http://m.naver.com", 'win','top = 300, left = 100, width = 500, height=500')
    open("./window01.html", 'win','top = 300, left = 500, width = 500, height=500')
    
</script>

</body>
</html>


3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //Window객체 메서드
    //클릭을 했을떄 새창 열기
    var child;
    function openWindow(){
        child = open('', 'win','top = 100, left = 100, width = 500, height=500')
    }
    //클릭 했을때 창 닫기
    function closeWindow(){
        child.close();  //창을 변수선언했기 때문에 부모창에서 자식창을 제어할 수 있음
    }
    //클릭 했을때 창 고침
    function reloadWindow(){
        child.document.write('<b>부모에서 호출되어진 내용</b>')
    }
    //클릭 시 창 이동
    function moveWindow(){
        child.moveBy(10,10);
    }
</script>
</head>
<body>

<a href="javascript:openWindow()"> 창 열기</a>
<a href="javascript:closeWindow()"> 창 닫기</a>
<a href="javascript:reloadWindow()"> 창 고침</a>
<a href="javascript:moveWindow()"> 창 이동</a>

</body>
</html>


4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //클릭을 했을떄 새창 열기고 3초 뒤 닫기
    var child;
    function openWindow(){
        child = open('', 'win','top = 100, left = 100, width = 500, height=500')
        setTimeout(function(){
            child.close();
        }, 3000);
        //setTimeout(close,3000);
    }
</script>
</head>
<body>

<a href="javascript:openWindow()"> 창 열고 닫기</a>
</body>
</html>


5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
    //screen 객체 속성
    var output = '';
    for(var key in screen){
        output += '* '+ key + ' : '+screen[key]+'\n';
    }
    console.log(output);
    //width, hight  화면 해상도
    //availWidth, availHeight 메뉴바를 제외한 실제 높이
</script>

</body>
</html>


6
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //location 객체 속성      //자바의 URL객체와 비슷
    /* var output = '';
    for(var key in location){
        output += '* '+ key + ' : '+location[key]+'\n';
    }
    console.log(output); */
    
    //location객체 메서드 href를 이용해서 화면전환 가능함
    function goUrl(url){
        location.href = url;
    }
</script>
</head>
<body>

<a href="javascript:goUrl('http://www.naver.com')">네이버 바로가기</a><br>

</body>
</html>


7
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
    //navigator 속성
    //사용자 컴퓨터의 접속 환경을 알 수 있음
    //접속 플렛폼을 알 수 있기 때문에, 모바일일 경우 알맞은 설정을 할수 있음
    var output = '';
    for(var key in navigator){
        output += '* '+ key + ' : '+navigator[key]+'<br>';
    }
    document.write(output);
</script>

</body>
</html>


8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
    //history 속성
    //과거에 접속한 브라우저를 알 수 있음
    var output = '';
    for(var key in history){
        output += '* '+ key + ' : '+history[key]+'<br>';
    }
    document.write(output);
</script>

</body>
</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function goURL(){
        location.href = "http://www.naver.com";
    }
    //history.back()
    function backURL(){
        history.back();
        //history.go(-1);
    }
</script>
</head>
<body>

<a href="javascript:goURL()">네이버 바로가기</a><br>
<a href="javascript:backURL()">이전가기</a><br>

</body>
</html>


9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
    //document 속성
    //charset 등을 확인 할 수 있음
    var output = '';
    for(var key in document){
        output += '* '+ key + ' : '+document[key]+'<br>';
    }
    document.write(output);
</script>

</body>
</html>


10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
    //document 메서드
    document.write('Hello JS');
    document.write('Hello JS');
    
    console.log(document.bgColor);
    document.bgColor = 'darkgrey';  //배경색 변경
    console.log(document.bgColor);
    
    document.title = '새문서 제목';  //제목탭 변경
</script>

</body>
</html>


11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //document 객체 매서드
    
    //자바스크립트가 HTML내용을 읽은뒤에 수행하도록 함 //없으면 배열이 생성되지 않았으므로 에러남
    window.onload = function(){
        //form태그는 forms안에 배열로 들어감
        console.log(document.forms.length);
        
        console.log(document.forms[0].action);
        console.log(document.forms[1].action);
        
        console.log(document.frm1.action);  //지정해준 이름을 배열대신 사용가능
        console.log(document.frm2.action);
    }
    //2번째 방법은 버튼을 클릭해서 함수를 호출하는 방법
    function checkfrm(){
        console.log(document.forms.length);
        
        console.log(document.forms[0].action);
        console.log(document.forms[1].action);
        
        console.log(document.frm1.action);
        console.log(document.frm2.action);
    }
</script>
</head>
<body>

<form action="test1.jsp" name="frm1">
    <input type='text'>
</form>

<form action="test2.jsp" name="frm2">
    <input type='text'>
</form>

<!-- 클릭해서 자바스크립트 코드 수행  링크식, 버튼식 -->
<a href="javascript:checkfrm()">내용읽기</a>  
<input type='button' value='내용읽기' onclick='checkfrm()'/>

<!--3번째 방법은 HTML이 끝난 뒤 자바스크립트 코드 써줌-->
<script type="text/javascript">
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //document 객체
    //자바스크립트로 HTML 내용 읽기,변경
    function checkfrm(){
        console.log(document.frm1.id.type);
        console.log(document.frm1.id.value);
        
        console.log(document.frm1.passwd.type);
        console.log(document.frm1.passwd.value);
    }
    function changefrm(){
        document.frm1.id.value = 'testman';
        document.frm1.passwd.value ='3456';
    }
    function lengthfrm(){
        var str = document.frm1.id.value;
        alert(str.length);
    }
</script>
</head>
<body>

<form name="frm1">
    아이디<input type='text' name='id' value='test' /><br>
    비밀번호<input type='password' name='passwd' value='1234' /><br>
    <input type='button' value='내용읽기' onclick='checkfrm()'>
    <input type='button' value='내용변경' onclick='changefrm()'>
    <input type='button' value='길이확인' onclick='lengthfrm()'>
</form>

</body>
</html>


12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function checkfrm(){
        //체크박스 체크상태 가져오기
        console.log(document.frm1.f1.checked);
        console.log(document.frm1.f2.checked);
        console.log(document.frm1.f3.checked);
        console.log(document.frm1.f4.checked);
        /* 
        console.log(document.frm1.f1.value); //체크박스 텍스트를 가져오려면 따로 value값 써두어야함
        console.log(document.frm1.f2.value);
        console.log(document.frm1.f3.value);
        console.log(document.frm1.f4.value); 
        */
        
        //체크된 값을 보려면 if문 써줘야함
        if(document.frm1.f1.checked) console.log(document.frm1.f1.value);
        if(document.frm1.f2.checked) console.log(document.frm1.f2.value);
        if(document.frm1.f3.checked) console.log(document.frm1.f3.value);
        if(document.frm1.f4.checked) console.log(document.frm1.f4.value);
    }
    function checkfrm2(){
        //console.log(typeof(document.frm1.f));
        //console.log(document.frm1.f.length);
        for(var i=0; i<document.frm1.f.length; i++){
            if(document.frm1.f[i].checked){
                console.log(document.frm1.f[i].value + '\n')
            }
        }
    }
</script>
</head>
<body>

<form name='frm1'>
    <!-- 체크박스 value 지정 -->
    <input type="checkbox" name='f1' checked="checked" value='사과'>사과<br>
    <input type="checkbox" name='f2' value='감귤'>감귤<br>
    <input type="checkbox" name='f3' value='수박'>수박<br>
    <input type="checkbox" name='f4' value='딸기'>딸기<br>
    <input type="button" value='내용읽기' onclick='checkfrm()' /><br><br>
    
    <!-- 이름이 같으면 배열화 됨 -->
    <input type="checkbox" name='f' checked="checked" value='사과'>사과<br>
    <input type="checkbox" name='f' value='감귤'>감귤<br>
    <input type="checkbox" name='f' value='수박'>수박<br>
    <input type="checkbox" name='f' value='딸기'>딸기<br>
    <input type="button" value='내용읽기' onclick='checkfrm2()' />
</form>

</body>
</html>


13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //왼쪽 체크박스가 체크되어있으면 오른쪽 체크박스도 체크 되도록
    function checkfrm(){
        for(var i=0;i<4;i++){
            if(document.frm1.f[i].checked==true){
                document.frm1.f[i+4].checked = true;
            }else{
                document.frm1.f[i+4].checked = false;
            }
        }
    }
</script>
</head>
<body>
<form name='frm1'>
<table>
    <tr>
        <td>
            <input type="checkbox" name='f' checked="checked" value='사과'>사과<br>
            <input type="checkbox" name='f' value='감귤'>감귤<br>
            <input type="checkbox" name='f' value='수박'>수박<br>
            <input type="checkbox" name='f' value='딸기'>딸기<br>
        </td>
        <td>
            <input type="button" value='>' onclick='checkfrm()' />
        </td>
        <td>
            <input type="checkbox" name='f' checked="checked" value='사과'>사과<br>
            <input type="checkbox" name='f' value='감귤'>감귤<br>
            <input type="checkbox" name='f' value='수박'>수박<br>
            <input type="checkbox" name='f' value='딸기'>딸기<br>
        </td>
    </tr>
</table>
</form>

</body>
</html>


14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //option값 가져오기
    function checkfrm(){
        console.log(document.frm1.s.options.length);  //옵션갯수
        console.log(document.frm1.s.options.selectedIndex); //선텍옵션 인덱스
        
        //console.log(document.frm1.s.options[document.frm1.s.options.selectedIndex].text); //텍스트 가져오기
        //console.log(document.frm1.s.options[document.frm1.s.options.selectedIndex].value);  //선택옵션 value
        var form = document.frm1;
        var index = form.s.options.selectedIndex;
        console.log(form.s.options[index].text);
        console.log(form.s.options[index].value);
    }
</script>
</head>
<body>

<form name='frm1'>
    <select name='s'>
        <option value='1'>사과</option>
        <option value='2' selected="selected">감귤</option>
        <option value='3'>수박</option>
        <option value='4'>딸기</option>
    </select><br>
    <input type="button" value="내용읽기" onclick="checkfrm()" />
</form>

</body>
</html>


15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function goURL(){
        //검색어 인코딩
        var query = encodeURIComponent(document.frm.query.value);
        
        // openwindow로 검색엔진별 결과창 나오게
        if(document.frm.urls.options.selectedIndex==0){
            open('https://search.naver.com/search.naver?where=nexearch&query='+query+'&sm=top_hty&fbm=1&ie=utf8', 'win', 'width=500');
        }else if(document.frm.urls.options.selectedIndex==1){
            open('http://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&q='+query, 'win', 'width=500');
        }else{
            open('https://www.google.co.kr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q='+query, 'win', 'width=500');
        }
    }
</script>
</head>
<body>

<form name='frm'>
    검색어 : <input type="text" name="query">
    <select name='urls'>
        <option value="">네이버</option>
        <option value="">다음</option>
        <option value="">구글</option>
    </select>
    <input type="button" value="검색 페이지 이동" onclick='goURL()' />
</form>

</body>
</html>


작성자: 시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)