PHP Exploring POST vs. GET and Validating form data using JavaScript

다음은 indexphp입니다

(예제에서는 suggestInputhtml이됩니다) 우리에게는 양식이 있습니다 우리는 두 개의 텍스트 필드를 갖게 될 것입니다 시각적 예제에는 텍스트가 아닌 여러 유형의 필드가 있습니다

그래서, txtName txtEmail 제출 버튼

만약 내가 method = "post" 양식 필드와 그 값은 어떻게 서버에 전달됩니까? 은유는 무엇입니까? 가방! 그래서 요청은 가치를 취할 것입니다 각 분야의 제출 버튼, 우리가 지난 주에 그것을 발견했기 때문에, 그것은 <form> 내부의 모든 것의 가치를 취할 것입니다 그것을 서버로 보냅니다 그래서 저는 서버 측 코드를 표시 할 것입니다 이 정보를 어떻게 얻을 수 있을까요? 요청의? 우리는 어떻게 그것을 "여행 가방"에서 꺼내 죠? 예, POST 방법을 사용합니다

자, 만약 $ _ [ "txtName"]이 (가) 비어 있습니까? 서버에서 무슨 일이 벌어 질까요? 그것은 추락 할 것입니다 PHP 프로그램은 "변수가 없습니다!"라고 말할 것입니다 지난 주에 어떤 방법을 사용하여 테스트했는지 알아 보았습니다 txtName이라는 POST "가방"안에 뭔가가 있는지 확인하려면? [학생] isset ()을 사용하십시오 [Peter] 그래서 우리는 isset ()을 사용할 것입니다

프로그램의 서버쪽에있는 PHP 내부 그리고 우리는 isset ($ _POST [ "txtName"])) if 또는 값을 가져 오려는 양식 필드의 이름을 지정하십시오 그것이 사실이라면 왜 변수를 설정하지 않습니까? 그래서 우리는 "txtName에 뭔가가 있다면 " "그런 다음 $ txtName 변수에 저장하십시오 그런 다음 나머지 변수를 통해 해당 변수를 모두 사용할 수 있습니다 거기에 아무것도 없다면? 우리 else 절에 무엇이 들어 갈까요? 우리 뭐 할까? (저는 제임스에게 그 것을 다시 보낼 것입니다) 요청 웹 페이지가 나에게 아무 것도 보내지 않으면 어떻게해야합니까? 나는 떠날 수 없다 그것은 깨질 것이기 때문입니다

[학생] 오류 메시지를 표시 하시겠습니까? 글쎄, 난 할 수 없어 웹 작업을하고 오류 메시지를 보내지 않으므로 오류 메시지를 표시하십시오 다시 사용자에게 왜 내가 그걸 무언가로 설정하지 그래? 그래서, "=" 양식 페이지에서 아무 것도 얻지 못하면이 변수에 일종의 메시지를 넣으십시오 나는 "알지 못함"을 가장 우호적 인 것으로 말할 것입니다

(이 코드 예에서는 "가장 좋아하는 사용자"를 사용합니다) 그러나 적어도 변수에 무언가를 할당하고 있습니다 그러면 프로그램이 중단되지 않습니다 이 변수를 직접 사용하면 변수가 비어있는 경우 프로그램이 중단됩니다 이제 다른 질문은 JavaScript에 관한 것입니다

여기 (클라이언트 측 HTML 코드에서) 제출 버튼을 클릭하십시오 우리는 여기에 와서 다음을 추가합니다 : onclick = " onclick = "return validate ();" 그래서, 내 <script> 요소에서 <head> 나는 validate () 함수를 가질 것이다 그리고 우리는 무엇을 시험 할 것인가? if txtNamevalue = = ""(공백 따옴표 – 공백이 없습니다!) 너는 무엇 할거니? 경고 ( "귀하의 이름을 입력하십시오"); 그런 다음 암호 및 다른 필드에 대해 다른 if 문을 추가합니다 그래서 우리는이 스크립트를 제자리에두고 있습니다

그래서 당신은 이것이 할 수 없다는 것을 알고 있습니다 우리의 행동 (이 중 하나가 비어 있으면 validate () 함수는 false를 반환하기 때문에이 텍스트 필드에 무언가가 존재하지 않는 한) 다시 서버로 왜 우리는 isset ()이 필요합니까? 제임스, 우리가 휴식 시간에 이것에 대해 이야기했기 때문에 대답 해 드리겠습니다 그것이 설정되어 있는지 확인하십시오

맞았 어 근데, 우리가 그것을 설정했는지 확인 했어 우리는 자바 스크립트로 그걸 확인했다 그들은 JavaScript를 사용하지 않았을 수 있습니다 아, 네, 그들은 JavaScript를 사용하지 않았습니다

사람들의 20 %가 선회하고 있습니다 브라우저에서 자바 스크립트가 사용 중지되었습니다 따라서 사용자의 20 % 이 자바 스크립트를 모두 무시할 수 있습니다 테스트 따라서 서버에서 특정 내용을 확인하는 방법입니다

각 변수에 대해 값이 있음을 나타냅니다 이제 여기 (클라이언트 측에서) 당신은 경고 ()를하고 즉시 사용자에게 말할 수 있습니다 그런 다음 할 수 있습니다 txtNamefocus () 비어있는 입력란에 사용자를 다시 넣을 수 있습니다

그래서, 당신은 "이봐, 너 비워 놨어"라는 팝업을 할 수있다 그 자리에 커서를 이동 시키면 즉시 입력 할 수 있습니다 하지만 자바 스크립트를 사용하지 않으면 제출 버튼을 클릭하여 여기에 올 수 있습니다 (서버에서) 값이 비어있을 수 있습니다

따라서 서버 측의 isset ()을 사용하여 여전히 두 번 확인하십시오 그 무늬가 보이니? 이중 수표가 보이니? 우리는 $ _POST []를 사용하여 txtName 값을 얻습니다 양식 요청에서 암호 또는 다른 텍스트 필드를 가져 오기 위해 사용하는 것은 무엇입니까? 둘 다 $ _POST []를 사용하십시오 우리는 $ _GET [}를 무엇을 위해 사용할 것인가? [학생] URL을 사용하거나 요청이 어디에서 왔는지를 알고 싶습니다 네, 그래서 우리가 무엇을하려고할까요

그냥 말하는 대신 action = "suggestResponsephp"파일 이름을 우리는 수동으로 여기에 집어 넣을 것입니다 (행동 값의 끝에서) ? source = suggestInput

php 그래서, 여기이게 뭐야? (예제에서 파란색 밑줄이 그어진 코드) 이것은 내 GET 데이터가 될 것입니다 이러한 txtName, txtEmail, optGender, selAgeRange 및 btnSubmit이 내 POST 데이터가됩니다 동시에 두 곳 (POST와 GET)을 할 수있는 곳을 알고 있습니까? 우리가 사용하는 방법은 무엇입니까? method = "POST"우리는 이 필드 값은 패킷 또는 가방으로 서버에 전송됩니다 이 경우 GET은 수동으로 추가됩니다

방법을 설정했다면 "GET"은 어떻게 되었을까요? txtName, txtEmail, optGender, selAgeRange 및 btnSubmit 값을 사용합니다 action = ""속성에 나열된 파일 이름에 추가하십시오 우리가 여기 서버 측에 왔을 때 어떤 일이 벌어 질 것입니까? $ _POST []를 사용하는 대신 $ _GET []을 사용합니다 여기 $ _POST []를 사용하여 txtName을 사용했습니다 어떤 것 서버 측에서 $ _GET []이라면 사용합니다

[학생] 나도 몰라 같은 일 $ _ post []와 $ _get []는 모두 양식 필드 id와 그 값을 취합니다 그래서, 그것은 프로그램이 "가방"에 무엇을 집어 넣었는지, 그리고 일단 $ _post [] 배열로 읽어 들인 것이 서버에 도착하면 어떻게되는지를 알 수 있습니다 그래서, 모든 사람들이 $ _POST []가 어떻게 배열인지 이해할 수 있습니까? [학생] 집에 갈 때 헤어지 죠

글쎄, 내가 너에게 말할거야 그 사람이 양식의 제출 버튼 클릭 다음 양식에 항목은 각 양식 항목의 이름을 취합니다 이것이 변수의 이름입니다 (사용자가 입력 한) 가치를 취하고 그것을 끌어 올립니다 값으로 그것이 서버에 올 때

서버가 PHP 코드를 실행하기 전에 서버가 수행하는 작업 POST 패킷 (가방)이 열려 있습니다 $ _POST []라는 배열을 만듭니다 그 배열의 이름을 지정하는 대신 인덱스는 0, 1, 2 등을 사용합니다

우리가 익숙해 진 것처럼, 배열을 좋아한다는 것을 배웠던 것처럼, 그것은 "txtName" 사용자가 입력 한 내용이 무엇이든 "피터"또는 "테스터 1"이라고 가정 해 봅시다 서버는 그것을 배열의 값 부분에 넣습니다 따라서 txtName은 배열의 인덱스입니다 "테스터 1"은 해당 색인과 관련된 값입니다 $ _POST []와 $ _GET []는 연관된 배열이라고 불립니다

다음 주에 우리가 배열을 공부할 때 당신은 그 사람들에게 갈 것입니다 POST가 서버에 오면이 배열 $ _POST [] 자동으로 작성되며 이것이 정보에 액세스하는 방법입니다 코드는 $ _POST [] 배열에서 'txtName'을 찾고 'txtName'과 연결된 결과 또는 값은 "Peter"또는 "Tester 1"이거나 사용자가 양식에 입력 한 값입니다 [Student] $ _POST []는 다른 데이터 타입을 사용할 수 있습니까? 네, 그리고 그것은 모두 자동입니다 당신은 그것에 대해 걱정할 필요가 없습니다

(편집자 : 자동이 아니며 항상 문자열입니다) [Reed] 일부 GET을 위해, 그것은 실제로 되돌아 갔다 그 문서에서 바로 ?? 알았어? [피터] 아니, GET에서 어떻게되는지, 가져 가라 데이터가 URL 요청에서 제거되고 $ _GET [] 배열은 이것과 같습니다 따라서 우리의 $ _GET [] 배열에는 "suggestInput

php"값을 가진 "source"의 인덱스가 포함되어 있습니다 그리고 이것은 $ _GET []입니다 거기에는 단 하나의 것이 있습니다 'source'(배열 색인) 그 값은 "suggestInputphp"가 될 것입니다

바로 그 배열이 될 것입니다 그것은 하나의 요소 배열이 될 것입니다 그들은 왜 이것을 배열로 만들었습니까? 글쎄, 그들은 당신이가는 것이 얼마나 많은 것들 (양식 필드)을 알지 못합니다 귀하의 양식에 가지고, 그래서 그들은 모두 그들을 쌓을 수있는 배열을 사용합니다 내가 여기서 다시 클라이언트로 가자

