<이공계전문기술연수> 1. JavaScript(1일차)

<수업내용>

---

 

반응형 웹
-> 사용자의 화면에 따라서 화면이 다르게 표현되는 웹
가로길이 -> 1200 1280px -> pc브라우저 기준

과거에는 데스크탑 웹브라우저 기준으로 페이즈를 제작해도 문제가 없었음 
스마트폰, 태블릿, SMART TV 등 다양한 기기로 페이지를 접속

 

 

반응형 웹의 장점

1. 사이트를 하나 만들면 접속하는 기기와 상관없이 모두 사용 가능
www.naver.com
m.naver.com

2. 스마트폰 가로모드에 맞춰 레이아웃 변경 가능
3. 사이트 유지 관리 용이
-> HTML , CSS 를 사용하기 때문에 서버 쪽 코드가 없어서 유지관리가 쉬움
-> CSS3기술을 사용하는 경우 하위 버전브라우저에서는 지원이 안됨

 

@미디어 쿼리
-> 홈페이지 사용자의 브라우저 크기를 측정하여 크기변화가 발생한 경우 다른 CSS를
적용하는 기술

@부트스트랩
-> 누구나 쉽게 웹사이트를 만들 수 있게 해주는 프레임워크
-> 반응형 웹 사이트 만들 때 필요한 HTML과 CSS를 그대로 가져다 문서를 만들 수 있고, 그 외 기능들은 플러그인으로 제공
-> 트위터에서 만든 UI프레임워크

www.getbootstrap.com
w3schools.com/bootstrap

그리드 시스템
화면을 12개의 열로 구성한다고 보면 됨

. col-xs-* 항상 요소를 세로로 배치
. col-sm-* 768px 이하에서 세로로 표시를 시작
. col-md-* 992px 이하에서 세로로 표시 시작
. col-lg-* 1200px 이하에서 세로로 표시 시작

 

---

@JavaScript
-> 기존 HTML 은 똑똑하지 못한 언어
-> 계산도 안되고, form이 정확하게 채워졌는지 알 수 없고, 클라이언트 행동에 따른 결정을 내릴 수도 없음
-> 사람들이 텍스트를 읽거나 사진을 볼 수 있도록 제공하고 페이지를 이동하는 단순한 작업

(HTML5에서 기능이 많이 추가됨)
-> 자바스크립트는 웹 페이지가 지능적으로 반응할 수 있도록 함
-> 2000년대 초반에는 자바스크립트는 개발자들이 무시하는 언어
-> 기능도 별로 없고, 성능도 좋지 않음
-> 최근 몇년 사이에 다양한 자바스크립트 프레임워크와 라이브러리가 생기면서 크게 확정되고 엄청난 발전을 하게 됨
-> 웹 개발자는 HTML, CSS, JavaScript는 기본적으로 알고 있어야 함
->*. js
->웹 개발자는 HTML, CSS, JavaScript는 기본적으로 알고 있어야 함

 

@브라우저에서 작동하는 언어(클라이언트 언어)
1. HTML
-> 브라우저에 요소를 배치하고 텍스트를 배치하는 언어

2. CSS
-> HTML을 꾸미기 위한 속성

3. JavaScript
-> HTML이 정적인 작동하는 것을 동적인 작동으로 변경시켜 줄 수 있는 언어

4. JQuery
-> 자바스크립트 코드가 길어지면서 사용하기 복잡해지는 단점을 파격적으로 개선한 언어
-> 자바스크립트 기반 라이브러리

<style></style> -> CSS

<script></script> ->JavaScript

 

 

@자바스크립트 실행 방식

Java / JavaScript
-> 웹 브라우저에 내장되어있는 자바스크립트 파서가 소스를 한 줄씩 읽고 해석
(인터프리터 방식) 
-> 자바는 전체를 해석하고 컴파일


@데이터 출력 방법

#document.write(내용);
-브라우저 화면상의 값을 출력

#windows. alert(내용);
-내용을 메시지 창에 출력
-windows 객체는 모두 적용됨으로 생략 가능
-alert("message")

#innerHTML = 내용;
- 태그 엘리먼트 내용(시작 태그 종료 태그 사이의 값)을 변경하여 출력

