SCRIPT8009: 'Ajax'이(가) 정의되지 않았습니다. 

해당 메세지는 prototype.js 파일을 추가하지 않아 발생한 오류였습니다.

해결방법으로 

<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>  파일 추가 없이 또는

prototype.js 파일을 추가해주면 됩니다.

<script language="JAVASCRIPT" src="/admin/js/prototype.js"></script>

prototype.js

json을 이용해 개발중 스크립트 오류( SCRIPT8009: 'JSON'이(가) 정의되지 않았습니다. )가  발생했는데요.

json은 ie8이상부터 지원하는 메소드라고 하네요.

ie5환경에서 개발중이라 json 메소드를 지원하지 않아 발생한 오류였습니다.

해결방법으로 json.js 파일을 추가해주면 됩니다.

<script language="JAVASCRIPT" src="/admin/js/json.js"></script>

첨부파일 참고하세요. 

json.js

input 태그에서 disabled와 readonly 속성은 모두 입력을 못하게 하는 기능으로 같습니다.

하지만 from 태그에서 sumbit시에 차이점이 있습니다.

readonly의 경우 form 데이터로 전송이 가능하지만

disabled의 경우 from 데이터로 전송이 불가능합니다.

상황에 따라 사용하면 될 것 같습니다!

값을 입력해서 두 날짜의 차이를 구하는 소스입니다.

조건은 제가 추가한 것이니 계산하는 식만 참고하시면 될 것 같습니다.

	

		
년월일시분
			
년월일시분
			

	
 

	

		

			

				년
				월
				일
				시
				분
			
			

				년
				월
				일
				시
				분
			
			

		
	
 

자바스크립트 사용 시 유용한 JSON 객체 사용에 대해 알아보겠습니다.

JSON(JavaScript Object Notation)

주로 웹 브라우저에서 웹 서버로 정보를 전송할 때 쓰인다고 합니다.

1. JSON.parse() (String -> JSON)

- parse  메소드는 String객체를 JSON객체로 변환시켜줄 때 사용합니다.

예제를 통해 자세히 알아보겠습니다.

<script>

var text = {"name":"shin", "age":27, "city":"Seoul"};

var obj = JSON.parse(text);

console.log(obj); // {"name":"shin", "age":27, "city":"Seoul"}

console.log(obj.name + ", " + obj.age); // shin, 27

</script>

2. JSON.stringify() (JSON -> String)

- stringify 메소드는 parse메소드와 반대로 JSON객체를 String객체로 변환시켜줄 때 사용합니다.

예제를 통해 자세히 알아보겠습니다.

<script>

var text = '{"name":"shin", "age":27, "city":"Seoul"}';

var obj = JSON.parse(text);

var str = JSON.stringify(obj);

console.log(str); // {"name":"shin","age":27,"city":"Seoul"}

console.log(str.name); // undefined

</script>

게시판이나 입력 폼 등에서 글자수를 제한해야할 때가 있습니다.

ex) 자소서 문항에서 1000자 내외로 입력하세요. 

input 태그에서는 maxlength를 통해 글자수를 제어하면 됩니다.

textarea에서는 maxlength가 없습니다.

하지만, 스크립트를 통해서 제어할 수 있습니다.

함수예고(함수=수납상자)

nightDayHandler(){} 함수를 정의함으로써 긴 코드의 길이를 줄일 수 있습니다.

함수

BASIC

코드가 반복되어야 하는 경우 반복문을 처리해 사용하면 되지만 연속적으로 반복해야 하는 경우가 아니라면 반복문을 사용할 수 없게 됩니다. 이때 함수를 사용해 해결할 수 있습니다.

<h1>Function</h1>

 <h2>Basic</h2>

 <ul>

      <script>

        function two(){

          document.write('<li>2-1</li>');

          document.write('<li>2-2</li>');

        }

        document.write('<li>1</li>');

        two();

        document.write('<li>3</li>');

        two();

      </script>

</ul>

Parameter & Argument 함수 입력부분이 파라미터