우리가 이 메쏘드를 method = "post"로 변경하고 "get" 서버 측에서 우리 배열은 어떻게 생겼을까요? 이 양식 필드 이름과 값이 끝날 때마다 단일 get이됩니다 그런 다음 코드에서 코드를 작성, $ _GET [그리고 원하는 항목] 명백합니까? [Reed] 예, 예 그러나, 그들은 정말로 비슷하게 보입니다 음, 그들은 그렇습니다 GET과 POST 간의 유일한 차이점 데이터가 전송되는 방법입니다

GET 배너를 만들고 URL 요청이 끝나면 서버로 보내고 있습니다 모두가 읽을 수있는 비행기 뒷편에 배너는 특정 길이 일 수 있습니다 POST를 사용하여 데이터를 개인용 가방에 넣습니다 그것을 서버에 보냅니다

같은 결과가 발생합니다 포장을 풀고 배열에 넣어도되지만 아무 것도 없습니다 POST의 내용에 대한 실제 제한 우리는 그것을 큰 가방으로 만들 수있다 그러나 당신은 보았습니다, 그 배너의 은유 비행기 뒤에

GET을 사용하면 방금 말하고있는 것입니다 하늘을 가로 지르는 모든 것 [학생] 거의 모든 것이 끝났습니다 URL 정확 하네

[학생] 그래서, 진짜는 무엇입니까? 다음 GET 사용의 이점? 쉽고 빠릅니다 당신은 정말로 빨리 붙일 수 있습니다 [다른 학생] 아마존 등에 가면 당신은 페이지를보고 있으며 링크를 누군가에게 이메일로 보내고 싶다면 그것을 볼 수없는 POST라면 그 URL 네, 독특한 것은 아닙니다 지금, 이것은 토론에서 약간 점프입니다, 그러나 SEO (검색 엔진 최적화)에서는 GETS가 모두 제거됩니다

SEO의 경우 GETS가 모두 해제되므로 GETS를 사용하여 내 페이지에있는 것들에 대한 참조 세트를 가져라 목록에 올라 있지는 않지만 검색 엔진에 나타나지 않습니다 그래서, 얻는 것이 부탁에서 벗어나기 때문에 POST는 모든 사용자에게 고유 한 주소를 제공합니다 웹 페이지 그러나 다시, 그것은 달려있다

아, 평면 스크류 드라이버와 필립 스크루 드라이버가 있습니다 필립 헤드 스크류 드라이버는 몇 가지 종류가 있습니까? 나는 내 비트를 바른 나사에 영원히 매치시키고있다 내가 잘 맞는 지 확인하기 이것은 그 종류의 것입니다 가장 적합한 공구인가요? 잠시 후 당신은 그것의 느낌을 갖습니다

자, 내 개인적인 경향 POST로 이동하는 것입니다 나는 항상 POST를 사용했습니다 난 그냥 해요 그렇게 프로그램하는 경향이있다 나는 다른 프로그래머를 안다 GETS로 모든 것을 수행합니다

[학생] 만약 당신이 신경 쓰지 않는다고 생각합니다 URL의 모든 것 어떤 페이지에서 왔는지 알고 싶다면 네 그리고 누군가가 정말로 당신에게 정보를 원한다면 패킷 스니퍼 사용 그러면 그들은 '가방'을보고 당신의 POSTS를 볼 수 있습니다

그래서, 그것은 매우 안전하지 않습니다 너무 넓지도 않고 못생긴 것도 아닙니다 GET URL은 꽤 추악해질 수 있습니다 Amazoncom 또는 Wikipedia

com이 좋은 예입니다 검색을 수행하면 URL이 매우 길어지고 복잡해질 수 있습니다 자, 검색 및 물건, 괜찮아요 그러나 누군가 URL을 보내려는 경우 URL을 짧고 짧게 유지하려고합니다 그것은 모든 사람을 위해이 모든 것들을 분명히 해줍니까? 다시 말하지만, 정말 엉성한 JavaScript를 작성했습니다

코드를 그냥 기억에 남겨주세요 다시 그러나 웹에서 나가거나 프로그래밍 기초에서 노트를보십시오 보다 자세한 코드를 사용하여이를 수행하는 방법을 찾아보십시오 거기에 완전한 코드를 작성하십시오

당신은이 기능들을 가져야한다 프로그래밍 기본 사항 프로젝트 작업 그리고, 만약 당신이 글을 쓰면 그때 좋은 코드 였고, 나는 마지막 수업에서 그 당시에 그렇게하는 법을 이미 배웠습니다 1 년 전에 제작 한 코드를 꺼내어 닦으십시오 몇 년 전 (아마 당신이 아마 :-)하지 않았던 것처럼 약간의 코멘트를 덧붙여 라 마지막 수업에서 작성한 것과 동일한 코드를 활용하십시오

[학생] 우리 양식에서 PHP 버튼을 어떻게 호출합니까? [Peter] <form> 요소에 action = ""속성을 설정하여 자동으로 그렇게합니다 따라서 제출 버튼이 아닌 일반 버튼으로 설정하면, 사용자가 제출 버튼을 클릭하면 그것은 자동으로 그렇게 할 것입니다 버튼에서 onclick = ""이벤트를 사용하면 우선 순위가 지정됩니다 action = ""속성 이상 그래서, 사람이 제출을 클릭하면 그들은 onclick = ""을 치고, 웹 페이지는 JavaScript 함수를 먼저 수행 할 것입니다 함수가 true로 돌아 오면 action = ""속성이 사용되며 해당 URL은 서버에 요청으로 전송됩니다

JavaScript 함수가 False를 반환하면 프로세스가 중지됩니다 action = ""URL은 전송되지 않습니다 끝

Low Level JavaScript Languages | PHP Best Practices | Anvil App | The Treehouse Show Episode 13

[The Treehouse Show] 나는 닉 피트입니다 >> 나는 제이슨 세이퍼 야

그리고 당신은 The Treehouse Show를보고 있습니다 우리가 이야기하는 Internets의 매주 복용량 모든 것들은 웹 디자인, 웹 개발, 그리고 더 이 에피소드에서는 자바 스크립트 언어와 플러그인에 대해 설명하고, PHP 모범 사례 등 확인 해보자 [The Treehouse Show] 이번 주에 우리가 이야기 할 첫 번째 일은 모질라 프로젝트입니다 LLJS 또는 저수준 JavaScript라고합니다

이것은 자바 스크립트의 방언 인 정말로 흥미로운 프로젝트입니다 수동 메모리 관리 기능이있는 C와 유사한 유형의 시스템을 제공합니다 그 단어들 중 일부를 이해했습니다 음, 재미있는 점은 자바 스크립트로 컴파일된다는 것입니다 JavaScript와 C와 같은 구조체에 형식이 있으면 좋겠다면 그렇게 할 수 있습니다

지금은 약간의 실험이고 구문은 꽤 흥미 롭습니다 사이트에서 실행할 수있는 모든 종류의 것들이 있습니다 우리는 여기서 모든 것을 얻을 수는 없지만 흥미로운 프로젝트, 그것을 체크 아웃하십시오, 너무 많이 요약하십시오 재미 있네 이것은 당신의 언어로 괴상하게하고 싶다면, 시도해보십시오

아주 멋진 것들 >> 커피 스크립트 어딘가에 >> 어딘가에, 알았어 그래서 Smashing Magazine을 통해 그들은이 아이콘에 대한이 정말로 흥미로운 글을 썼습니다 내가 그 곳을 다 보았지만 나는 아무도 본 적이 없다고 생각한다

실제로 그것에 대해 이야기하거나 공식화하고 "이봐 요,이게 뭔가입니다"라고 말합니다 근본적으로, 그들은 그것을 반응하는 navicon이라고 부르고있다 모바일 애플리케이션처럼 진행되는 것을 보여주는 작은 아이콘입니까? 그런 종류의, 그래,이 작은 아이콘이 여기에 그 세 줄이있다 아이폰에서 페이스 북 앱과 같이 볼 수있다

당신은이 곳 곳곳에서 이것을 실제로 볼 수 있습니다 어떤 경우에는 당신은 이것을 치고 App이 움직일 것이고 당신이 항해를 볼 수있는 것처럼 때로는 메뉴가 튀어 나오지만, 근본적으로 개발중인 디자인 패턴입니다 많은 다른 웹 사이트 및 앱에서이 아이콘을 클릭하면 당신에게 일종의 항법을 보여줄 것입니다 그래서 저는 그들이 한발 더 나아가 그것에 대해 이야기하는 것이 매우 멋지다고 생각했습니다

나는 다른 누군가가 실제로 그것을 공식화했다고는 들었지만, 나는 단지 모든 사람들이 서로를 복사하고 있다고 생각합니다 그래, 모두가 그걸 사용하는 것처럼 보이기 때문에 흥미 롭다 네, 매우 흥미 롭습니다 >> 차가워 요 그래서 우리는 그것을 체크 할 것입니다

다음은 JavaScript stacktrace라는 프로젝트입니다 이것은 스택 추적을 제공하는 웹 페이지에 포함 할 수있는 JavaScript 부분입니다 문제가 발생하거나 자바 스크립트에 오류가있는 경우 이는 오류가있는 특정 상황에서 실제로 어려울 수 있습니다 자바 스크립트에서 한 가지 방법이 있지만 어디에서 왔는지 정확히 알 수는 없습니다 따라서이 JavaScript 코드는 전체 메소드 호출을 보여줍니다

자바 스크립트에서 일어난 일의 스택 체인 (stack chain) 스택 트레이스에서는 뭔가 일이 일어난 첫번째 줄부터 보여줄 것입니다 끝까지 다가 가서 궁극적으로 어디로 가는지 보여줍니다 정확하게 >> 알았어

>> stocktracejscom에서 이것을 얻을 수 있습니다 우리의 응용 프로그램뿐만 아니라 문서와 다운로드 링크가 바로 있습니다 꽤 멋진 그래서 다음은 PHP가 올바르다는 것입니다

왜냐하면 저는 PHP를 잘못하고 싶지 않기 때문입니다 권리 >> PHP 올바른 방법은 PHP에 대한 기본적으로 좋은 문서입니다 거기에는 많은 나쁜 문서가 있고 정말로 오래된 블로그 게시물이 많이 있다고 생각하기 때문에 PHP가 오랫동안 사용되어 왔기 때문에 PHP가 더 쉬워 졌다고 생각합니다 백엔드 언어로 들어가야하며 입국 장벽이 적습니다

그래서 많은 사람들이 그것을 사용하고 거기에 많은 문서가 있습니다 그래서 PHP 올바른 방법으로 모든 것을 고치고 PHP에 대한 훌륭한 문서를 만듭니다 그래서 우리는 계속 나아갈 수 있고 여기를 스크롤해서 언어 하이라이트를 볼 수 있습니다 그리고 당신이 알고 싶어하는 모든 것 네, 모범 사례를 수립하는 것이 정말 좋습니다