#console. log(내용);
- 개발자 도구 콘솔에 출력


@데이터 입력 방법

#window. confirm();
-> 질문에 대해 예/아니오 의 결과를 얻을 때 사용
-> 예 버튼을 누르면 true, 아니 오를 누르면 false

#window. prompt();
-> 텍스트 입력 필드와 확인/취소 버튼이 있는 대화창 출력
-> 입력한 메시지 내용 리턴

#value 
-> input 태그의 입력값을 읽어오는 기능


@자바스크립트를 이용한 HTML 태그 접근

@@메서드

#getElementById("아이디명");
-> 태그의 id 속성 값을 이용해서 태그 엘리먼트 객체 정보를 가져옴
(1개만 가져옴)

#getElementsByClassName("클래스명");
-> 태그의 클래스 속성 값을 이용해서 엘리먼트 객체 정보를 배열에 담아서 가져옴
-> 해당 클래스가 1개여도 무조건 배열로 가져옴

#getElementsByTagName("태그명")
-> 태그명을 이용해서 엘리먼트 객체 정보를 배열에 담아서 가져옴

#getElementsByName("이름명")
-> 태그의 name 속성 값을 이용해서 태그 엘리먼트의 객체 정보를 배열에 담아서 가져옴


@ 자바스크립트 기본 문법

##주석
// :한 줄 주석
/* ~ */ :범위 주석


## 변수
- 변수의 종류 : 멤버 변수(전역 변수), 지역변수
- 멤버 변수 : 전역 변수라고도 하며 자료형을 선언하지 않음

 

<script>
	var val1;   // 함수 외부에서 선언 시 전역변수
	var4	// var를 붙이지 않는 경우 전역변수
	function func_name(){

		var val2; //함수 내부에서 선언 시 지역변수
		val3; // var를 붙이지 않고 선언하면 전역변수
	}

</script> 

1. var를 붙이지 않으면 전역변수

2. var를 붙이고 선언하는 경우
(1) 함수 외부에서 선언 시 전역변수
(2) 함수 내부에서 선언시 지역변수


##변수 이름 명명 규칙

1. 영어 대 / 소문자, 숫자 사용 가능
2. 첫 글자 숫자 사용 불가
3. 특수문자 사용 불가( _ , $ 제외 )
4. 변수명 의미 있는 단어 조합(a, b, c 하지 마세요)
5. 예약어를 변수명으로 사용 불가
6. 두 단어 이상 결합 시 카멜 표기법 권장
7. 한글 이름 사용 가능


## 자바스크립트의 자료형

##문자열(String)
->"", ''로 묶여 있는 리터럴 값
->내장 객체로 String 객체 -> 기본적인 메서드가 존재

toUpperCase() : 대문자로 변환
toLowerCase() : 소문자로 변환
length : 글자 개수 조회
indexOf() : 시작부터 가장 먼저 찾는 문자열 위치 리턴
lastIndexOf : 끝부터 가장 먼저 찾는 문자열 위치 리턴
-> 끝부터 찾아도 리턴하는 위치는 앞에서부터 계산


CharAt() : 찾는 위치의 문자 리턴
subString() : 값의 일부분만 리턴
split() : 토큰 문자로 분리한 문자열 배열 리턴


#숫자(number)
-> 정수형 숫자와 부동소수점(실수) 숫자로 구분
-> 내장 객체 Math 객체 제공, 기본 메서드 존재

Math.abs() :절댓값
Math.random() :임의의 난수(소수점)
Math.round() :소수점 반올림
Math.floor() :소수점 버림
Math.ceil() :소수점 올림


@기타 자료형

1. 논리 값(Boolean) : true/false 두 가지 값을 가짐
2. 객체(Object) : new로 선언된 사용자 객체와 자바스크립트 내장 객체
3.undefined : 변수명이나 함수명으로 선언되지 않은 식별자일 때
4. 함수(function) : 함수를 가지는 자료형

var test = function(){ 

} 

test(); 

 

@형 변환

function test(){ 
	var val1 =1; 
	var val2 ="1"; 
	var val3 =var1+var2; //11 //자동으로 var1의 데이터타입이 문자로 형변환 
	var val4 =String(var1); //강제형변환 
    }

