PHP 태그 

기본 설정 상태에서 php 태그를 사용법은 다음의 3가지가 있다.

영어명 한국어명 예시 설명
Standard tag 표준 태그, 긴 태그, <?php echo 'hello'; ?> 항상 사용 가능
Short open tag 짧은 여는 태그, 짧은 태그 <? echo 'hello'; ?> 기본값은 사용불가, short_open_tag=On
Echo shortcut echo 단축 태그 <?=$var?> 변수 하나만 출력하고 싶다면 아래와 같이 사용할 수 있다.
$var은 php의 변수라고 생각하면 된다.
  • 짧은 태그를 사용하기 위해서는 php.ini에 short_open_tag가 On으로 설정되어 있어야 한다. 
  • 짧은 태그를 권장되지 안흔ㄴ 것은 xml태그 표현과 겹치기 때문이다.
<?xml version="1.0" encoding ="UTF-8"?>
  • echo는 C언의 printf처럼 문자열을 출력하는 역할을 한다.
/*echo*/
echo '<p>Hello World!</p>'; //''방식
echo "<p>Hello World!</p>"; //""방식
echo '<p> hello '.'World</p>' //문자열 연결

 

PHP 변수 

  • php에서 변수는 $기호로 시작하게 된다. 따로 자료형을 선언할 필요는 없으며, 그냥 변수를 선언하거나 선언과 동시에 초기화 해주면  알아서 적절한 자료형이 결정된다. 
  • php는 형 강도가 매우 약한 언어이다.
  • 형 변환은 C언어 처럼 $a=(double)$b; 와 같은 형태로 사용한다.
  • 가변 변수 : 변수의 이름을 새로운 변수에 저장할 수 있으며 $$을 통해서 그값에 접근, 제어할 수 있다.
/*php 변수*/

$a=0;
$var='a';

/*추가*/
$$var =5; // $a=5;와 같다.
echo $a; // 5
/* $var 의 값은 문자 a가 된다...*/

 

참조연산자

$a = 5;
$b = $a;
$a = 7; // $b는 바뀌지 않는다.(일반적인 예)
 
$a = 5;
$b = &$a; // 참조연산자
$a = 7; // $a, $b 모두 7
 
unset($a); // $a값이 없어진다. $b=7은 유지된다.

 

jQuery는 '명령 대상 ($('#typo'))에 명령 내용 (css('color','#ebc000'))을 보낸다'고 해석한다.

 

명령 내용

css('color','#ebc000');

"CSS의 color 속성에 #ebc000라는 값을 지정하라"

css()라는 명령은 JavaScript에 정의되어 있지 않은 jQuery의 명령입니다. 즉 jQuery의 js파일 안에 css() 라는 명령이 정의되어 있으며, 해당 명령을 main.js에서 이용합니다.

이러한 jQuery의 명령을 'jQuery메서드' 라고 합니다. (이후에는 '메서드' 라고 표기하겠습니다.)

또한 css()의 괄호() 안에 작성한 CSS 속성과 값 처럼, 메서드에 전달되는 데이터를 '매개변수'라고 합니다.

우선 위 코드가 jQuery 메서드 (css() )와 두 개의 매개변수 ('color', '#222') 로 구성되어 있음을 알아야합니다.

 

 

명령 대상 : $() 함수와 jQuery 객체

css() 메서드의 '명령 대상' 이 되는 것은 'id=typo'가 지정된 HTML 요소' 입니다. 하지만 jQuery는 HTML요소에 직접 css() 메서드를 실행할 수 없습니다. css() 메서드를 사용하려면 jQuery 명령 대상을 고유의 형식으로 지정해야한다. 

$('#typo')

$() 함수는 'HTML 요소를 기반에 두고 jQuery의 고유 요소를 생성한다 라는 기능이 있는 함수이다. 