정상적인 문서를 읽을 때 당신이 데리러 가지 않을 것입니다 정확하게 >> 그리고 다음은 모든 사람들이 흥분했다고 생각합니다 이번 주 앱입니다 확인 해보자

{App Review] 이번 주에 우리의 App은 Anvil이라는 프로젝트입니다 이것은 OS X에서 Ruby 웹 응용 프로그램을 관리하기위한 무료 응용 프로그램입니다 정말 좋네요 메뉴 바 애플리케이션이고 PAW 서버를 사용합니다

백엔드에서 당신을 위해 사이트를 회전시킵니다 그래서 당신이하는 일은 더하기 버튼을 끝내고 사이트를 가져 오는 것과 같은 것을 버리는 것입니다 Anvil에 업로드하면 사이트의 로컬 dev 버전이 자동으로 설정됩니다 그래서 내 project

dev 있습니다 그것을 클릭하면 브라우저에서 바로 이동할 수 있습니다 정말 빠르며, 너무 많은 것을 필요로하지 않습니다 그리고 그것은 무료 다운로드라고 말했다 당신은 anvil이나 mac

com에서 얻을 수 있습니다 우리가 한 시대에 살고 있다는 것이 놀랍습니다 여기서 메뉴 바에서 웹 응용 프로그램을 관리 할 수 ​​있습니다 너는 그저 파도 타기를 좋아하고 그걸 더 잘 확인해 나는 일을 더 잘한다

네 다음은 verimailjs입니다 얼마 전 Reddit에서 멋진 고양이 사진을 보았습니다 >> 네

네 >> 나는 그 중 하나를 보지 못했습니다 >> 나중에 보여 드리겠습니다 >> 달콤한 권리

Verimailjs는 기본적으로 JavaScript 또는 jQuery 플러그인 중 하나입니다 이메일 주소의 유효성을 검사 할 수 있습니다 지금 나는 그것이 정말로 절름발이 인 것을 알고있다 그러나 만일 당신이하려고 노력하면 이전에 이메일 주소를 확인하는 중입니다

네 그 안에 @ 문자가 있는지 확인하지 마십시오 제이슨이 트위터 핸들이 될 수 있기 때문에 오, 그건 사실이야 >> 붐

>> jseifer에서 이메일을 보내주십시오 실제로 이메일 주소를 확인하는 것은 실제로 복잡합니다 누군가 전자 메일 주소를 양식에 입력 할 때 전자 메일 주소를 확인하지는 않지만 유효성을 검사합니다 그래서 verimailjs는 그렇게하기 쉽습니다

나는 또한 cohandles 오타라고 생각합니다 >> 그래, 그래, 그래 예를 들어 com 대신 cno를 입력하면 실제로 "이봐, 대신

com을 타자는 뜻 이니 오타에 대한 대안을 제시 할 것입니다" 너무 예뻐요 기능이 풍부하고 제공 할 것이 많습니다 똑같은 일을하는 전형적인 자바 스크립트 플러그인에서 보았던 것보다 그래, 정말 멋지다

>> 너무 귀엽다 다음은 js2coffeeorg라는 웹 사이트입니다 커피 스크립트 (JavaScript)의 방언 인 CoffeeScript를 사용한다면 정말 좋아합니다 그것은 모든 멋진 아이들이 사용하고있는 것입니다

그들 모두와 시원하지 않은 아이들의 일부이지만 우리는 어쨌든 그들을 사랑합니다 예 그래서 이것은 정말 좋은 사이트입니다 두 개의 패널이 있습니다 자바 스크립트를 한쪽에 넣을 수 있습니다

다른 쪽 커피 스크립트를 보여줍니다 또한 JavaScript를 CoffeeScript와 함께 사용할 수 있습니다 CoffeeScript를 배우는 것만 알면 매우 유용 할 수 있습니다 실제로 코드에서 일어나는 일에 대해 약간의 재충전을 원합니다 그래서 js2coffee

org가 매우 유용하다는 것을 확인하십시오 별로 말할 것도 없습니다 커피 스크립트가 너무 좋아 >> 아주 멋진 것들 우리는 다음에 Design Shack의 블로그 포스트를 가지고 있습니다

Twitter 기반 부트 스트랩에 대한 Zurb Foundation과 저는이 전체 게시물을 읽었습니다 Treehouse Show에서 우리가 전에 거쳐 왔던 두 가지 프레임 워크입니다 >> 네 사실입니다 이 게시물을 읽기 전에 우리의 모든 에피소드를 시청하십시오

그리고 나서 여러분은 선결 조건들을 다 마친 후에이 글을 읽을 수 있습니다 네 맞아요 근본적으로 그들이 가지고있는 밑바닥까지 내려갈 수 있습니다 결론과 그들이 말하길, "누가 이길까? 그리고 그들은 승자를 선고하는 것이 어렵다고 말합니다

자, 저는 거기에 어떤 종류의 놀람이 있다고 생각하지 않습니다 그것은 "TV에서 로맨스가되지 않을 것"이라는 2 ~ 3 시즌 동안과 같은 것입니다 궁극적으로 아무 일도 일어나지 않습니다 기본적으로 대답은이다 >> 그 쇼를 봤어

>> 그것은 모든 쇼입니다 너무 많은 시간 >> 아마도 The Treehouse Show일까요? 나는 들었다 – 나는이 기본 틀에 참여하려고 노력하지 않고있다 하지만 저는 재단에 위대한 격자가 있다고 들었습니다 네

>> 그게 디자인 사람들이 말하는거야 >> 정확하게 그래, 작은 차이와 큰 차이가 있음을 의미한다 하지만 기본적으로 대답은 두 사람 모두 시도해보고 어떤 사람이 더 좋아하는지 봅니다 때로는 하나의 프로젝트에서 작동하기 때문에 하나는 다른 프로젝트를 위해 더 잘 작동 할 것입니다

답은 달려있다 >> 시험해보십시오 >> 그렇습니다 구입하기 전에 시도하십시오 그리고 그게 전부입니다 – 우리는 설정에 대한 블로그 게시물로 쇼를 끝내려고합니다

OSX 108 Mountain Lion의 완벽한 개발자 환경 이제 완벽한 것은 분명히 상대적인 용어입니다 이것은 블로그를 가진 단지 1 남자의 의견이다 그러나 그는 정말 좋은 조언을 해줍니다

새로운 개발 환경을 설정할 때 흥미로운 기본값 그것은 iOS에 Xcode를 설치하는 것뿐 아니라 – 시스템 환경 설정에서 사이드 바 아이콘 크기를 작게 보낼 수도 있습니다 와우 >> 알아 >> 그게 세부 사항이야 하지만 그 외에는 정말 유용한 도트 파일 세트에 대한 링크가 있습니다

터미널과 명령을 설정하고 AlfredApp, 내 즐겨 찾기 중 하나입니다 이렇게 중대한 blog 포스트 가서 읽고 읽으십시오 다시 시도해보십시오

이러한 환경 설정이 적합한 지보고 나서 다시보고하십시오 그리고 당신은 완벽한 것을 결정할 수 있습니다 >> 정확하게 제이슨, 오늘 배운 것은 무엇입니까? 우리는 3 줄 아이콘이 매우 중요하다는 것을 알게되었습니다 괜찮아

이번 주 The Treehouse Show 에피소드에 대한 내용입니다 트위터에서 우리를 팔로우하고 싶다면 @nickrp입니다 >> 그리고 나는 @jseifer이다 우리는 Treehouse Show의 이번 판을 보면서 너무나 감사드립니다 주식 정보 및 기타 정보는 youtube

com/gotreehouse에서 YouTube 채널을 확인하십시오 물론이 비디오와 같은 더 많은 비디오를보고 싶다면 teamtreehousecom에서 우리를 확인할 수 있습니다 지켜봐 줘서 고마워 다음주에 보자

[The Treehouse Show]

Should I Learn PHP or JavaScript First?

PHP 나 JavaScript를 먼저 배워야합니까? PHP를 지금 당장 배워야 만 않는 한, 마지막 일 중 하나가되어야합니다 너는 배운다

당신이해야하지 않는 한 그것을 배우지 마십시오 나는 지금 내가 배워야 할 것을 배우려고 노력하고있다 Javascript는 앱을 만드는 데 많은 도움이되는 클라이언트 측 언어입니다 PHP는 서버입니다 데이터베이스에 연결해야 할 때만 사용됩니다

Javascript는 더 많은 일자리를 창출하지만 PHP는 더 나은 지불을한다고 들었습니다 Javascript는 웹 브라우저에 주로 사용되는보다 용의있는 프로그래밍 언어입니다 더 사람들은 JavaScript 및 jQuery를 사용하므로 공급이 많아지면 임금이 어느 정도 감소합니다 어느 것이 더 배우기 어렵습니까? 어느 쪽도 배우기가 어렵지 않습니다 그러나 JavaScript를 배우면 jQuery를 사용해야합니다

나는 단지 하나의 프로그래밍 언어만을 배우기를 원한다 Basic이나 Fortran에서 더 이상 글을 쓰는 사람이 있습니까? PHP를 배우더라도 아마 몇 년 안에 새로운 언어를 배워야 할 것입니다 PHP는 현재 주요 수요가 있습니다 Facebook 및 WordPress를 호스팅하는데도 사용됩니다 PHP는 모든 종류의 호스팅 서버에서 실행되므로 거의 모든 곳에서 사용됩니다

나는 PHP가 자바 스크립트에 비해 서버에서 더 많은 일을 할 수 있다고 들었다 자바 스크립트를 처음 배우면 자바 스크립트 애플리케이션을 디자인 할 수 있습니다 엔터프라이즈 전반의 서버 기반 애플리케이션을 위해 PHP에 대해 계속 배우게됩니다 그건 아마 내 제한된 마음을 과부하 것입니다 구문은 비슷합니다

그러나 그들은 완전히 다른 언어입니다 사실, 일자리 시장입니다 PHP는 백엔드 웹 개발자를위한 것입니다 SQL을 배워야한다 너무 많은 TLA

TLA? 세 글자 약자

웹에플리케이션 만들기 – JS, PHP 프로그래밍 2 : JavaScript VS PHP

우리가 이전 영상에서 전체적인 우리 수업의 맥락을 크게 정리를 해봤어요 긴 시간을 써서

그럼 이제부터는 그 중에서 우리가 아직 안 배운 것들 진도를 나가야 겠죠? JavaScript와 PHP라고 하는 이 두 개의 기술에 대해서 우리가 이제부터 동시에 배워 나갈 겁니다 왜냐하면 둘 다 프로그래밍 언어이고 둘 다 비슷비슷하기 때문입니다 그래서 따로 따로 배우면 시간이 더 많이 들기 때문에 저는 이 두 개의 언어를 같이 진행하면서 수업을 할 겁니다 JavaScript랑 PHP는 대단히 복잡미묘한 관계입니다 어떻게 보면은 똑같은 일을 하나는 웹브라우저 위에서 하고 하나는 서버쪽에서 할 수 있어요