<h2>Parameter & Argument</h2>

    <script>

      function onePlusOne(){

        document.write(1+1+'<br>');

      }

      onePlusOne();

      function sum(left, right){  //left, right를 매개변수 parameter

        document.write(left+right+'<br>');

      }

      sum(2,3); //5 2,3을 인자 argument라 합니다.

      sum(3,4); // 7

    </script>

Return 함수 출력부분은 리턴

<h2>Return</h2>

    <script>

      function sum2(left, right){

        return left+right;

      }

      document.write(sum2(2,3)+'<br>');

      document.write('<div style="color:red">'+sum2(2,3)+'</div>');

      document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');

    </script>

함수의 활용

함수를 호출할 때 인자로 this를 주면 nightDayHandler(self)함수 내에 포함되어 있는 input태그 자체가 인자로 함수에 전달됩니다. 함수는 self라는 파라미터로 인자로 전달받게 되고 self라는 값은 함수를 호출한 input태그가 됩니다. 따라서 클릭을 함으로 value가 night와 day로 변경이 됩니다. 

WEB
  
  
  

    
HTML
    
CSS
    
JavaScript

WEB
  
  
  

    
HTML
    
CSS
    
JavaScript

객체예고

객체는 변수와 함수를 정리정돈하기 위한 도구

function LinksSetColor(color){ //a태그 전체의 색을 변경

    var alist = document.querySelectorAll('a');

    var i = 0;

    while(i < alist.length){

      alist[i].style.color = color;

      i = i + 1;

    }

  }

  function BodySetColor(color){ //바디태그의 글씨색을 변경

    document.querySelector('body').style.color = color;

  }

  function BodySetBackgroundColor(color){ //바디태그의 배경색을 변경

    document.querySelector('body').style.backgroundColor = color;

  }

  function nightDayHandler(self){

    var target = document.querySelector('body');

    if(self.value === 'night'){

      Body.setBackgroundColor('black');

      Body.setColor('white');

      self.value = 'day';

      Links.setColor('powderblue');

    } else {

      Body.setBackgroundColor('white');

      Body.setColor('black');

      self.value = 'night';

      Links.setColor('blue');

    }

}

객체를 만들지 않았기 때문에 함수는 동작하지 않습니다.

객체(object)

객체의 쓰기와 읽기

<h1>Object</h1>

    <h2>Create</h2>

    <script>

      var coworkers = {

        "programmer":"egoing",

        "designer":"leezche"

      };

      document.write("programmer : "+coworkers.programmer+"<br>");

      document.write("designer : "+coworkers.designer+"<br>");

      coworkers.bookkeeper = "duru";

      document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");

      coworkers["data scientist"] = "taeho";

      document.write("data scientist : "+coworkers["data scientist"]+"<br>");

    </script>

객체와 반복문

<h2>Iterate</h2>

<script>

    for(var key in coworkers) {

      document.write(key+' : '+coworkers[key]+'<br>');

    }

</script>

프로퍼티와 메소드(자바스크립트에서 객체는 함수도 담을 수 있습니다.)

<h2>Property & Method</h2>

    <script>

      coworkers.showAll = function(){

        for(var key in this) {

          document.write(key+' : '+this[key]+'<br>');

        }

      }

      coworkers.showAll();

    </script>

showAll함수 안에서 소속된 객체를 가리키는 약속된 기호를 this 

객체의 소속된 변수에 값으로 함수를 만들 수 있습니다.

객체의 소속된 함수를 메소드, 객체의 소속된 변수를 프로퍼티 

객체 활용

WEB
   
   

     
HTML
     
CSS
     
JavaScript
   
   
JavaScript
  

WEB
   
   

     
HTML
     
CSS
     
JavaScript
   
   
JavaScript
  

파일로 쪼개서 정리 정돈하기

수정하고자 하는 코드를 변경하면 코드가 실행되지만 여러 개의 코드가 있는 경우 각각의 코드를 변경하는 것이 쉬운 작업은 아닙니다.

.js파일로 따로 공통된 코드를 정의하여 <script src=”colors.js”></script> 구현하면 쉽게 처리할 수 있습니다. js파일 내에는 <script>태그가 들어가면 안됩니다.