$()함수와 css() 메서드는 매개변수를 전달받는다는 의미에서 비슷하지만, $()는 메서드라고 말하지 않고 함수라고 한다. 그 차이는 이해하기 어렵기 때문에 명령문 앞에 점(.)이 붙어 있으면 '메서드', 점이 붙어 있지 않으면 '함수'라고 이해하면 된다.

 

 

 

점과 세미콜론의 역할

$() 함수와 css() 메서드 사이에는 점(.)으로 jQuery 객체와 jQuery 메서드를 이어주는 것을 확인할 수 있습니다.

즉 점(.)은 jQuery 객체와 메서드를 이어주는 역할이라고 생각하면 됩니다.

 

 

'Web > jQuery' 카테고리의 다른 글

jQuery CSS 스타일 변경하기  (0) 2021.02.09
JQuery?  (0) 2021.02.08
jQuery.ready() 란  (0) 2021.02.04
용어 설명
라이브러리 웹 페이지에 구현할 수 있는 기능과 효과등을 하나의 프로그램에 모아서 정리한 것
플러그인 플러그인은 라이브러리에 의존해서 기능과 효과 등을 확장하는데 사용하는 프로그램 중 하나이다.
확장 라이브러리 쉽게 설정하면 '플러그인을 정리한 것'이다. 예를 들어 jQuery를 사용해서 UI를 구축하는 작업에 특화한 확장 라이브러리로 'jQuery UI'가 있다.
함수 어떤 값(인수)을 전달하면 그 값을 처리하여 결과값을 반환하는 하는 기능

 

jQuery를 사용하여 CSS 스타일을 변경해 보겠습니다.

 

HTML 코드

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content ="IE= edge">
    <title>Creative jQuery</title>
    <link rel = "stylesheet" href ="./css/normalize.css">
    <link rel ="stylesheet" href="./css/main.css">

    <script src = "./js/vendor/jquery-1.10.2.min.js"></script>
    <script src = "./js/vendor/jquery-ui-1.10.3.custom.min.js"> </script>
    <script src = "./js/main.js"></script>


  </head>
  <body>
    <header class ="page-header" role = "banner">
        <h1> Creative jQuery Sample </h1>
    </header>

    <div class = "page-main" role="main">
        <div id ="typo"> //변경될 부분
            <div class ="inner"> Creative jQyery </div>
        </div>
    </div>

    <footer class ="page-footer" role ="contentinfo">
        <small class ="copyright"> COPYRIGHT *copy;
            <a href = "http://shsdfjk.co.jp" target ="_blank">
                SHIFTBISIA INC. </a>
        </small>
    </footer>



   </body>
</html>

 

main.js

$(function()
{
  $('#typo').css('color','#ebc000');
});

 

스타일을 변경하는 코드

$('선택자').css('속성', '');

 

 

더 자세하게 설명하는 css() 메서드

 

css() 메서드에서 현재 속성값을 검색하는 방법
$(function() {
	$('#typo').css('color');
});

위 코드는 현재 속성값을 검색만 합니다. 따라서 코드를 실행하면 웹 브라우저에서 아무것도 변화하지 않습니다. (HTML 요소에는 아무런 변화가 없습니다.) 이런 코드를 작성하는 경우는 뒤에서 설명할 것이므로 여기서는 '현재 속성값을 검색할 수 있다." 라고만 기억하면 됩니다. 

 

css() 메서드에서 여러 가지 속성값을 한꺼번에 변경하는 방법

css() 메서드에서 여러 가지 속성값을 한꺼번에 변경하려면 코드를 어떻게 작성해야 할까요? 예를 들어 다음과 같은 코드를 작성하는 사람도 있을 겁니다.

  • 여러 가지 속성값을 변겅하는 방법 (1)
$(function() {
	$('#typo').css('font-size', '50px');
    $('#typo').css('background-color', '#ae5e9b');
    $('#typo').css('color', '#ebc000');
});
  • 효율적인 변경하는 방법
$('선택자').css({
	'속성 1' : '수치 1',
    '속성 2' : '수치 2',
    '속성 3' : '수치 3',
 });
  • 여러 가지 속성값을 변겅하는 방법 (2)