이게 무슨 말인지는 지금 이해 못할 겁니다 다시 말해서 경쟁적인 관계라는 거에요 하지만 동시에 JavaScript로 하는 게 더 효율적일 때도 있고 PHP로 하는 게 더 효율적일 때가 있고 또는 JavaScript로만 할 수 있는 게 있고 PHP로만 할 수 있는 것이 있습니다 그렇기 때문에 이 두 개의 언어는 협력적인 관계이기도 한 거에요 그러면 JavaScript와 PHP의 복잡미묘한 관계를 우리가 이제부터살펴 볼건데

그 전에 지금까지 살펴봤던 HTML, CSS라고 하는 이 두 개의 언어와 JavaScript, PHP라는 이 두 개의 언어는 서로 어떻게 또 차이가 있는 지도 한번 생각해 보는 것도 좋을 것 같습니다 HTML,CSS는 정적인 언어에요 다시 말해서 여러분이 한번 HTML, CSS코드를 작성을 해놓으면 이 HTML과 CSS가 웹브라우저에 한번 표시되면 그것은 바뀌지 않습니다 사용자가 뭘 해도 바뀌지가 않아요 그 의미는 곧 알게 되고요

하지만 JavaScript와 PHP는 동적인 언어라고 할 수 있어요 다시 말해서 사용자가 버튼을 누르면 어떤 일이 일어나고 또 사용자가 어떤 정보를 입력해서 서버를 전송하면 그 사용자가 전송한 내용이 저장되고 이런 여러 가지상황에 따라서 다르게 동작하는 그런 기능성을 갖추고 있는 이 프로그래밍 언어가 바로 JavaScript PHP라고 할 수가 있어요 그래서 HTML은 또 CSS는 문서를 만들기 위한 목적으로 만들어진 그런 정적인 느낌의 언어이고요 JavaScript나 PHP는 우리가 소위 프로그램, 애플리케이션하면 떠오르는 그런 것들을 만드는 동적인 언어라고 할 수가 있습니다

그 중에서 우리 JavaScript부터 한번 살펴보죠 JavaScript는 어떤 일을 할 수 있는지를 여러분들에게 알려드리는 것이 제일 좋은 시작이 될 거 같아서 우리가 이 다음시간에 살펴볼 예제 우리가 직접 실습을 하면서 무엇을 할 것인지를 보면서 JavaScript로 할 수 있는 일에 대해서 한번 생각해보죠 여기 보시면 우리 예제입니다 우리 예제이고 전에는 없었던 버튼이 생겼죠? 이건 제가 만든 거에요 그리고 우리가 다음 수업에서 이거를 직접해 볼겁니다

여기 있는 블랙버튼을 누르면 이 디자인이 어떻게 바뀌는지 한번보세요 어때요? 어두워졌죠? 화이트를 누르면 밝아지고 블랙을 누르면 어두워졌습니다 이게 뭐냐면 이게 바로 JavaScript로 한 일이에요 HTML과 CSS는 이렇게 한번 화면에 그려지면 화면에 표시가 되면 그 다음부터는 바꿀 수 있는 방법이 없습니다

그런데 이 JavaScript라는 것을 이용해서 사용자가 블랙버튼을 누르면 "디자인을 검은 색으로 바꾼다" 사용자가 흰색버튼을 누르면 "디자인을 디자인을 흰색으로 바꾼다" 라고 하는 것을 이 웹브라우저에게 명령할 수 있는 프로 그래밍 언어가 바로 JavaScript입니다 그럼 이번에는 PHP에 대해서 알아볼까요? PHP는 어떤 일을 주로 할까요? 주로 하는 일을 얘기하는 겁니다 JavaScript도 엄청나게 다양한 일을 할 수 있고 PHP도 마찬가지인데 가장 일반적으로 많이 사용되는 일은 이런 겁니다 이 그림 기억나세요? 우리가 HTML을 배우고 그 다음에 CSS를 처음 배웠을 때 HTML 페이지 안에 CSS가 같이 공존하고 있었죠? 그랬더니 이 웹페이지에 디자인을 바꾼다고 하면 다시 말해서 CSS의 내용을 바꾸려고 하면 모든 웹페이지의 CSS를 다 바꿔줘야 하는 불편함이 있었습니다

바로 그런 불편함을 제거하기 위해서 HTML마다 똑같은 내용이 중복되서 들어 있는 CSS를 HTML로부터 몰아내고 하나의 CSS파일을 여러 개의 HTML파일이 로드해서 동작하도록 하는 거 우리 했었잖아요? 그 덕분에 "CSS파일만 바꾸면 모든 웹페이지디자인이 동시에 바꿀 수 있다" 라는 장점을 우리가 얻었습니다 그런데 여기서 끝내면 될까요? 여기서 우리는 만족할 수 있을까요? 한번 생각해보죠 이 화면은 우리가 예전에 만들었던 예제입니다 거기서 page_vchtml 를 열어볼게요

이거죠? 그런데 누가 여러분한테 와서, 무엇를 시키면 좋을까요? 여기 있는 리스트가 현재 우리는 마크업을 어떻게 했냐면 <ol> 로 했습니다 즉 순서가 있다는 거죠? 누가 와서 여러분들한테 "이거 순서가 없는 리스트니까 <ul>로 바꿔달라" 고 여러분들한테 와서 요청을 하는 거에요 여기 있는 내용을 <ul>로 바꿔달라고 그러면 여러분들 어떻게 해야 되나요? 여기 있는 <ol>을 <ul>로 바꾸고 끝내야 되나요? 아니죠 모든 웹페이지에 있는 <ol>을 <ul>로 바꿔줘야 됩니다 얘를 열고, 얘도 <ul>로 바꾸고, 얘도 바꾸고

이렇게 해줘야 된다는 것이죠 하지만 여기 있는 이 내용들, 이런 내용들은 바뀔 필요가 없죠? 다시 말해서, 상황을 정리해보죠 이게 HTML문서라고 하면 이 HTML문서에는 HTML의 코드 태그들을 의미하는 겁니다 여기 있는 이런 태그들 그리고 "정보", 정보가 하나의 덩어리로 HTML 페이지 안에 들어 있는 거에요 여기서 얘기하는 정보는 변수와 상수라고 하는 이 내용

연산자라고 하는 이런 내용들 있죠? 이런 내용들이 다 정보입니다 그리고 여기 있는 이런 태그들 이런 것들은 HTML인 것이죠? 즉 정보와 HTML이 하나의 파일 안에 공존하고 있기 때문에 발생하는 문제라는 것이죠 그러면 HTML을 통해서 CSS를 분가시켰을 때 얻을 수 있는 장점을 뭔가 이 맥락에서도 얻을 수 있지 않을까요? 얻을 수 있습니다 하나의 HTML로 여러 정보들을 표현할 수 있는 방법이 있는데 그것이 바로 PHP가 할 수 있는 일입니다 그리고 PHP가 할 수 있는 그 일을 잘 여러분들이 이해하기 위해서는 "PHP와 같은 언어들이 없었을 때 사람들은 어떻게 절망했는가?" 라는 것에 대해서 공감하실 수 있어야 되요

제가 무슨 얘기하는지 이해가세요? 여기 있는 HTML의 내용을 바꾸려고 그러면 모든 HTML의 내용을 바꿔야 되는데 HTML이 천개면 어떻게 하겠어요? 천개 할 수 있나요? 그러면 만개면 어떻게 하겠어요? 백만 개면 어떻게 하겠어요? 못하죠 못하기 때문에 천개가 넘는 웹페이지를 운영하는 웹사이트는 없었던거고 만개가 넘는 웹페이지를 운영하는 웹사이트는 더 더욱 없었던 거죠 그럼 거기서 이제 절망이 쌓이고 쌓여서 이것을 해결하기 위한 노력을 엔지니어들이 했겠죠? 그 도약으로 나온 것이 바로 CGI 라고 하는 건데, 그건 너무 깊은 내용입니다 그냥 지금 맥락에서는 PHP 또는 PERL, JSP 이런 것들이라고 일단 생각합시다

그러면 어떻게 하면 되냐면? 여기 한번 보세요 여기 제가 미리 만들어 놓은 파일인데 "indexphp" 라는 파일 이걸 한번 제가 열어볼게요 여기 있는 코드를 보면 뭐가 좀 복잡하죠? 여기 있는 이런 것들, 이것이 PHP 코드입니다 여기 있는 이것도 PHP 코드에요 PHP 코드는 지금 모르셔도 아무 문제 없습니다

그런데 중요한 것은 뭐냐면 여기" indexphp" 라는 파일이 하나만 있어요 그리고 제가 이 "indexphp" 라고 하는 저 파일로 한번 접속해볼게요 PHP 라는 폴더 밑에 있으니까

URL을 이렇게 바꾸면 되겠죠? “localhost/php/indexphp" 라고 하고 엔터를 치면 보시는 것처럼 이렇게 웹페이지가 출력이 됩니다 뭐에요? "indexphp"로 접속을 했고 여기 있는 이 파일이 열린 겁니다 제가 이번에는 "JavaScript란?" 라고 하는 텍스트를 클릭하고 화면을 보면 이렇게 되죠? 그리고 지금 접속한 웹페이지는 뭐에요? "index

php" 입니다 이 뒤에 있는 거는 지금 모르셔도 되요 그러면 얘가 열렸죠? 그리고 "변수와 상수" 를 눌러도 "indexphp" 고 "연산자"도 "indexphp" 고 대문도 "index

php" 라는 것을 알 수가 있죠? 하나의 PHP 파일로 여러 개의 웹페이지를 만들 수 있게 된 겁니다 만약에 누군가 여러분들에게 와서 여기에 있는 이 제목 태그를(JavaScript) 여기에 있는 이 제목 부분을 제목 부분에 "배우기"라고 하는 글자를 추가하라고 누군가가 요청을 한다면 이런 식으로요 (JavaScript 배우기) 그러면 "배우기"가 추가됐죠? 그리고 다른 페이지로 가도 "배우기"는 여전히 마찬가지로 동일하게 추가가 되어있는 겁니다 바로 이런 일을 할 수 있는 것이 PHP의 능력이에요

이렇게 우리 JavaScript와 PHP라고 하는 두 언어가 어떻게 쓰이는지를 살펴봤습니다 그러면 우리 다음 시간부터는 이제 이 두 개의 언어의 코드를 살펴보면서 이 프로그래밍이라고 하는 거에 대해서 본격적으로 배워보는 시간을 갖도록 하겠습니다

웹에플리케이션 만들기 – JS, PHP 프로그래밍 4 : JavaScript 실습