문자 -> 숫자
강제형 변환 : Number(), parseInt(), parseFloat()

function test(){ 
	var num1 = "3"; 
	var num2 = Number(num1); 
	var num3 = parseInt(num1); 
	var num4 = parseFloat(num1); 
} 

@자바스크립트 연산자

최우선 연산자  : (), [],.
단항 연산자  : ++ , -- , + , -
산술 연산자  : + , - , * , / , %
관계 연산자 : > , < , >= , <= , == ,!= , === ,!==
논리 연산자 : &&, ||
대입 연산자 : =
복합 대입 연산자 : += , -= , *= , /= ,%=
삼항 연산자 : a ? b : c; 

=== : 자료형과 데이터가 모두 일치하면 true(둘 중 하나라도 다른 경우 false)
!== : === 반대 결과


@ 제어문

# 조건문 : if, if ~ else, else if, switch, 짧은 조건문(|| , &&)

# 반복문 : for, while, do ~ while, for in문

# 분기문 : continue, break


##짧은 조건문

||(or), &&(and)

||연산은 연산자 앞뒤 중 하나만 true 여도 true값이 나옴

&& 연산자 앞 뒤 모두가 true 여야 true

a> b||c> d (앞에 만약에 true이면 뒤에 연산 필요 없음)

a> b&&c> d

 

 

 

<실습>

 

1.

문제1. 다음 보기에 있는 텍스트 필드에 작성한 문자열의 길이를 알아올 수 있도록 구현하시오.

문제2. 다음 보기에 있는 문자열을,(콤마)를 기준으로 잘라내어 하나하나 출력하시오.

문제3. 글자를 입력 후 버튼을 클릭하면 메시지 공간에 출력하고 대문자버튼, 소문자버튼을 클릭하면 해당 입력값을 대/소문자로 바꾸어 주어라.(입력버튼을 클릭하면 입력창 값을 가져오고 입력창에 내용은 비워라!)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script>
        function confirm(){
            var inputText= document.getElementById("inputText");
            //id가 inputText인 엘리먼트 읽어옴
                       
            var length = inputText.value.length;
            
            var outputText = document.getElementById("outputText");
            //결과를 출력할 outputText
            
            outputText.innerHTML = "보기의 문자열의 길이는" +length+"글자 입니다.";
            }
    </script>
    
    <p>문제1. 다음 보기에 있는 텍스트 필드에 작성한 문자열의 길이를 알아올 수 있도록 구현하시오</p>
   
    <fieldset>
        <legend>보기</legend>
        <input type="text" id="inputText" placeholder="글자를 작성해보세요">
        
    </fieldset>
    <br>
    <div id="outputText" style="border: 1px solid red; width: 1200px; height: 200px;">
    </div>
    <button type="button" onclick="confirm();">확인하기</button>
    
    <br><br><hr>
    
    <script>
        function confirm2(){
            var instantFood = document.getElementById("instantFood");
            var arr = instantFood.innerHTML.split(",");
            
            var output=document.getElementById("output")
            for(var i=0; i<arr.length; i++){
                output.innerHTML += (i+1)+"."+arr[i]+"<br>";
            }
        }
        
    </script>
    <p>문제2. 다음 보기에 있는 문자열을,(콤마)를 기준으로 잘라내어 하나하나 출력하시오(동작 결과는 확인안하셔도 됩니다.)</p>
    <fieldset>
        <legend>보기</legend>
        <span id="instantFood">콜라,사이다,햄버거,피자,한약</span>
    </fieldset>
    <br>
    <div id="output" style="border: 1px solid red; width: 1200px; height: 200px;">
    </div>
    <button type="button" onclick="confirm2();">확인하기</button>
    <br><br>
    
    <script>
        function memoPrint(){
            var memo =
            document.getElementById("memo");
            var str = memo.value;
            var result3 = document.getElementById("result3");
            result3.innerHTML = str;
            memo.value="";
            
        }
        function memoUpper(){
            var result3 = document.getElementById("result3");
            result3.innerHTML.toUpperCase();
            
        }
        function memoLower(){
            var result3 = document.getElementById("result3");
            result3.innerHTML.toLowerCase();
            
        }
    </script>
    
    <p>문제3. 글자를 입력 후 버튼을 클릭하면 메시지 공간에 출력하고 대문자버튼, 소문자버튼을 클릭하면 해당 입력값을 대/소문자로 바꾸어 주어라(입력버튼을 클릭하면 입력창 값을 가져오고 입력창에 내용은 비워라!)</p>
    <fieldset>
        <legend>입력창</legend>
        <input type="text" id="memo" size="50">
    </fieldset>
    <br>
    <div id="result3" style="border: 1px solid red; width: 1200px; height: 200px;"></div>
    <button onclick="memoPrint();">입력</button>
    <button onclick="memoUpper();">대문자로 변경</button>
    <button onclick="memoLower();">소문자로 변경</button>