$(function(){
	$('#typo').css({
    	'font-size' : '50px' ,
        'background-color : '#ae5e9b',
        'color : 'ebc000'
    })
});
  • 여러 가지 속성값을 변겅하는 방법 (3)
$(function(){
	$('#typo').cs({
    	fontSize : '50px',
        backgroundColor : '#ae5e9b',
        color : '#ebc000'
   })
});

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'Web > jQuery' 카테고리의 다른 글

jQuery 기본 구문 설명  (0) 2021.02.09
JQuery?  (0) 2021.02.08
jQuery.ready() 란  (0) 2021.02.04

함수를 호출해서 실행하는 방법은 총 네 가지입니다.

  • 함수 호출
    • 함수의 참조가 저장된 변수 뒤에 그룹 연산자인 ()를 붙여서 함수를 호출합니다.
    • var s = square(5);
  • 메서드 호출
    • 객체의 프로퍼티에 저장된 ㄱ밧이 함수 타입일 때는 그 포로퍼티를 메서드라고 부른다. 메서드를 호출할 때는 그룹 연산자인 ()를 붙여서 호출합니다. 이는 함수 호출과 본질적으로 같은 방법입니다. 
    • obj.m =function() {...};
    • obj.m();
  • 생성자 호출
    • 함수 또는 메서드를 호출할 때 함수의 참조를 저장한 변수 앞에 new 키워드를 추가하면 함수가 생성자로 동작한다. 
    • var obj = new Obejct();
  • call, apply를 사용한 간접 호출
    • 함수의 call과 apply 메서드를 사용하면 함수를 간접적으로 호출할 수 있습니다. 

 

 

라이브러리란?

자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드

"CSS를 적용할 수 있으며 DOM을 쉽게 다룰 수 있다."

보통웹 페이지에서는 id 속성과 class 속성으로 지정한 HTML 요소에 javaScript에서 구현한 기능이나 효과를 추가합니다. (id는 html에서 고유한 이름 class는 html에서 고유하지 않은 집합의 이름)

HTML요소를 이렇게 조작하거나 바꾸는 작업을 DOM 조작이라고 함

 

jQuery? 

  • 엘리먼트를 선택하는 강력한 방법 제공
  • 선택된 앨리먼트들을 효율적으로 제어할 수 있는  다양한 수단을 제공
  • 자바스크립트 라이브러리

jQuery를 사용해서 HTML 요소 추가