그럼 이제 우리가 앞에서 배운 내용을 바탕으로 해서 이제 우리 예제를 완성해보죠 제일 먼저 할 것은 무엇이냐면 이 화면의 이 오른쪽 상단에 버튼을 만들어서 어떤 버튼을 누르면 배경색이 검은색으로 디자인을 바꾸고 어떤 버튼을 누르면 배경색이 흰색으로 바뀌는 그런 이 JavaScript 어플리케이션을 만들어보죠

제일 먼저 page_vchtml 를 열고요 저는 이 파일에다가 내용을 적용하고 그리고 완성이 된 다음이 나머지 파일에서 똑같이 복사하고 붙여넣기를 해서 반영을 시키도록 하겠습니다 여기에서 (마우스로 가리킴) 여기에 우리가 버튼을 지금 만들려고 하는 거기 때문에 여기에 버튼을 만들기 위해 적합한 html 태그의 위치를 잡을 필요가 있습니다 우선 왼쪽에 사이드바 이 영역은 바로 여기 있는 이 내부영역인데요 여기 있는 이 내부와 그리고 이 영역은 <article> 영역이죠

<article> 사이에 있는 이 구간에 다가 여기에 다가 여기 있는 이 버튼에 해당되는 태그를 넣는 것이 좋을 것 같아요 위치는 꼭 정답이 있는 건 아니지만 순서상 여기가 적당할 것 같잖아요 그래서 여기에 위치를 시키겠습니다 input Tab 그리고 type=“button”으로 해야지 이제 버튼이 만들어지죠 value는 하나는 흰색 배경을 의미하는 white를 쓰고요

(입력 중) 그리고 나머지 하나는 black이라고 하고 Reload 를 하면 이런 화면이 뜹니다 여기에 이렇게 위치해요 그런데 미학적으로 봤을 때 여기보다는 저는 좀 여기가 좋을 것 같아서 여기 있는 이 두 개의 태그를 오른쪽으로 붙이고 싶은 겁니다 그러려면 이 두개의 태그를 동시에 움직일 필요가 있는데 동시에 움직이기 위해서는 이 두개의 태그를 하나로 그룹핑 할 필요가 있습니다 그러면 어떻게 하면 될까요

어떠한 임의의 태그를 만들어서 그것의 부모를 만들어주면 되는 거죠 말이 어렵네요 우선 그때 사용할 수 있는 좋은 태그가 <div>라는 태그입니다 이 <div>라는 태그는 디비젼이란 뜻이고요 어떤 태그와 태그를 그룹핑 해서 css적인 효과를 주기 위해서 사용하는 그런 태그입니다

이 <div> 태그 조금 특징이 있어요 어떤 특징이냐면 아무런 특징이 없단 특징이 있습니다 말이 이상하죠 <nav>, <ul>, <li>, <a> 이런 것들은 의미 또는 기능이 있어요 그런데 이 <div>라는 것은 단순히 어떤 태그들을 묶어주는 역할만을 할 뿐입니다

그것을 묶은 다음에 묶어서 어떤 css 효과를 줄 때 사용하는 것이 <div>이라고 생각하시면 되겠어요 그럼 이렇게 묶어서 이제 css로 이 묶여져 있는 이 부분을 오른쪽으로 붙일거니까 붙이기 위해서는 이 <div id='control'> 이라고 하고요 이 id 값이 control인 저 태그를 오른쪽으로 붙이려고 하는 겁니다 그러면 css 파일을 한 번 열어볼까요 CSS파일을 이렇게 열어서 아래쪽으로 아래쪽에서 편집하겠습니다

#control 그러면 id 값이 control인 이 태그를 우리가 CSS로 꾸며줄 수가 있겠죠 그리고 CSS에서 어떤 요소를 한쪽으로 탁 고정시킬 때 우리가 사용하는 것이 뭐였을까요 뭐였나요 float라는 것을 이용해서 우리는 내비게이션을 이쪽에 붙일 수 있었죠 그러면 이것 역시 float를 이용해서 이쪽으로 붙일 수 있지 않을까요

있습니다 여기에 right 라고 하고 그리고 F5를 누르면 보시는 것 처럼 오른쪽으로 착 붙은 것을 볼 수 있습니다 그리고 여기 있는 <h2>는 굳이 폰트 크기를 이렇게 크게 할 필요가 없을 것 같아서 이것을 날려버릴게요 이렇게 됐죠 됐습니다

그럼 이제 우리가 이제 뭘 해야 되냐면 여기 있는 버튼을 클릭했을 때 이 웹사이트의 색상을 검은색 톤으로 바꿀 것인지 흰색톤으로 바꾸던지 그렇게 어 하는 것을 우리가 하려는 거예요 흰색과 검은 색 버튼에 따라서 색깔의 톤을 조정하려고 하는 겁니다 그러면 제일 먼저 지금은 흰색 톤이거든요 배경색이 흰색인데 그러면 이게 불필요한 코드가 있어서 제가 지워 버렸구요 여기에 이제 배경색이 검은 색일 때 디자인을 일단 코딩을 해보겠습니다 body {} 이 body는 이 웹 페이지 전체를 포괄하는 그런 가장 상위에 있는 태그죠 바로 이 태그요

이 body 태그 밑에 이렇게 다른 태그들이 있으니까 이 body 태그에 배경컬러를 검은색으로 해보겠습니다 (입력 중) 그러면 이렇게 되죠 그런데 이렇게 했더니 글씨까지 이미 검은 색이기 때문에 저거를 color:white 로 하면 보시는 것 처럼 이렇게 되죠 이게 하나고요 그리고 또 하나는 반대로 background-color:white 고 그리고 글씨 색깔은 black 인 기본 디자인이 있어야겠죠

그런데 이 두가지는 선택자가 같기 때문에 중복이 되요 그래서 일단 이것을 잠깐 지우고 이렇게 했을 때 이 효과가 적용이 돼서 이런 모습이 되죠 사실은 이 디자인은 기본 값이기 때문에 굳이 우리가 정의할 필요가 없지만 어쨌든 제가 명시적으로 하기 위해서 디자인을 한 겁니다 이전에 있었던 이것과 이것 이렇게 제가 두 개의 디자인을 이렇게 만들어놨습니다 그래서 여기 있는 이 black 을 클릭하면 배경이 black인 이것이 실행이 되고 white를 클릭하면 배경이 white인 이 효과가 실행되게 하려면 어떻게 하면 될까요 이렇게 하시면 됩니다

위에 있는 white는 body라는 태그에 class 값이 (점)이 클래스죠 white인 경우에 이런 효과를 주는 거고요 body 태그의 클래스 값이 black인 경우에 이런 효과를 주도록 선택자를 지정을 한 겁니다 그런데 지금 현재 body 를 보면 여기 현재 이 body를 보면 이 body는 class 값이 존재하지 않아요

그러면 제가 이 class 값을 여기서 직접 한번 줘보겠습니다 여기서 주지 말고, 그냥 여기 있는 이 body 태그에 class 값을 black이라고 주고 이 화면을 Reload를 한 번 해보죠 그러면 검은 색이 출력돼요 왜 그렇겠어요 이 body라고 하는 태그에 class값이 black이죠 그러면 이 두개의 이펙트들 중에서 누가 적용이 될까요

바로 body의 class 값이 black인 이 선택자가 실행되면서 바로 이 부분이 적용된 결과가 여기 있는 이 검은색 바탕의 흰색 글씨가 되는 겁니다 그리고 이것을 white로 바꾸면 이렇게 되겠죠 이때는 바로 여기 있는 이 효과가 적용 된 겁니다 그러면 우리가 어떻게 하면 검은색 버튼을 누르면 검은색 배경에 디자인이 되고 white를 누르면 white 배경의 디자인이 되게 할 수 있을 까요 이렇게 하면 되지 않을 까요 여기에 사람이 black 버튼을 누르면 이 body 태그의 class 값이 white에서 black으로 바뀐다면 여기에 있는 이 효과가 웹페이지에 적용 될 것이고 여기 있는 white를 누른다면 여기 있는 class 값은 class 값을 white로 바뀌게 한다면 바로 여기에 있는 이 코드가 실행되지 않겠어요 바로 그런 역할을 JavaScript가 할 수 있습니다 자 그럼 한번 보죠 여기 있는 이 버튼에 onclick 이렇게 해주면 웹브라우저는 이 버튼이 누군가에 의해서 클릭 됐을 때 여기에 있는 이 onclick의 속성 값에 적혀있는 코드를 JavaScript의 문법에 따라서 실행 시켜준다 라는 거 기억하셔야 됩니다

그리고 우리가 지금 제어하려는 것은 뭐에요 이 body 라고 하는 이 태그의 class 값을 JavaScript로 주려고 하는 겁니다 그럼 저 body 를 우리가 선택할 수 있어야 됩니다 그 때 사용하기 편한 것을 그냥 쓰겠습니다 id=“body”라고 이렇게 하고 뒤에 있는 클래스는 지워버릴게요

이렇게 하면 이 body라는 이 태그는 target이라고 하는 id 값으로 제어할 수 있는 대상이 된 거에요 그러면 (화면 이동 중) 여기에 documentgetElementById(‘target’) 라고 하면 id 값이 target인 id 값이 target인 태그를 가져오게 되는 겁니다 그렇게 가져온 태그의 className 이라고 하면 이 className으로 전달된 어떠한 값이 바로 id값이 target인 태그에 클래스 값이 됩니다

이렇게요 이거 어려운 건데 이거 잘 이해하실 수 있을지 모르겠네요 그리고 black 버튼을 눌렀을 때는 그 black 버튼의 className을 아니죠 black 버튼이 아니라, id 값이 target인 태그의 클래스 값을 black으로 주는 거예요 그러면 이에 따라서 어떤 일이 일어나는지를 한 번 살펴볼까요

여기 있는 이 black 버튼을 제가 클릭하면 id 값이 target인 이 body 태그의 클래스 값이 어떻게 되는지 보세요 black 어때요 class 값이 black으로 바뀌었죠 그럼 우리가 정의한 CSS의 black에 대한 효과가 웹페이지에 적용되면서 이런 모습이 됩니다

white를 누르면 이 값은 이제 white가 돼서 white에 해당되는 효과가 적용된다는 것이죠 바로 이렇게 해서 한 번 화면에 그려진 한 번 화면에 표현된 웹사이트를 사용자와 상호작용에 따라서 디자인을 실시간으로 변경할 수 있는 방법을 살펴봤고 그 과정에서 JavaScript가 어떤 역할을 하는지 또 JavaScript와 html과 CSS가 어떤 미묘한 삼각관계에 있는지에 대해서 여러분들이 이해하실 수 있었으면 좋겠습니다 그럼 우리가 작업한 이 내용을 모든 페이지에 적용을 시켜야겠죠 여기 있는 이것을 카피해서 다른 페이지에도 반영을 이렇게 시킵시다 그리고 body의 id 값은 target으로 지정을 해야지만 제어를 할 수 있겠죠

