• css 강의내용
  • 자바스크립트 강의내용
  • jquery 강의내용
  • 자바스크립크 강의 1회차
    • 1.JavaScript란 무엇인가? 설명
    •     문자열과 숫자열에는 "" 넣는다.
    •     변수명은 영문,숫자, 일부특수문자($,_)만 포함
    •     document.write("
      ") 사용하지 않으면, 줄바꿈이 되지 않고 옆으로 붙는다.
    •     문자형 데이터(String)____ var 변수명="사용할 문자나 숫자"
    •     숫자형 데이터(Number)____ var 변수명=숫자; 또는 Number
    •     논리형 데이터(Boolean)____ var 변수명=true or false; 또는 Boolean(0):false; 비워진 데이터(Null& Undefined)___값이 등록되지 않은 경우
    •     문자 변수 선언시 var x,y,z <-- css 문구 같이 , 는 포함하다를 선언



  • 자바스크립트 객체, 속성, 메소드 안내
    • 객체(object) 속성(property) 메소드(method)
    • 객체(object)
    •     1. 일상생활에서 나타나는 모든 사물을 자바스크립트에서는 객체라고 한다.
    •     2. html에서 사용되는 문서의 이미지, 폼들과 같은 요소를 객체라고 한다.
    •     3. 객체는 사용자가 작성할 수 있으며 이미 자바스크립트에서 제공하는 time, array등과 같은 내장 객체들도 있다

    • 속성(property)
    •     1. 자바스크립트에서는 객체는 속성을 가질 수 있다.
    •     2. 속성은 속성값을 가지고 있다. 객체와 속성을 연결할 때는 . 으로 연결하고 속성값은 = 으로 값을 전달한다
    •     예제) 객체. 속성 = "속성값"

    • 메소드(method)
    •     1. 속성이 객체의 기본값이라고 하면 메소드는 이러한 행동과 동작을 유발하는 동적개념이다.
    •     2. 메소드의 사용목적은 반복되는 동작을 실행할 때 이를 명령어로 계속 표현하는 것을 줄이고 좀더 간결하게 나타내기 위해 사용된다
    •     예제) 객체.메소드(값);




  • 자바스크립트 작성시 주의사항
    • 객체(object) 속성(property) 메소드(method)
    • 자바스크립트 작성시 주의사항
    • 1. 대소문자를 반드시 구분해야 한다
    •     예제) 변수명 = new Data(); // 날짜 객체 선언
    • 2. 구문은 한줄에 한개씩 위치한다.
    •     예제) 변수명 1 = 20;
    •     예제) 변수명 2 = 20;
    • 3. 객체, 속성, 메소드, 함수의 구분은 마침표(.) 연산자를 사용해야 한다
    •     예제) document.write ("javascript") ; // 출력문
    • 4. 문자열 표시는 따옴표를 사용해야 한다
    • 5. 따옴표 자체를 문자열에 포함시켜야 할 경우에는 역슬래시와 따옴표를 함께 사용한다. 따옴표 앞에 역슬래시 사용
    •     예제) document.write ("good \"자바스크립트\"study") ; // 출력문
    • 속성(property)
    • 1. 자바스크립트에서는 객체는 속성을 가질 수 있다.
    • 2. 속성은 속성값을 가지고 있다. 객체와 속성을 연결할 때는 . 으로 연결하고 속성값은 = 으로 값을 전달한다
    •     예제) 객체. 속성 = "속성값"

    • 메소드(method)
    • 1. 속성이 객체의 기본값이라고 하면 메소드는 이러한 행동과 동작을 유발하는 동적개념이다.
    • 2. 메소드의 사용목적은 반복되는 동작을 실행할 때 이를 명령어로 계속 표현하는 것을 줄이고 좀더 간결하게 나타내기 위해 사용된다
    •     예제) 객체.메소드(값);




  • 자바스크립크 강의 1-2회차
    • 2.JavaScript 연산자와 조건문 설명
    • 산술연산자
    • x=75, y=87 선언을 하고 add 매소드에 add=x+y x값, y값을 더해서 출력해라 document.write("합계 :"+add);

    • 대입연산자
    •    1.A+=B / 처리속도 2시간 걸린다 가정하면,
    •    2.A=A+B / 처리속도 3시간 걸린다. 그래서 위에 문구를 사용한다
    •    3.위 2가지 문구 설명 : A+B 더한값은 A이다.
    •    4.A=A-B 설명 : A-B 더한값은 A이다.

    • 증감연산자
    •    1.A==B (A와 B가 같다)
    •    2.A!=B (A와 B가 같지 않다)
    •    4.A<=B (A와 B보다 작거나 같다)
    •    5.A>B (A와 B가 크다)
    •    6.A>=B (A와 B보다 크거나 같다)

    • 관계연산자
    •     == 서로 같다, A!=B A와 B는 같지 않다
    •     연산자를 사용하면 값이 동일하면 ture 출력, 값이 다르면 false 출력이 된다

    • 논리연산자
    •    1.A&&B (A와 B가 모두 True일 경우에만 True)
    •    2.A||B (A또는 B가 True일 경우 True)
    •    3.!A (A가 True이면 False, False이면 True)
    •    4.A^B (A와 B가 모두 True거나 False이면 True)

    • 조건연산자
    •    1.? A : B 조건에 ture 앞에 선언한 값이 출력된다,
    •    2.? A : B 조건에 false 뒤에 선언한 값이 출력된다,




  • 자바스크립크 강의 2회차
    • 2.JavaScript 연산자와 조건문 설명2
      • 연산자 우선순위
      • 조건문 if
      • 조건문 if2
      • 조건문식 실행문
      • switch 스위치 문 / 선택문 [개발자 사용]
      • current 커렌트(현재) 변수



  • 자바스크립크 강의 2-2회차
    • 3.JavaScript 반복문 사용하기
      • for 반복문 사용하기
      • 중첩 for 반복문 사용하기 구구단
      • WHILE 화일문(조건문)
      • WHILE 화일문 5단 구구단
      • DO WHILE문
      • CONTINUE문 반복문에서만 사용한다
      • 자바 스크립트 소스를 감추고 자바 소스 다운로드 방법
      • 자바 스크립트 소스를 감추는 방법 2
      • 1부터 10까지의 합을 계산 결과와 함께 for문 사용
      • 버튼을 클릭하면 배경화면이 바뀌는 이벤트



  • 자바스크립크 강의 3회차
    • JavaScript 함수 정의하기
      • 함수 정의하기
      •     함수를 실행하려면 함수를 정의하고 정의된 함수를 실행해야 한다.
      •     함수를 실행하려면 함수를 정의하고 정의된 함수를 실행해야 한다.

      • 함수 정의하기 스크립트안이 아닌 body안에서 불러오기
      • 함수에서 변수 사용할 때 주의할점
      •     function 있는 var를 사용하고 출력하면 30만 나온다.
      •     function 있는 var를 지우고 출력하면 30 31 32이 출력된다.

      • 내장함수 메세지 창을 열어주는 alert 내장함수 사용법
      •     구문을 보면, 버튼을 클릭하면 팝업이뜨면서 문구가 나오는데, 그 팝업이뜨면서 팝업 안에 문구를 나타내는 함수

      • 선택 대화상자를 만들어 주는 confirm()함수 팝업버튼 클릭시 외부 html 이동
      •     18세 이상이면이라는 팝업이 뜨면서 선택을하게 하는 구문 / 예를 누르면 링크를 잡은 참이슬 홈페이지로 이동, 아니요를 누르면 다른페이지로 이동을 한다

      • 갤러리 창을이용한 sum 클릭시 이미지 교체
      •     return false; 값을 반환하고 a를 클릭 했을때 새창으로 이미지가 뜨지 않게 한다 / sum 이미지 클릭시 큰창으로 sum 이미지가 열리는것을 방지한다.

  • 바스크립크 강의 3-2회차
    • JavaScript 산술연산자 함수와 이벤트 핸들러
      • 산술계산 eval 함수 예제
      • 산술계산 eval 계산기 만들기 예제
      • isNaN 예제
      • isNaN 비밀번호 예제
      • 함수의 재규적 호출
      • 이벤트 핸들러 사용하기
      • 이벤트 핸들러 퀴즈 만들기
      • 이벤트 핸들러 롤오버 효과



  • 바스크립크 강의 4회차
    • JavaScript 객체 사용하기
      • 내장 객체 사용하기 / 메소드로 날짜와 시간 표시하기
      • D-Day 표시하기
      • 웹수업 남은 날짜



  • 바스크립크 강의 4-2회차
    • JavaScript Math.속성 또는 메소드
      • 복잡한 계산을 풀어주는 Math 메소드
      • 복잡한 계산을 풀어주는 Math 메소드 예제
      • 화면 정보를 가져오는 Screen 객체 사용하기
      • 해상도를 비교해서 출력하게 만들기



    • JavaScript 최상위 계층구조 Window객체 사용하기
      • Window객체 속성
      •     pageXOffset 윈도우 왼쪽 상단에서 우측으로 떨어진 거리를 설정 넷스케이프에서 지원
      •     pageYOffset 윈도우 왼쪽 상단에서 아래로 떨어진 거리를 설정 넷스케이프에서 지원

      • Window객체에서 사용할 수 있는 이벤트 핸들러

      • 상태줄의 내용을 설정해주는 Status속성
      • Status / 익스플로러 상태표시줄 하단 주소에 한글이 출력되게 한다

      • JavaScript Window 객체 메소드 사용하기
      • 윈도우 창을 열어주는 open() 메소드
      •     window.open("a","b","c") -
      •     a: 열리게 할 문서의 파일 이름
      •     b: 열리게 할 문서의 창 이름
      •     c: 새롭게 열릴 창의 속성
      •     창 속성 설정에 관련된 매개 변수
      •     toolbar yes/no 툴바 메뉴를 보이게 할 지를 설정
      •     location yes/no 주소 표시줄을 보이게 할 지를 설정
      •     directories yes/no 연결 표시줄을 보이게 할 지를 설정
      •     status yes/no 상태 표시줄을 보이게 할 지를 설정
      •     menubar yes/no 메뉴를 보이게 할 지를 설정
      •     scrollbars yes/no 스크롤 바를 보이게 할 지를 설정
      •     resizable yes/no 창 크기 조절을 허용할 지를 설정
      •     copyhistory yes/no 히스토리 정보를 저장할 지를 설정
      •     width 픽셀 창의 가로 길이를 설정
      •     height 픽셀 창의 세로 길이를 설정

      • 윈도우 창 열기
      • open() 메소드에 resizable 속성을 사용하여 창 크기를 조절할 수 있도록 내용을 수정
      • open() 메소드에 toolbar 속성을 사용하여 표준 단추 메뉴가 보이도록 설정
      • open() 메소드에 width와 height 속성을 사용하여 창 크기를 조절
      • shopping mall 창을 닫아주는 close() 메소드

      • JavaScript 내장 함수인 메소드들
      • 시간에 따라 반복하여 명령을 수행하는 메소드들
      •     A = setInterval(a,b) - a : 함수나 명령어
      •     b : 지연 시간 (1/1000초 단위)
      •     clearInterval(A) - 변수 A에 정의된 setInterval()의 실행을 중지