$('#books > ul.list').append('<li>Creative jQuery</li>

위의 코드에서는 CSS(#books>ul.list)와 HTML(<li>Creative jQuery</li> 이 함께 사용되는 것을 알 수 있습니다. 위 코드를 실행하면 HTML은 1번과 2번을 통해 다음과 같이변경 됩니다.

번경전

<div id = "books">
	<ul class ="list">
    	<li> Text of jQuery </li>
    </ul>
</div>

변경후

<div id = "books">
	<ul class ="list">
    	<li> Text of jQuery </li>
        <li> Create jQuery </li> //추가
    </ul>
</div>

 

코드를 적게 작성하므로 개발 시간을 단축할 수 있습니다.

JavaScript

  • 버튼을 눌러 'Hello World'를 출력하는 코드
var button =documetn.getElementById('greeting'),
	sayHello =function(){
    	alert("Hello World");
     }; 
 if(button.addEventListener){
 	button.addEventListener('click',sayHello,false);
 }else if (button.attachEvent){
 	button.attachEvent('onclick',sayHello);
 }

 

jQuery

  • 버튼을 눌러 'Hello World'를 출력하는 jQuery 코드
$('#greeting').on('click',function() {
	alert('Hello World!');\
 });

 

Hello world - 첫번째 jQuery

사용방법

1. 직접 서비스하는 경우

  • http://jquery.org에서 jQuery 소스코드를 다운로드한다.
  • 위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다.

2. 구글의 자바스크립트 라이브러리를 사용하는 경우

<html>
     <body>
         <div class="welcome"></div>
         <div class="welcome"></div>
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
         <script type="text/javascript">
                 $('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
         </script>
     </body>
 </html>

 

'Web > jQuery' 카테고리의 다른 글

jQuery 기본 구문 설명  (0) 2021.02.09
jQuery CSS 스타일 변경하기  (0) 2021.02.09
jQuery.ready() 란  (0) 2021.02.04
웹 브라우저에 내장된 대화상자를 활용하여 입출력하는 방법을 배웁니다. 대화상자는 실제로 프로그래밍을 할 때 자주 사용되는 요소는 아니지만 입출력이 간단하기 때문에 프로그래밍을 학습할 때 자주 사용된다.

 

대화상자

웹 브라우저의 전역 객체인 Window 객체에는 대화상자를 표시하기 위한 메서드가 세 개 있다. 

  • alert
  • prompt
  • confirm

window.alert : 경고 대화상자를 표시

alert("안녕하세요")

window.prompt : 사용자의 문자열 입력을 받는 대화상자를 표시

var name = prompt ("이름을 입력하세요");
//초기값 지정
var name = prompt ("이름을 입력하세요" , "이현규" );
//prompt가 반환하는 값은 문자열이므로 숫자 값을 구 하려면 parseInt나 parseFloat 메서드를 이용해야한다.
var age = parseInt(prompt("나이를 입력하세요");

window.confirm : [확인] 버튼과 [취소] 버튼이 있는 대화상자를 표시 

var ret = confirm("취소, 확인 버튼을 클릭하세요");

 

console

  • console.dir : 객체의 대화형 목록 출력
  • console.error : 오류 메세지를 출력
  • console.info : 메시지 타입 로그를 출력
  • console.log : 일반 로그를 출력 
  • console.time : 처리 시간 측정용 타이머 시작
  • console.tiomeEnd : 흐른 시간을 밀리초 단위로 출력
  • console.trace : 스택 트레이스를 출력
  • console.warn : 경고 메세지를 출력

 

타이머

console.time("answer_time");

alert("확인 버튼을 누르십시오");

console.timeEnd("answeR_time"); //answer_time :1236.106ms.

 

 

HTML 요소의 석성에 이벤트 처리기 등록하기

HTML 요소에 이벤트 처리기 속서을 설정하면 그 요소에 이벤트가 발생했을 때 동작하는 이벤트 처리기를 등록할 수 있습니다. 예제를 살펴보면 예제 6-1 CLICK 버튼을 클릭하면 콘솔에 현재 시각을 표시하는 프로그램입니다.

<!DOCTYPE html>
<html">
<head>
  <meta charset="utf-8">
  <title>시각을 콘솔에 표시하기</title>
  <script type="text/javascript">
      function displayTime(){
        var d =new Date();
        console.log("현재시각은 " + d.toLocaleString() + "입니다");
        
      }

    </script>
</head>
<body>
    <input type="button" value = "click" onclick = "displayTime()">
</body>
</html>

 

위의 소스에서 가장 핵심은 onclick="displayTime()" 이며 input 요소를 클릭 했을 때 함수 displayTime이 실행되는 것이다.

JS와 HTML의 차이

JS는 동적이라 1+1을 계산해서 웹상에 뿌려준다. 하지만 HTML은 그냥 그대로 뿌려준다

<<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
    <h1> javascript </h1>
  <body>
    <script type="text/javascript">
      document.write(1+1);
    </script>
    <h1> html </h1>
    1+1
  </body>
</html>

 

 

이벤트

onclick 속성

onclick 클릭 했을 때 이미 기억하고 있던 동작하는 메소드 (=Event)

onchange 속성

마우스 포인터가 창 밖으로 나간 동작을 인식하는 메소드

onkeydown 속성

키를 눌렸을 때 동작하는 메소드 

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type ="button" value ="hi" onclick="alert('hi')">
    <input type ="text" onchange="alert('onchange')">
    <input type ="text" onkeydown="alert('key down!')">
  </body>
</html>

 

+ Recent posts