이것도 붙여넣기 그리고 body의 id는 target으로 역시 정하고 그리고 이것도 마찬가지로 id=“target”으로 지정하고 그리고 컨트롤 영역을 이렇게 붙여넣기 그리고 실행을 시켜보면 여기 있는 각각의 페이지가 다 black 을 클릭했을 때 어두운 색깔로 디자인이 변경된다는 것을 볼 수가 있습니다

웹에플리케이션 만들기 – JS, PHP 프로그래밍 3 : JavaScript 실습

이번 시간에는 javascript 디렉토리에 또 새로운 파일을 하나 만드세요 2

html 이구요 그리고 템플릿에서 카피해서, 2html 을 준비해주세요 이번에는 css 얘기를 좀 하겠습니다 제가 앞에서 설명을 드렸으면 좋은데 깜박했어요

이렇게 해보죠 <ul> Tab, li 곱하기(*) 3 Tab (코드 작성 중) 그리고 html, 그리고 Ctrl+Alt 다음 오른쪽 키를 누르시면 이렇게 편집하는 곳으로 바로 이동하는데 뭐 안 되면 그냥 직접 입력 이동하시면 되죠 그리고 <ol> Tab, 그리고 li 곱하기(*) 4 Tab 해서 (입력 중) 저의 친조카와 제가 친한 분의 그 따님들의 이름입니다 이렇게 해서, 이렇게 만들죠 위에 것을 <ol>로 하고, 밑에 것을 <ul>로 해야겠습니다

사람의 순서를 주면 안되죠 이렇게 하고 여기 있는 이 파일을 한번 열어볼게요 2html 우리 빠르게 복습 겸 한 번 해보죠 우선 스타일 시트를 지정을 해보죠

<style> Tab 엔터 그리고 여기서 li 하고서 (입력 중) color:red 를 하면 어떻게 될까요 이렇게 되죠 빨간색하면 안되죠 파란색으로 이렇게 지정하면 모든 텍스트가 파란색이 됩니다 그 중에서 그 아래쪽에 있는 사람들의 이름을 제가 좀 키워볼게요

이름만 키우고 싶으면 어떻게 하면 될까요 이렇게 하면 되겠죠 ul, ul 태그 밑에 있는 li 태그에 font-size:40px 로 지정을 하면 이렇게 사람의 이름만 폰트 사이즈가 40픽셀로 지정이 되는 것이죠 여기까지 우리가 이전에 배웠던 내용이에요 그리고 또 하나, id도 배웠는데 id는 지금은 언급하지 않겠습니다

그런데 여기에서 만약에 여러분이 여기 있는 이 <li> 태그와 여기 있는 이 최유빈이라고 하는 이 두 개의 태그에 대해서만 밑줄을 긋고 싶다면 어떻게 해야 될까요 선택제를 어떻게 써야지 그것을 쓸 수 있을 까요 이 두개에 대해서만 그런 일을 하고 싶다면 애매하죠 그럴 때는 이 두 개의 태그들을 하나로 그룹핑 시키면 되지 않을 까요 그룹핑이라는 말을 따른 말로는 클래스라고도 부르는데요 클래스로 지정하면 되지 않을까요

됩니다 이렇게 class 라고 하는 HTML의 약속되어있는 특수한 속성을 쓰고 “em” 강조 em이라는 거는 아무거나 해도 상관없어요 그런데 저는 em을 쓴 겁니다 그리고 최유빈 여기에서도 class=“em”으로 주고 우리가 id 선택자는 # 을 썼습니다 그런데 class인 경우에는

이라고 하는 특수한 약속되어있는 기호를 써서 em 이라고 하시면 class의 이름이 em인 태그들을 선택하는 선택자이구요 여기에 text-decoration (입력 중) text-decoration을 underline이라고 주면 (입력 중) 어떻게 되냐면, 이렇게 됩니다 즉 (무엇인가 입력하고 있으나 화면 표시 안됨) 여기에 있는 1과 여기 최유빈이라고 되어있는 이 두 개의 태그가 underline이란 효과를 먹었는데 그 이유는 이 두 개의 태그의 class 값이 둘 다 em이기 때문에 이 선택자의 영향으로 인해서 이것이 적용이 된 결과란 것이죠 바로 그것이 Class입니다

그래서 우리가 Class를 썼기 때문에 서로 다른 소속인 li 들을 같은 곳으로 그룹핑 시켜서 효과를 줄 수가 있었죠 그런데 좀 꼼꼼하신 분들은 그럼 Class는 같은 태그에만 넣을 수 있는 걸까란 생각을 할 수 있을 텐데 아닙니다 여기 있는 ul 에다가 제가 class를 주면 어떻게 되는지 보시면 보시는 것처럼 모든 태그가 em class의 하위에 있기 때문에 바로 이것의 영향을 받아서 모두가 underline이라고 하는 효과를 얻게 되는 것이죠 즉 Class라는 것은 꼭 같은 태그에만 지정할 필요는 없다는 거예요 이게 바로 Class라고 하는 개념입니다

그러면 우리 일단은 em이라는 Class를 이렇게 삭제를 하고요 그리고 Reload 그 다음에 위에 불필요하게 커져있는 이런 것들 다 지워버립시다 이 상태로 오세요 그리고 여기에서 제가 input Tab, button 그리고 onclick (입력 중) 즉 버튼을 클릭했을 때 여기에 입력한 JavaScript가 실행되게 되겠죠 자 그 다음에 여기에 있는 ol이라고 하는 저 태그에 id 값을 주겠습니다

제가하려는 건 뭐냐면 여기 있는 이 버튼을 클릭하면 이 첫 번째 있는 리스트, 저 리스트에 em이라고 하는 이 선택자에 해당되는 이 효과를 여기에 다가 주려고 하는 거예요 그 다음에 value=“em” (입력 중) 강조라고 이렇게 하겠습니다 이 버튼을 클릭하면, 여기가 강조돼서 underline으로 바뀌도록 하려는 겁니다 그 다음에, 이 첫 번째 이 부분을 id 값을 target이라고 줄게요 target

아무 것이나 상관없지만, 저는 타겟을 하겠다는 거예요 target 그리고 우리가 JavaScript를 이용해서 프로그래밍쪽으로 무언가를 제어하려고 할 때 무엇을 써야 된다고 했죠 document라고 하는 그룹 안에 있는 getElementById라고 하는 함수를 사용하면 된다고 했습니다 (입력 중) 그리고 target 자 여기 작은따옴표를 쓴 이유는 이 바깥쪽이 큰따옴표이기 때문에 여기를 큰따옴표로 쓰면 에러가 날거예요 그 이유는 한번 잘 생각해보시고 생각해 보시면 아실 수 있을 거예요

그 다음에 여기에서, (점) 우리가 value라고 하면 어떤 값을 알아낼 수 있다고 했는데요 여기서 className이라고 하면 여기에 있는 이 target에 해당하는 이 태그에 className 값을, 클래스 값을 지정할 수가 있습니다 className=‘’ (입력 중) em 그리고 저장 그리고 이 강조를 누르면, 어때요? 보시는 것처럼 (마우스 이동 중) 여기 있는 이 태그들이 밑줄이 생겼습니다 어떻게 된 건지 한번 코드를 살펴볼까요

보시는 것처럼 에디터를 위로 올렸구요 브라우저를 밑으로 내렸습니다 이것이 너무 길어서 그리고 F12 키를 눌러서 보시는 것 처럼 개발자도구라는 것을 열었습니다 그러면 이 오른쪽에 있는 개발자도구를 통해서 왼쪽에 있는 HTML의 코드를 우리가 실시간으로 볼 수 있어요 이 상태에서 제가 여기 있는 강조 버튼을 눌렀을 때 강조 버튼을 눌렀을 때 바로 이 태그 저기 있는 저 부분에 해당되는 태그는 바로 여기 있는 <ol> 태그거든요

그 <ol> 태그에 className이 어떻게 되는 지를 살펴보세요 제가 강조 버튼을 누르면 어떤 일이 일어나는가 하면 여기 있는 documentgetElementById에 target 값을 줌으로써 바로 id 값이 target 인 이 태그를 가리키는 값을 얻어낼 수가 있고요 그 값에 대해서 className이라고 하는 값을 지정하게 되면 이 태그에 class 값을 em으로 지정할 수 있게 되는 코드입니다 이것을 클릭하면 여기에 어떤 변화가 생기는 지를 보세요

자 클릭합니다 클릭 어때요? 보시는 것처럼 이 class=“em”이라고 하는 태그가 속성이 없었는데 생겨났고 그렇게 되면 어떻게 되냐면 이 태그들은 여기에 소속되는 태그들은 이제 em이라고 하는 class에 해당되는 디자인인 여기에 있는 이 효과에 영향을 받게 된다는 것이죠 즉 JavaScript를 통해서 우리가 이 HTML 코드를 실시간으로 프로그래밍 쪽으로 변경한 거예요 class=“em”이란 것은 없었는데 이 class=“em”이라는 것을 JavaScript로 추가 해 준거죠 이런 이유로 인해서 JavaScript를 뭐라고 부를 수 있냐면 JavaScript는 HTML를 제어하는 언어라고 할 수 있어요

보세요 HTML코드를 JavaScript로 변경했잖아요 제어하고 있는 겁니다 css는 HTML를 디자인하는 것이라면 JavaScript는 HTML을 제어하는 언어라고 할 수 있습니다 어떻게 JavaScript, HTML, css가 서로 관계되는 지를 보여주는 아주 간단하지만 아주 중요한 예제라고 할 수가 있습니다

이것을 통해서 여러분들이 css와 JavaScript, HTML의 이 미묘하고 복잡한 삼각관계에 대해서 한 번 새겨볼 수 있었으면 좋겠습니다 지금까지 우리가 살펴 본 여러 가지 이야기들은 이제 우리가 최종적으로 만들어 볼 우리가 만들 웹페이지의 스킨을 바꾸는 그 기능을 이제 구현을 하려고 제가 밑밥을 깔아 놓은 것입니다 여기까지 하고 다음 시간에는 바로 그것을 만들어 보도록 하죠

웹에플리케이션 만들기 – JS, PHP 프로그래밍 2 : JavaScript 실습

몇 가지를 좀 더 배워보죠 우리가 이전에 만들었던 예제는 이렇게 생겼었습니다

이렇게 생겼는데요 여기 밑에 있는 저 input을 그냥 지워 버릴게요 그리고 위로 올릴게요 뭐 굳이 위로 올릴 필요는 없었지만 input type은 text라고 하고, 이렇게 하겠습니다 제가 지금 뭘 하려고 하는 거냐면 여기에 다가 사용자가 어떤 정보를 입력했어요