.js파일에 따로 코드를 분류를 하게 되면 유지보수가 수월해집니다.

코드의 명확성이 높아지고 가독성이 높아지게 됩니다. 여러 개의 파일로 쪼개는 것이 파일을 정리정돈하는 방법입니다.

*웹 페이지에 다운로드된 파일은 컴퓨터에 저장되어 다음 접속 시에는 저장된 파일을 읽어 네트워크를 통하지 않게 합니다. 서버입장에서 비용을 절감하는 효과를 얻습니다. 사용자 입장에서 네트워크 트래픽을 절감하고 빠르게 웹 페이지를 볼 수 있는 효과가 있습니다.

라이브러리와 프레임워크(서로 협력하는 모델)

라이브러리는 재사용하기 쉽도록 정리정돈 되어있는 소프트웨어. (만들어진 것을 쓰는 것)

프레임워크는 만들고자 하는 것이 있을 때 무엇이냐에 따라 게임, 웹, 채팅 등

만들고자 하는 부분에 공통부분을 프레임워크 개성에 따라 다른 부분만 수정할 수 있도록 하는 것.

라이브러리(jQuery)

CDN(Content Delivery Network): 직접 라이브러리를 다운로드 받아 프로젝트 포함시켜 업로드하고 서비스하려면 비용이 듭니다. 많은 라이브러리가 CDN을 통해 자신들의 서버에 파일을 보관해 우리는 그것을 <script src=”.js”>를 통해 가져가는 방식으로 사용료까지 내줌으로 편한 작업입니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

var Links = {

   setColor:function(color){

$('a').css('color', color);

   }

 }

UI(User Interface) vs API(Application Programming Interface)

UI : 사용자가 조작 장치를 이용해 웹 애플리케이션을 사용하고 있는 것

 API : 경고창이 실행되는 것은 웹 브라우저를 만드는 사람이 경고창을 미리 만든 것, 조작 장치 alert을 API라고 합니다.

사용자는 UI, 프로그래머는 UI+API를 모두 사용, 자신만의 응용프로그램을 만들 수 있다.

수업을 마치며

Cookie 개인화된 서비스를 제공, offline web application 인터넷이 끊겨도 동작하고자 하는 앱

webRTC 화상통신, webGL 3차원 그래픽, webVR 가상현실

출처 : 생활코딩 강의

제어할 태그 선택하기

자바스크립트로 할 수 있는 중요한 일 사용자와 상호작용해서 HTML, CSS를 동적으로 변경해 보다 사용자와 대화하는 듯한 느낌의 애플리케이션을 만드는 핵심적 원리

프로그램, 프로그래밍, 프로그래머

컴퓨터 언어 (HTML, CSS)

컴퓨터 프로그래밍 언어(JavaScript)

프로그램 이란, 순서.

그 순서를 만드는 행위가 '프로그래밍'

그 순서를 만드는 사람이 '프로그래머'

HTML은 웹 페이지를 묘사, 자바스크립트는 사용자와 상호작용하기 위해 개발된 언어

반복적으로, 조건에 따라 다른 기능을 실행

조건문 예고

비교 연산자와 Boolean 데이터타입

조건문

조건문의 활용

리팩토리(refactoring)

중복을 끝까지 찾아서 없애라!

반복문 예고

배열, 반복적인 작업 처리를 위한 반복문

배열(Array)

배열은 데이터 중 연관 된 데이터를 잘 정리정돈 해 담아 놓는 수납상자, array

반복문(Loop)

반복해야 할 2줄의 코드가 1억개라면 copy&paste가 불가능합니다. 만약 했더라고 오류가 발생한다면 다시 수정해야 하는 어려움이 발생, 이때 반복문을 사용합니다.

배열과 반복문

스크립트에 신경 쓸 필요 없이 데이터 자체에 집중하는 효과를 얻을 수 있습니다.

배열은 연관된 데이터를 정렬, 순서대로 자동화된 처리하는 것이 반복문

배열과 반복문의 활용

WEB

 

    
HTML
    
CSS
    
JavaScript
 

WEB

 

    
HTML
    
CSS
    
JavaScript
 

출처 : 생활코딩 강의