</body>
</html>

 

 

2.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    
    <script>
        function testfunc(){
            alert("hi");
        }
        window.onload = function(){
            document.getElementById("btn").onclick = function(){
                alert("인터널방식");
            }
        }
    </script>
    <script src="js_test.js"></script>
</head>
<body>
    <button onclick="javascript:alert('Hello')">눌러보세요</button>
    <button onclick="testfunc();">이것도 눌러보세요</button>
    <hr>
    <button id="btn">클릭</button>
    <button onclick="test();">클릭클릭</button>
    <br>
    <script>
        function myfunc(){
            document.write("<h1>버튼을 클릭하셨습니다</h1>")
        }
    </script>
    <hr>
    <button onclick="myfunc()">클릭</button>
    
    <script>
        function changeMessage(){
         
            var p1 = document.getElementById("p1");
            console.log(p1.innerHTML); 
            p1.innerHTML = "<span style='color:red;'>변경 후</span>";
            
        }
        function confirmTest(){
            var result = confirm("당신은 남자입니까?");
            if(result){
                alert("남자");
                
            }else
                alert("여자");
        }
        function insertData(){
            var name = prompt("당신의 이름은?");
            var age = prompt("당신의 나이는?");
            var addr = prompt("사는곳은?");
            document.getElementById("name");
            name1.innerHTML = name;
            
            var age1 = document.getElementById("age");
            age1.innerHTML = age;
            
            document.getElementById("addr").innerHTML = addr;
            
            document.getElementById("total").innerHTML = name+"/"+age+"/"+addr;
        }
        function check(){
            var id = document.getElementById("id");
            var pw = document.getElementById("pw");
            if(id.value ==""){
                alert("아이디를 입력해주세요");
            }
        }
    </script>
    <p id="p1" onclick="changeMessage();">변경 전</p>
    
    <button onclick="confirmTest();">컨펌테스트</button>
    <br><br><br>
    
    이름 : <span id="name"></span><br>
    나이 : <span id="age"></span><br>
    주소 : <span id="addr"></span><br>
    종합 : <span id="total"></span><br>
    
    <button onclick="insertData();">데이터 입력</button>
    <br><br>
    
    아이디:<input type="text" id="id"><br>
    비밀번호:<input type="password" id="pw"><br>
    <button type="button" onclick="check();">클릭</button>
    
    <hr>
    <script>
        function idTest(){
           /* var pp1 = document.getElementById("pp1");
            pp1.innerHTML="변경완료";
            */
            
           /* var pp1 = 
                document.getElementsByClassName("pp1");
                
                for(var i=0; i<pp1.length; i++){
                    pp1[i].innerHTML = "변경완료";
                }
        }*/
            
            var pp1=document.getElementsByTagName("p");
            for(var i=1; i<pp1.length; i++){
                
                pp1[i].innerHTML = "변경완료";
            }
        }
    
    </script>
    <p id="pp1" class = "pp1">내용1</p>
    <p class = "pp1">내용2</p>
    <p class = "pp1">내용3</p>
    <p class = "pp1">내용4</p>
    <p class = "pp1">내용5</p>
    
    <button type="button" onclick="idTest();">클릭</button>
    <hr><hr><hr>
    
    <script>
        var globalValue = "전역변수입니다.";
        function global(){
            alert(globalValue);
        }
        function local(){
            var localValue="지역변수입니다.";
            alert(localValue);
        }
        function tt(){
            alert(localValue);
        }
    </script>
    <button type="button" onclick="global();">전역변수</button>
    <button type="button" onclick="local();">지역변수</button>
    <button type="button" onclick="tt();">다른함수에서 호출</button>
    <hr><br><br><br>
    
    <script>
        function stringFunc(){
            var sTest = document.getElementById("stringTest");
            var str = sTest.innerHTML;
           /* alert(str.toLowerCase().toUpperCase());
            
            str = str.length;
            sTest.innerHTML = str;
        
            str=str.indexOf("J");
            sTest.innerHTML=str; 
            
            str=str.charAt(3);
            sTest.innerHTML = str;

            str = str.substring(5,8);
            sTest.innerHTML = str; */
            
            
            var data = str.split(",");
            for(var i=0; i<data.length; i++){
                alert(data[i]);
                
            }
            sTest.innerHTML = str;
        }
    </script>
    <div style = "border: 1px solid red; height: 100px; width: 400px;">
        <p id="stringTest">HTML,CSS,JAVASCRIPT,JQUERY</p>
        <button type="button" onclick="stringFunc();">
        문자열 함수 테스트</button>
    </div>
    <hr>
    <div style = "border: 1px solid red; height: 100px; width: 400px;">
        <p id="numberTest"></p>
        <button type="button" onclick="numFunc();">
        숫자 함수 테스트</button>
    </div>
    <script>
        function numFunc(){
            var id = document.getElementById("numberTest");
            //var data = Math.abs(-3.1);
            
            //var data = Math.random();
            
            //var data = Math.round(3.64);
            
            //var data = Math.floor(3.64);
            
            var data = Math.ceil(3.14);
            id.innerHTML = data;
        }
        
        function control(){
            var value = prompt("숫자를 입력하세요:");
            //입력한 숫자가 홀수인지 짝수인지 판단해서 alert으로 출력
            
//            if(value%2==0){
//                alert(value+"짝수입니다")
//            }else{
//                alert(value+"홀수입니다")
//            }
            
            value%2==0||alert("홀수입니다.");
            value%2==0&&alert("짝수입니다.");
        }
    </script>
    <br><br><br>
    <button onclick="control()">제어문 테스트</button>
    <br><br><hr><br><br>
    <style>
        #div1{
            width:300px;
            height: 300px;
            background-color: red;
            
        }
    </style>
    <div id="div1" onclick="changeColor();"></div>
    <script>
        var status = 1;
        function changeColor(){
            var div1 =
            document.getElementById("div1");
            if(status > 0){
                div1.style.backgroundColor="yellow"; 
                
            }else{
                div1.style.backgroundColor="red";
            }
            status *= -1;
        }
    </script>
    <br><br><br>
    <style>
        .changeDiv{
            border: 1px solid black;
            background-color: black;
            height: 100px;
            width: 100px;
            
        }
    </style>
    <h2>버튼으로 크기 조절하기</h2>
    <div class="changeDiv" id ="sizeChange"></div>
    <button onclick="changeSize('50px')">50X50</button>
    <button onclick="changeSize('100px')">100X100</button>
    <button onclick="changeSize('200px')">200X200</button>
    
    <script>
//        var sizeChange = document.getElementById("sizeChange");
//        function halfSize(){
//            //var sizeChange = document.getElementById("sizeChange");
//            sizeChange.style.width= '50px';
//            sizeChange.style.height= '50px';
//        }
//        function defaultSize(){
//            //var sizeChage = document.getElementById("sizeChange")
//            sizeChange.style.width= '100px';
//            sizechange.style.height= '100px';
//        }
//        Function doubleSize(){
//            //var sizeChange = document.getElementById("sizeChange")
//            sizeChange.style.width= '200px';
//            sizeChange.style.height= '200px';
//        }
        
        var sizeChange=document.getElementById("sizeChange");
        function changeSize(size){
            sizeChange.style.width = size;
            sizeChange.style.height = size;
        }
    </script>
    <br><br>
    <div class = "changeDiv" id="chColor"></div>
    <input type="color" id = "selectColor">
    <button type="button" onclick="chColor()">변경</button>
    <script>
        function chColor(){
                var chColor = document.getElementById("chColor");
                var selectColor = document.getElementById("selectColor");
                chColor.style.backgroundColor = selectColor.value;
        }
    </script>
    
</body>
</html>