그리고 이 white라고 하는 저 버튼을 누르면 사용자가 입력한 이 정보가 경고 창으로 뜨게 하고 싶은 거예요 그러면 어떻게 하면 될까요? 한 번 생각해보죠 그러기 위해서는 일단은 우리가 알아야 될 정보는 여기에 있는 onclick 이 부분에 있는 코드에서 즉 사용자가 이 버튼을 클릭했을 때 경고창이 뜨는 것까지는 맞는데 여기에 있는 Hello world라고 되어 있는 이 텍스트가 뜨는 것이 아니고 사용자가 이 텍스트 필드 태그 상으로는 여기 있는 이 태그에 입력한 그 정보가 바로 여기에 착 들어가도록 해야 된다는 거죠 그러기 위해서는 이 alert이라고 하는 저 괄호 안에 어떤 코드가 들어가야 되는지를 한글로 써볼게요 한글로 쓰기 전에 여기 있는 이 태그에 id 값을 줄 겁니다 id=“user_input”이라고 이렇게 할 게요

그러면 여기에 어떤 코드가 Hello world란 텍스트 대신에 들어가야 되냐면 id 값이 user_input인 태그의 입력 값이 여기에 들어가야 된다는 겁니다 그런데 이것은 사람의 언어니까 이것을 이 컴퓨터가 알아들 수 있는 말로 바꿔야 되겠죠 그러면 여기는 화면이 너무 좁으니까 제가 밑에 다가 그냥 넓직하게 쓰겠습니다 저기다가 원래 쓰면 안 되는 거예요 우선 id 값이 user_input인 저 태그를 가리키기 위해서 “user_input“이라고 적어줍니다

그런데 여기 큰 따옴표(“)는 작은 따옴표(‘)로 대체해도 아무문제가 없습니다 작은 따옴표는 이렇게 했어요 그리고 get 무엇인가를 가져온다는 뜻이죠 Element 엘리먼트란 것은 태그랑 똑같은 뜻입니다 즉 어떠한 태그를 가져 올 건데 어떤 정보를 바탕으로 가져올 거냐면 ById 값을 바탕으로 해서 어떠한 태그를 가져 오겠다는 뜻입니다

그리고 이 뒤를 이렇게 괄호로 묶어주면 이것은 뭐가 되나요 저 괄호를 보니까 이것은 함수입니다 그 함수의 입력 값으로 “user_input“을 주게 되면 우리는 이 함수가 실행된 결과로 바로 이 태그를 가리킬 수 있는 값을 얻게 됩니다 그런데 제가 이전 시간에 잠깐 언급한 적이 있는데 이 JavaScript에는 수많은 내장 함수들 좀 더 전문적인 이야기로는 수많은 API들이 존재합니다 그런데 그 API들을 그냥 무질서하게 해놓으면 어떤 API를 찾는 게 좀 어렵겠죠

그 성격이 비슷한 것들 끼리 방을 만들어서 말하자면 정리 정돈을 해놨는데 여기 있는 getElementById라고 하는 저 내장 함수는 어떤 방에 속해 있냐면 어떤 그룹에 속해있냐면 document 라는 그룹에 속해 있습니다 그러면 지금 우리가 힘들게 입력한 이 코드를 컷해서 여기 있는 Hello world 대신에 이렇게 입력해주겠습니다 그러면 이렇게 화면에 표시가 되죠 이렇게 되는 되요 제가 한번 실행을 시켜보겠습니다

white 버튼을 누르면 저 버튼을 눌렀을 때 onclick 이라는 저 속성 안에 들어 있는 저 문자를 JavaScript로 웹브라우저가 해석해서 실행하게 된다는 거죠 white를 누르니까 보시는 것처럼 경고창이 실행이 되었구요 경고창이 실행이 됐고, 그리고 그 경고창 안에 바로 이것에 해당되는 정보가 표시되고 있습니다 그러면 사용자가 여기 있는 이 텍스트 필드라고 하는 곳에 어떠한 정보를 입력하면 그 정보는 무엇을 통해서 알 수 있냐면 바로 value 라고 하는 값을 통해서 알 수가 있습니다 그러면 여기에다가 제가 이 끝에 다가 value라고 한 번 적을 게요

그리고 화면을 새로 고침하고 그 다음에 여기에 다가 Hello world라고 이렇게 입력하고요 white 버튼을 누르면 보시는 것 처럼 제가 입력한 바로 이 Hello world라고 하는 정보가 여기에 이렇게 표시되게 되는 것이죠 그것은 사용자가 여기 있는 white라는 버튼을 눌렀을 때 onclick이라고 하는 이 속성 안에 있는 이 코드가 실행이 되는데 그 중에서 괄호 안쪽에 있는 부분이 먼저 실행이 되겠죠 바로 이 부분이 일단 실행이 됩니다 이것은 id 값이 user_input인 이 element에 값을 가져와서 리턴 해주는데 바로 그 element를 가리키는 그 값에

value라고 하는 것을 이렇게 붙여주면 바로 여기에 입력된 이 Hello world라고 하는 값을 우리가 이리로 가져올 수 있게 되요 그러면 그 Hello world라는 값이 alert의 입력 값으로 들어 왔기 때문에 이렇게 Hello world라고 하는 텍스트가 화면에 출력될 수 있는 겁니다 이거 상당히 어려운 내용이고 어떻게 보면 우리 이 JavaScript 이 본 수업에서 굉장히 긴 시간 동안 설명 드리는 내용입니다 혹시 이해가 안 가셨더라도 너무 상심하지 마시고 우리 수업 이 후속 수업보시면 되고 혹시 이해가셨다면 너무 축하드립니다 예 한 번에 이해갔으면 제일 좋은 거죠

그런데 이거 한 번에 이해하기 어려운 거니까 잘 이해 안간다고 너무 어 막막해 하실 필요 없고 이거 이해 못한다고 뒤에 꺼 이해 못하는 거 아닙니다 아시겠죠 벌써 시간이 이렇게 많이 됐네요 여기서 또 한 번 끊고 우리 또 다음 시간에 나머지 얘기계속 진행해보죠

Como enviar Json do PHP para o Javascript ou Jquery

프로그래밍 팁 – Guilherme Ferreira 저 안녕, 안녕하세요? 나는 GuiFerreiraCodecom의 Guilherme FeRreira입니다

팁 하나 더 가져 가자 이 팁은 사용자 Hugo Seleiro의 의심을 푸는 것입니다 그는이 기사에 대한 논평에서 그의 어려움을보고했다 Jquery로 데이터를 가져 오는 데 문제가있었습니다 그래서이 비디오를 Jquery로 PHP 데이터를 얻는 방법을 설명하기로 결정했습니다

기본 예 친구 Hugo Seleiro를 돕기위한 기본 구현에 대해 알아 보겠습니다 어서와 기본 HTML 코드를 만들어 indexphp로 저장했습니다

나는 부트 스트랩 샘플 구조의 일부를 가져 갔다 템플릿이 프레임 워크 페이지에 있습니다 Jquery 1111을 사용하고 있습니다

구현을 테스트로 수행 할 수 있습니다 그를 여기에 배정하십시오 그것은 프로젝트의 뿌리에 있습니다 그리고 그것은 아주 간단한 예입니다 먼저 여기에서 Php와 함께 작업 해 보겠습니다

indexphp 파일임을 확인하십시오 동일한 HTML 문서에서 PHP를 사용하는 방법 기사에 가자 PHP에서는 다음과 같은 배열을 만들 수 있습니다 또는 여기에서 이쪽으로 첫 번째 형식을 사용하겠습니다

여기에 코드를 입력 해 보겠습니다 제목 만 사용합시다 그리고 설명과 나는 여전히 여기에 링크를 만들거야 여기에 링크를 만들었습니다 설명, 나는 또한 만들 것이다

$ data에 대해이 변수를 여기에서 바꿀 것입니다 그러면 Php 에이전트에서 다음과 같이 처리 할 것입니다 이 배열은 여기에있다 이 자료는 여기에 이 함수를 여기서 다루겠습니다 json_encode () html로 보내기 전에 그럼 여기서 해봅시다 이 변수를 받아서 여기에 넣을거야

Ok 그래서이 변수는 JSON을 얻고 있습니다 이 배열의 배열을 여기서 만들었 어

이 데이터는 데이터베이스에서 제공 될 수 있습니다 배열 형태로 이리 와서 여기에 저장해 둡시다 이제 PHP 부분 괜찮아 데이터를 가져 와서 Html로 가져 가자 나는 다음을 할 것이다

여기 만들자 아주 명확하게 설명 여기 아래에서 우리는이 Div를 만들 것입니다 여기 우리 스타일을 넣어 여기에 PHP를 넣을 것입니다 반향을 일으키다 우리 변수의 여기에 여기서는 이미 작동 중입니다 시험을 봅시다

이 div를 복사하여 아래에 붙여 넣습니다 신분증을 가져 가라 그냥 나타나서 작동하는지 확인하십시오 저장하고 테스트하십시오 저기 봐라

그들은 이미 우리의 HTML에오고 있습니다 그는 단지 보여주고있다 이 div는 내가 아래에 떠났다

이 하나는 HTML에 숨겨져있다 내가 여기서 데리고 나가면 그것은 페이지에서 사라집니다 코드 중간에 숨어 있습니다 여기서 확인해 봅시다 아래에 표시되면 div를 찾을 수 있습니다 내부 요소가있는 div 우리는이 div 안에 PHP 데이터를 넣습니다 이제 액세스 해 봅시다 이 div와 우리 Jquery 초기 jquery 함수를 열자 여기에 Div 데이터를 가져와 봅시다 여기에이 ID를 사용하면 "datahpp" 데이터가 올바르게 전달되는지 테스트 해 봅시다 여기 섬을보고

그리고 아름다움은 괜찮습니다 여기있다 여전히 문자열 형식입니다

나는 대상으로 변형되어야 할 것입니다 이 변환을 위해 우리는 함수를 사용할 것입니다 jquery 함수

JSONparse () 이 함수는 여기에 여기서 다른 변수를 만들겠습니다 그녀는받을 것이다

이 우리의 기능 그 안에 문자열에이 변수를 넣을 것입니다 JSON 형식으로 이제이 문자열을 객체로 변환 해 봅시다 시험합시다

테스트를보기 위해 consolelog ()를 생성 해 봅시다 어서! 여기 업데이트 그리고 봐라! 여기에 객체가 있습니다 그것은 효과가있었습니다 모든 데이터 세트로 이제이 객체를 사용하는 방법을 살펴 보겠습니다

나는 여기서 div를 만들거야 또는 더 나은 제목에 대한 h2 것입니다 우리는 id = "title" 나 여기 나중에 만들거야 a <p> 설명이있을 것이다 그리고 여전히 아래에 내가 만들거야 <span> JQuery에서 만들 링크가있을 것입니다

이제 Jquery를 사용하여이 필드에서 데이터를 채울 수 있습니다 여기에이 변수를 넣습니다 우리가 정의한 열쇠의 이름으로 열쇠는 제목이 될거야 중간은 설명 일 것이다 그리고 다음은 더보기 링크입니다

링크가 중간에있을거야 여기에 올려주세요 더보기 닫기 </a> 이제이 <span> 안에 링크를 생성 할 것입니다 시험합시다 봐! 해냈다 요약하면 : 우리는 PHP로 데이터를 보내고, 그들을 JSON으로 바꿨다 우리는이 변수에 여기에 할당합니다 Html 안에 숨겨진 div를 넣습니다 PHP 데이터 사용 그리고 데이터는 문자열 형식입니다

보이지 않는 사용자를위한 디스플레이 없음 후에 여기에 Jquery로 데이터가 있습니다 이 변수에 할당합니다 그리고 우리는 JSONparse ()를 사용하여 객체를 얻습니다

그런 다음 Jquery를 사용하여 html로 데이터를 다시 보냅니다 조용하고 잘 작동했습니다 링크도 작동했습니다 이 힌트를 사용하여 PHP 데이터로 작업하고 Jquery를 사용하여 PHP 데이터를 변경하거나 수정할 수 있습니다 이 코드는 기사에 있으며 기사 링크는 동영상 설명에 있습니다

고마워요! 내가 Hugo를 도왔 으면 좋겠어 이 비디오가 도움이 될 것 같아요 갈레라! GuiferreiraCode에서 Facebook 즐기기 Youtube 채널에 자신을 쓰십시오 동영상에 대한 모든 도움말과 시리즈를 볼 수 있습니다 고마워

포옹을 강하게하고 다음에 보자

¿Cual es la diferencia entre PHP y Javascript? Vlogs de Respuestas #1

이번 비디오에 오신 것을 환영합니다 관습에 따라 비디오 테이프가 아닙니다

내 채널이 아니라 오히려 설명 비디오 블로그 어디서 나는 차이점에 대해 이야기 할 것입니다 PHP와 Javascript 사이에는 확실히 유사점이있는 두 언어가 있지만 이 비디오는 사람들을 대상으로하기 때문에 차이점에 초점을 맞출 것입니다 웹 프로그래밍과 웹 개발에서 시작하고 있다고 생각합니다 유사점과의 차이점보다 우선적으로 접근하기 쉽습니다 질문을하는 것이 합리적입니다 아니, 그건 이해가 안돼

너는 볼거야 왜 그들은 목적이 다른 환경에 맞춰진 두 언어이기 때문에 완전히 다른 점은 가장 중요한 차이점은 각 자바 스크립트가 실행되는 사이트입니다 그것은 우리의 브라우저에서 실행되며 PHP는 웹 서버에서 실행됩니다 따라서 Javascript를 사용하여 페이지를 호스팅하면 내부에있는 것들을 조작 할 수 있습니다 브라우저와 PHP를 사용하여 서버 내부의 내용을 조작 할 수 있습니다

그럼 각자? 우리는 그림 텍스트 테이블을 가지고 있습니다 HTML 태그와 그 내용은 Javascript에서 조작 할 수 있습니다 속성, 크기, 색상, 위치, 웹 서버 내부에 데이터베이스가 있습니다 파일 및 소프트웨어 여기에 Javascript로 수행 할 수있는 다음 예제가 있습니다 당신은 내 블로그로 이동 하여이 소스 코드를 다운로드 할 수 있습니다 여기 내 블로그에 갈 수 있습니다 지금 여기를 클릭하십시오

우리가 슬라이드에서 말한 것처럼 우리는 속성을 조작 할 수 있습니다 브라우저의 모든 요소 중 "div"로 만든이 작은 상자가 있습니다 우리는 우리의 눈 앞에서 역동적으로 색상을 바꿀 수 있습니다 우리가 원하는 색상 우리가 넣을 수있는이 이미지의 크기도 바꿀 수 있습니다 우리 눈 앞에서 다시 동적으로 원하는 크기 이 애니메이션은 CSS로 자바 스크립트로 만든 아주 간단한 애니메이션입니다

애니메이션을 만들 수 있으며 애니메이션을 만드는 법을 배우려면 매우 간단합니다 CSS 예를 들어 여기를 클릭하면 여러 개의 동영상을 만들 수 있습니다 그 주위를 돌고있는 달이있는 지구의 애니메이션은 매우 간단하며 3D 큐브를 CSS로 완전히 회전시키기 위해 여기서는 매우 간단합니다 여기에 양식을 확인하십시오 : "숫자 만 쓰십시오"텍스트를 쓰고 나타납니다 이 "도구 설명"자바 스크립트를 사용하여 숫자를 만들지 않으면 양식의 값을 확인하십시오

아무것도 아니고 텍스트 인 경우 숫자가 아닌 것을 의미합니다이 "도구 설명" CSS에서 수행되는 작업은 매우 쉽습니다 내 비디오로 이동하려면 여기를 클릭하십시오 CSS의 "Tooltips"에 대해서는 Javascript가 브라우저가 PHP가 서버에서 실행되면 다음과 비슷한 매우 유사한 예제를 보자 하지만 이번에는 PHP를 여기서 다시 볼 수있는 소스 코드를 볼 수 있습니다

PHP 소스 코드는 여기를 클릭하여 내 블로그로 이동하여 다운로드 할 수 있습니다 링크의 명확한 설명을 통해 우리가 할 수있는 것들 사이의 명확한 설명을 읽으십시오 데이터베이스에 데이터를 저장합니다 고객 레코드를 만듭니다 여기 마리아 페레즈가 데이터베이스에 들어가고 마리아 페레즈가 있습니다

방금 저장 한 값입니다 데이터베이스에서 데이터를 검색 할 수 있습니다 Mary 우리가 데이터베이스에 가면 두 마리의 마리아가 검색됩니다 maría gonzales and maría pérez 우리는 파일을 업로드 할 수 있습니다 Javascript를 실행하려면 무엇이 필요합니까? 더 많은 웹 브라우저 예를 들어 Javascript를 몇 초 전에 보았던 예가이 파일입니다

클릭하고 바로 브라우저를 엽니 다 PHP를 실행하려면 무엇이 필요합니까? 서버 PHP가 활성화 된 웹 호스팅 서비스를 사용해야한다는 뜻입니까? 아니요, 웹 서버는 컴퓨터에 설치할 수있는 프로그램으로 끝난 예입니다 볼 수있는 여기에 내가 구글 크롬으로 브라우저와 함께 열려고 할 수 있습니다 하지만 HTML이 PHP 문서와 문서를 잘 보여줄 수는 없다 Javascript에는 HTML과 JavaScript가 포함되어 있으며 웹 브라우저가 나를 재생합니다 HTML이긴하지만 PHP가 아니라면 PHP는 평범한 텍스트로 그것을 보여 주며 나에게 도움이되지 않습니다

예를 들어 잠시 동안했던 것처럼 마리아를 찾을 수 있습니다 웹 서버가 필요합니다 정보가 서버에 전달되고 PHP 내부의 PHP가이를 처리합니다 "Wampserver"를 사용할 수있는 웹 서버로 사용합니다 내 블로그는 여기를 클릭하면 여러 웹 서버에서 여러 링크를 볼 수 있습니다

당신은 "AppServer", "WampServer"를 사용하여 "Xampp"을 사용할 수 있습니다 서버 링크에서 한 번 확인 링크를 확인하십시오 설치된 WampServer는 WampServer가 말하는 곳에서 여기를 클릭하여 실행됩니다 버전은 "Start Wamp Server"라고 말하고 일단 시작하면이 아이콘이 알림 영역이 녹색이어야합니다 녹색으로 변하지 않으면 프로그램이 발생합니다

이 경우 WampServer 포트 중 하나와 충돌하여 의견을 남기십시오 일단 당신이 당신의 브라우저에 가서 쓸 수있는 녹색 도움이됩니다 "localhost"그리고 WampServer 서버의 메인 페이지가 될 것입니다 또한 디스크의 루트 인 Wamp의 폴더를 Wamp의 폴더 안에 넣으십시오 www라는 폴더가 있고 거기에 게시 할 모든 파일이 게시 될 것입니다 귀하의 웹 서버에서 나는 튜토리얼이라는 폴더를 만들었고 내부는 index

php를위한 것입니다 파일에 액세스하려면 "localhost"인 웹 페이지처럼해야합니다 "slash"자습서는 indexphp와 웹 서버가 처리 할 폴더입니다 PHP 스크립트를 사용하면 웹 브라우저에 HTML 문서를 보내 게됩니다

우리가 볼 수있는 모든 PHP에서 볼 수없는 소스 코드는 순수한 HTML 소스 코드가 생성되었습니다 이 두 예제는 다음에서 다운로드 할 수 있다는 것을 기억하십시오 내 블로그 여기를 클릭하여 링크를 명확히하기 위해이 비디오를 읽는 것을 잊지 마십시오 나에게 좋아하는 것을 주면서 나에게 호의를 돌려주는 것이 유용했다 너는 나에게 페이스 북으로 나 같은 것을 줄 수도있다

토요일과 일요일에 비디오 튜토리얼을 게시하므로 구독 할 수 있습니다 여기를 클릭하여 내가 게시 한 새로운 비디오 자습서에 대해 알고 있어야합니다 당신은 비디오에서 다루지 않았다고 생각합니다 당신은 저에게 코멘트를 쓸 수 있습니다 나는 기꺼이 당신에게 대답 할 것입니다, 제 이름은 조반니입니다

제 채널에 들려 주어 고맙습니다 동영상에서 자바 스크립트로 만든 애니메이션을 보았는데 CSS 동영상으로이 동영상 블로그에 대한 좋은 아이디어가 떠오르게됩니다 type CSS 애니메이션과 자바 스크립트 애니메이션의 차이점 생각하는 의견

Drupal 7 Passing values from PHP to Javascript with “Drupal.settings”

PHP에서 Drupalsettings로 Javascript로 값 전달하기 drupal_add_js 함수 사용하기 hook_process_page를 사용하여 drupal_add_js 함수를 추가했습니다

myModule은 사용자가 지정할 수있는 모듈 이름입니다 예를 들어 myModule을 사용했습니다 또 다른 변수 'userid'는 현재 사용자의 ID를 얻기 위해 사용됩니다 이 변수는 drupal 비헤이비어를 사용하여 js 파일로 액세스 할 수 있습니다 colse 형식에서 Drupal

settingsmyModule hook_process_page ()에 정의 된 value : 행동의 두 설정에 대한 조건이 추가되었습니다 우리 JS는 PHP의 변수를 인식하고 사용자 정의 메시지를 경고합니다 두 번째 변수 "userid" 우리는 관리자로 로그인했습니다 변경 사항이 올바르게 반영되었는지 확인하기 위해 값을 수정하십시오

어려운 새로 고침 보고 주셔서 감사합니다 🙂