Things I wish I knew when I started Programming

이봐, 테크 리드 야 지금, 나는 오랫동안 프로그래밍 해왔다

나는 약 600 년 전에 시작했다 그래서 나는 여행에서 많은 것을 배웠다 나는이 비디오에서 다룰 것이라고 말했다 내가 당신을 위해 가지고있는 최고의 팁들 내가 자기 자신을 코딩하기 시작했을 때 내가 알기를 원하는 것 이제 팁으로 들어가 보자

제가 여러분에게 드리는 첫 번째 팁은 모든 것을 배우려고하지 않는 것입니다 모든 것을 배우려고 영원히 당신을 데려 갈 것입니다 항상 변화하는 것들 그래서 배울 필요가있는 것을 골라 내고 결과를 얻는데 집중하십시오 당신은 수천 가지 다른 기술들과 인터페이싱 할 것입니다 MySQL, Linux, 다른 API, 프레임 워크, 다른 사람들이 개발 한 모든 종류의 것들 그 모든 시간을 변경합니다

과 적어도 나를 위해, 나는 종종 다양한 기술을 파고 들며, 일들이 어떻게 작동하고 있는지 정확하게 파악하려고 노력한다 그러나 생각하는 열쇠는 사물을 사용하기 시작하는 것입니다

PDF.js Tutorial for Dummies!

잠재 고객이 귀하의 웹 사이트에서 귀하의 PDF 파일을 볼 수있게하려면 PDFjs가 가장 친한 친구입니다! PDF

js는 PDF 파일을 읽고 구문 분석하여 HTML 형식으로 렌더링합니다 그런 다음 브라우저에 넣습니다 PDFjs는 IE8 +, Firefox 및 Chrome을 지원합니다! 먼저 PDFjs가 실제로 어떻게 작동하는지 데모를 보겠습니다

PDFjs를 사용하면 Adobe Reader와 비슷한 브라우저에서 PDF 파일을 볼 수 있습니다 전체 PDF 문서가 HTML 구조로 파싱 된 것을 볼 수 있듯이 PDFjs에도 사이드 바 네비게이터가 있습니다! 이제 PDFjs를 웹 사이트에 통합하는 방법을 알아 보겠습니다

먼저 프로젝트 페이지에서 라이브러리를 다운로드해야합니다 안정 버전을 선택합시다 다운로드 후 zip 파일의 압축을 풉니 다 2 개의 폴더가 있습니다 "빌드"및 "웹"

둘 다 포함해야합니다 "build"폴더에는 PDFjs 코드의 핵심이 포함되어 있습니다 '웹'에는 viewerhtml과 사용자가 탐색하려는 모든 PDF 파일이 포함됩니다

우리의 작업은 주로 "웹"폴더와 관련 될 것입니다 지금 데모에서 보았던 Adobe Reader와 같은 페이지는 실제로는 "viewerhtml"입니다 PDF 파일을 보려면이 viewerhtml을 사용해야합니다

우리는 잠시 후에 그걸 보게 될 것입니다 이제 모든 PDFjs 파일을 웹 디렉토리에 복사 해 봅시다 PDFjs는 서버 환경에서만 작동합니다 – 로컬 PC에서의 오프라인 테스트는 작동하지 않습니다 여기 내 웹 디렉토리입니다

(이 자습서에서는 로컬 서버를 사용하고 있습니다) 좋아, 이제 lib가 생겼어 다음은 예제로 사용할 PDF 파일을 복사 해 보겠습니다 나는이 테스트 파일을 뷰어에게 시연하기에 충분해야하는 텍스트 및 배경 이미지가있는 몇 페이지로 만들었습니다 "웹"폴더에 복사 해보자 이제 파일이 준비되었습니다

마지막 부분은 뷰어에 링크를 추가하는 것입니다 이것이 내 웹 페이지라고 가정하고 사용자가 테스트 PDF 파일을 볼 수 있도록 링크를 추가하겠습니다 "viewerhtml"링크를 만들면됩니다 그 다음에 "? file = xxxx

pdf"가 붙습니다 여기서 xxxx는 PDF 파일 이름입니다 그게 다야! 이제 테스트 페이지가 준비되었습니다 어떻게 작동하는지 보자 멋지고 쉬운! 요약하면 전체 lib를 웹 디렉토리에 복사하고 PDF 파일을 웹 폴더에 저장하십시오 마지막으로 viewerhtml에 대한 링크를 PDF 파일 이름과 함께 추가하십시오 시청 해주셔서 감사합니다! 더 많은 팁과 튜토리얼을 구독하십시오!

How to Create a JavaScript Gantt Chart App Using PHP Laravel – DHTMLX Tutorial

안녕하세요, DHX 기술 지원 팀의 Ramil입니다이 동영상에서는 Laravel 프레임 워크를 사용하여 Gantt 차트 응용 프로그램을 쉽게 만들 수 있습니다

GitHub에서 데모를 준비하거나이 단계별 비디오 가이드를 따르십시오 이 비디오를 위해 여러분은 이미 PHP의 기초에 익숙하다고 가정합니다 'Composer'패키지 관리자뿐만 아니라 시스템에 설치하십시오 확실하지 않은 경우에 대한 소개 문서를 확인하십시오 Laravel 프레임 워크

모든 링크는 동영상 설명에 포함됩니다 이제`create-project` 명령을 사용하여 프로젝트 상용구를 생성 해 보겠습니다 필요한 파일을 모두 다운로드하여 만드는 데 1 분 정도 걸립니다 완료되면 모든 것이 올바른지 확인할 수 있습니다 이 단계에서 우리는 기본 Laravel 페이지를 얻습니다

괜찮아! 다음으로 Gantt 차트를 사용하여 새 페이지를 만듭니다 views 폴더로 이동하여 ganttbladephp라는 새보기를 작성하십시오 페이지에 Gantt 차트를 표시하는 데는 단지 3 단계 만 거쳐야합니다

새 페이지를 추가 한 후에는 브라우저에서 액세스 할 수 있도록해야합니다 이 튜토리얼에서는 Gantt를 앱의 기본 페이지로 만들 계획입니다 webphp로 가서 기본 경로를 'gantt'로 변경하십시오 우리가 지금 무엇을 가지고 있는지 확인합시다

그래서 빈 Gantt 차트가 있습니다 이제 Gantt가 모델을 사용하여 데이터베이스에서 데이터를 가져 오도록하겠습니다 이 비디오에서는 데이터베이스 용으로 MySQL을 사용하고 설치했다고 가정합니다 귀하의 시스템에 MySQL 서버에 새로운 데이터베이스를 생성해야합니다

녹음 할 때 PHP에 필요한 버전 8의 MySQL에는 몇 가지 문제가 있습니다 workarounds, 그래서 나는 MySQL 57을 사용하고있다 데이터베이스 서버가 실행 중인지 확인하면 'env'파일을 열고 연결 설정을 업데이트하십시오

여기서 방금 작성한 데이터베이스를 지정합니다 데이터베이스 사용자 및 암호를 설정하십시오 나머지 설정 값은 기본값과 잘 맞습니다 다음 단계는 모델 클래스와 마이그레이션을 생성하는 것입니다 Artisan 명령을 사용하여 클래스 및 마이그레이션 파일을 생성합니다

마이그레이션이 성공적으로 생성되었음을 알 수 있습니다 이제 마이그레이션 파일을 열어 보겠습니다 우리 작업과 링크에 대한 열을 지정하십시오 작업 테이블의 코드는 다음과 같습니다 그리고 링크 테이블의 코드는 다음과 같습니다

그것은 Gantt가 일하기 위해 요구되는 최소한의 것입니다 추가 데이터를 저장해야하는 경우 우리는 문제없이 모든 열을 추가 할 수 있습니다 이제 우리는 마이그레이션을 실행합니다 그 동안 우리 앱을위한 테스트 데이터를 생성 할 수 있습니다 artisan 명령을 사용하여 시드 자 클래스를 생성합니다

이제 TasksTableSeeder에 데이터를 추가합니다 데이터가로드되는지 확인하기 위해 몇 가지 작업을 추가했습니다 그리고 DatabaseSeederphp에서 테이블 시더를 호출하십시오 그런 다음 명령 줄에서 데이터베이스를 시드 할 수 있습니다

일단 데이터베이스가 생성되고 모델이 정의되면, 우리는 Gantt에 데이터를로드 할 수 있습니다 클라이언트 측에서는 JSON 형식의 데이터를 허용합니다 우리는 그것이 어떻게 작동 하는지를 알기 위해 간단한 컨트롤러를 만들 수 있습니다 클라이언트가이 작업을 호출 할 수 있도록 경로를 등록하십시오 api

php routes 파일에 경로를 추가합니다 마지막으로 'ganttload'메소드를 사용하여 뷰에서이 액션을 호출합니다 ganttload가 AJAX 요청을 보냅니다

지정된 URL에 JSON 응답을 기대할 것입니다 전에 정의 된 또한 xml_date 값을 지정했습니다 이것이 우리가 Gantt에게 데이터 소스가 사용할 날짜 형식을 알려주는 방식입니다 클라이언트 쪽에서 파싱 할 수 있습니다

응용 프로그램을 다시 시작하면 Gantt는 우리가 데이터베이스에 추가 한 작업을 표시해야합니다 기본적으로 작업 트리가 축소되어 있지만, 당신은 그것이 확대되기를 바랄 수도 있습니다 프로젝트 트리의 초기 상태는 공개 설정 클라이언트 쪽 Gantt 또는 서버에서 반환 된 데이터에서 가져옵니다 우리가 Laravel 통합을 다루고 있기 때문에, 후자로 진행해 보겠습니다 공식 문서에서, 우리는 작업의 초기 상태가 `open` 속성의 값

우리가이 값을 작업 모델에 저장하려고한다고 생각하지 않습니다 대신, 작업 클래스에 고정 값 속성을 추가 할 수 있습니다 응용 프로그램을 다시 실행하면 초기에 지점을 확장해야합니다 현재 Gantt는 백엔드에서 데이터를 읽을 수 있습니다 그러나 클라이언트에서 변경된 사항은 백엔드로 보내지거나 데이터베이스에 저장되지 않습니다

예를 들어, 여기에 새 작업을 추가 한 다음 페이지를 다시로드하면 그 작업이 사라진 것을 볼 수 있습니다 고쳐 주자! 이전 비디오에서 보았 듯이, 당신은 꽤 쉽게 클라이언트 측에서 업데이트를 가능하게 할 수 있습니다 지금 우리가 필요로하는 것은 작업과 링크 모두에 대한 작업을 처리하는 컨트롤러를 정의하는 것입니다 모델을 만들고 클라이언트의 경로를 만들고 클라이언트 측에서 데이터를 저장할 수 있습니다 컨트롤러부터 시작하겠습니다

각 모델에 대해 하나의 리소스 컨트롤러를 만듭니다 여기에는 모델을 추가, 삭제 및 업데이트하는 메소드가 포함됩니다 이 방법은 매우 간단합니다 클라이언트 측에서 작업 객체를 요청 매개 변수를 입력하면 모델 항목을 구성하여 저장 장치에 저장합니다 dhtmlxGantt에 특정한 몇 가지가 있습니다

"진행"값을 확인하고 요청이있는 경우 기본값을 0으로 지정합니다 매개 변수가 비어 있습니다 클라이언트 측 Gantt가이 열을 선택 사항으로 간주하고이 열을 선택적으로 간주하기 때문에이를 수행합니다 값이 클라이언트에 설정되지 않은 경우 백엔드 이 경우 기본값 대신 null 대신 0을 설정해야합니다

둘째, 응답 형식을 기록하십시오 action 매개 변수는 클라이언트 측에 조치 결과를 알려줍니다 클라이언트가 이해할 수있는 몇 가지 고정 값이 있습니다 이 경우 성공적으로 추가 된 항목에 대해 '삽입 됨'상태가 반환됩니다 그리고 새로운 데이터베이스 ID를 포함해야하는 "tid"매개 변수가 있습니다

목 실제로 응답과 함께 추가 정보를 클라이언트에게 보낼 수 있습니다 기본적으로 Gantt는이를 무시하지만 공용 API를 사용하여 Gantt에 액세스 할 수 있습니다 여기에는 "업데이트"및 "삭제"작업이 있습니다 그들은 거의 같은 방식으로 작동하므로 더 이상 확장하지 않을 것입니다

Gantt가 호출 할 수 있도록 새 컨트롤러의 경로를 추가하는 것을 잊지 마십시오 이제 LinkController에 대해서도 같은 것을 구현해 보겠습니다 우리가 방금 만든 작업 컨트롤러와 정확히 같기 때문에 너무 자세하게 설명하지 않겠습니다 구현 됨 : 여기서 새로운 링크를 생성하는`store` 메소드를 볼 수 있습니다 기존 항목의 변경 사항을 저장하는`update` 메소드와`destroy` 메소드는 그것과 거의 동일합니다

이전의 경우와 마찬가지로 경로를 추가하십시오 마지막으로 클라이언트 쪽에서 업데이트를 사용할 수 있습니다 우리가 이전 단계에서 모든 것을 올바르게 만들었다는 것을 감안할 때, 우리의 간트는 변화를 저장할 것입니다 방금 구현 한 컨트롤러를 사용합니다 앱을 다시 실행하고 확인해 보겠습니다

dev 도구를 보면, Gantt가 이제 서버를 호출해야합니다 내가 뭔가를 수정할 때마다 페이지를 새로 고침하면 모든 변경 사항은 유지됩니다 더 많은 것을 알고 싶다면 이전 비디오와 공식 문서를 볼 수 있습니다 Gantt가 사용하는 요청 형식

그리고이게 다야! Gantt 차트가 포함 된 간단한 Laravel 응용 프로그램을 만들었습니다 봉사해야하는 dhtmlxGantt를 사용하여 실험을 시작하십시오 동영상 설명에서이 자습서의 텍스트 버전에 대한 링크를 찾을 수 있습니다 완벽한 응용 프로그램과 함께 GitHub 저장소에 대한 링크입니다 다음 번에 짧은 동영상 시리즈를 계획하고 있습니다

Gantt API의 다른 부분 탐색 일반적으로 직면하는 일반적인 작업 실제 프로젝트에서 Gantt 사용하기 구성처럼 Gantt 차트에서 왼쪽 그리드의 댓글 섹션에서 내가 다루고 싶은 다른 주제를 알려주십시오 앞으로는! 관심과 비디오를 주셔서 감사합니다!

Create a URL Shortener (Part 1) – PHP In Action

얘들 아 무슨 일이야? 이 비디오를 시작하기 전에 나는 사과하지 않고 싶었습니다 요즘에는 어떤 콘텐츠를 만들지 만 돌아 왔습니다

너 많이 알고 싶어 내가 좋아하는 Minecraft 비디오를 계속해서 너무 좋아해서 앞으로 갈 것입니다 그리고 그것들을 계속해라 그러나 내가 정말로하기 때문에 나는 새로운 시리즈를 시작하고 싶었다 프로그래밍 언어 PHP와 마찬가지로, 이미 많은 동영상이 PHP의 기본 인터넷에서, 그래서 내가 가서 건너 뛸 수있는 생각, 그리고 PHP를 이미 모르는 경우 YouTube의 멋진 채널에 대한 링크가 있습니다

여기서 당신은 기초를 배울 수 있습니다 따라서이 프로젝트의 기술은 PHP 객체 지향 프로그래밍을 활용할 예정입니다 일부 SQL 준비된 문을 사용하여, 나는 그것을 사용하는 방법을 살펴볼 것입니다 간단히 말해서, 당신이 정말로 그것을 알 필요가 없다는 것은 꽤 간단하다는 것입니다 나는 몇 가지 기본 htaccess를 사용하려고합니다

솔직히 복사 / 붙여 넣기는 매우 일반적으로 사용되는 htaccess이기 때문에 붙여 넣을 수 있습니다 파일 몇 가지 MYSQL을 사용하려고합니다 아주 기본적인 데이터베이스 일 뿐이므로 기본 사항 만 알고 사용자 사이트에서 많은 것을 알아야 할 필요가 있습니다

일부 자바 스크립트 이 부분은 선택 사항이며 더 쉽게 사용할 수 있습니다 따라서 이 상자에 링크를 붙여 넣으면 자동으로 버튼을 클릭하므로 그것은 JavaScript를 통해 이루어졌으며 jQuery를 사용하여 대신 AJAX를 사용할 수 있도록 구현하여 새로 고침 할 필요가 없습니다 페이지와 기타 등등 더 나은 사용자 환경이지만이 동영상은 엄격하게 적용됩니다

PHP 그래서 저는 더 깊이 들어가고 싶지 않았습니다 그래서 더 이상 신경 쓰지 않고, myURL에 소개 할 예정입니다이 기본 URL 단축키는 여기 링크를 클릭하면, 여기에 링크를 붙여 넣으면 앞으로 나아가고 단축됩니다 그것은 단지 JavaScript를 통해 수행되었으므로 클릭하지 않아도됩니다

AJAX 없음 익숙한 클릭하면 Google로 연결됩니다 이제 데이터베이스에 가면 당신이 그것을 볼 수 있듯이 나는 그것을 클릭하여 등록했다 그러면 다시 클릭하면 좋아요 클릭 카운터가 작동하는지 다시 확인할 수 있습니다 그럼 우리는 무엇을 가지고 있습니까? 데이터베이스에는 "id", "url", "alias"및 "clicks"가 있습니다 우리 코드에 관해서는 실제로는 꽤 간단합니다

이 동영상은 실제 동영상을 설정하는 것입니다 인프라가 필요하므로 기본 정보 만 살펴 보도록하겠습니다 당신은 URL을 생성합니다 나는 또한 북마크 렛을 가지러 가고있다 자바 스크립트, 아주 기본적인 자바 스크립트 (당신이 무엇을 의미하는지 알 필요도 없다) 링크를 클릭하면 URL을 짧게 할 수 있습니다

그게 북마크이고 그 다음엔 짧아 질거야 링크 괜찮아? 그래서 필자는 예제 파일을 가지고 갈 예정이므로 URL 그래서 그냥 열어 (나는이 모든 것을 열고 그냥 보여주고 싶어) "htaccess"- 나는 그걸 두 번째로 보게 될거야 당신이 config를 볼 수 있듯이 그것은 정직합니다

그다지 오래 멋진 기능이 정말 많습니다 마크 업입니다 웹 페이지의 경우에도 오래있을 필요는 없습니다 매우 간단합니다

실제로 진행되는 코드이며 단축됩니다 바로 거기와 오른쪽 상단에 있습니다 나머지는 모두 마크 업입니다 (원하는 마크 업 괜찮아요) 그런 다음 처리 파일을 가지고 있습니다 메인 클래스를 가지면 매우 복잡해 보이지만 실제로 그렇게 나쁘지는 않습니다

먼저 폴더를 만들어 보겠습니다 이것은 단지 어디에있을 것입니다 모든 파일 (아마도 도메인의 루트)을 유지하므로 새 폴더를 만들고이 URL을 기본 URL 단축키로 지정합니다 우리 프로젝트를위한 폴더가 생겨서 앞으로 나아갈 것입니다 데이터베이스를 작성하십시오

따라서 기존 데이터베이스에 대한 코드를 살펴보면 "id", "alias"및 "clicks"와 같은 기능을 추가 할 수 있으며 원하는만큼 많은 기능을 추가 할 수 있습니다 이에 이것은 단순한 기본 URL 축소 자입니다 그래서 당신이 볼 수 있듯이 "이드"는 길이가 11 인 정수,이 특정 URL은 "VARCHAR"이며 "255"및 "별칭"에 대해서도 "255"입니다 원할 경우 분명히 짧게 만들 수 있습니다

클릭 수를 늘려서 그 길이는 11의 정수이며, 이것들은 모두 "null"을 받아 들일 것입니다 그리고 그들은 자동 증가 할 부호없는 정수가 될 것입니다 다음을 제외하고는 기본값이 아무 것도 아닐 것입니다 "클릭" 그러니 계속 진행하십시오

그래서 PHPMyAdmin을 사용할 수 있습니다 이 작업을 수행하는 기본 MYSQL 쿼리를 사용하지만 나는 *라는 이름의 프로그램을 사용하려고합니다 * "SequelPro"와 내가 믿는 맥 전용 응용 프로그램입니다 그래서 나는 그냥 갈거야 새 데이터베이스를 만들려면이 "tutorial_url"을 호출 할 것입니다 좋아요

우리가 방금 이야기 한 구조를 만들어 보겠습니다 그래서 나는 "urls"라는 테이블을 만들려고합니다 이미 자동 증분 (내가 원하는 것)이고 또한 "URL"에 대해 새로운 것을 만들고 싶습니다 이것을 255의 VARCHAR로 만드십시오 좋아 보인다

기본값 – 원하지 않음 null, 나는 단지 비어 있기를 원했어 빈 URL 데이터가 없으므로 그다지 중요하지 않습니다 "별칭"우리는 길이 255의 VARCHAR가되기를 원합니다 그것도 null을 삭제하고, 지금은 클릭을 할 것입니다 나는 그것을 정수, 11로 설정하십시오

(아마 괜찮을 겁니다 클릭 수보다 많음) 기본값은 0으로 설정하려고합니다 아무도 링크를 클릭하지 않으면 0이어야합니다 분명히 있어야합니다

0입니다 음수 일 수 없으므로 저는 이것을 0으로 설정하려고합니다 이제 좋습니다 완료되면 모든 데이터베이스 구조가 완성됩니다 아주 간단하므로 이제 완료되었으므로 이제 설정 파일을 만들고 새로운 파일을 만들고 싶습니다

나는 이것을 "configphp"로 저장하려고한다 이것은 단지 그것을 만들 것입니다 우리 데이터베이스로 작업하기가 더 쉽습니다 그래서 몇 가지 상수를 만들려고합니다

여기에 내가 간다 * 화면의 텍스트보기 * 이것은 당신이 원하는 상수 일 수 있습니다 이런 식으로 읽기가 쉬워지기 때문에 내가 사용하려고하는 것은 그것이 더 잘 작동한다고 생각해 * 화면의 텍스트보기 * 내가 로컬에 잘 일하고 있기 때문에 나는 암호가 없다 어쨌든 많은 보안이 필요하지 않습니다

"BASEPATH"는 단지 기본 도메인이있는 위치가 될 것입니다 끝 부분에 슬래시를 넣지 마십시오 * 화면의 텍스트보기 * 좋아요 그래서 첫 번째 것이 당신 것입니다 호스트, 사용자 이름, 암호 및 도메인의 기본 정보가 포함됩니다

그래서 우리는 http://yourdomaincom을 입력하십시오 넣지 마라 끝에 슬래시를 치면 잠시 후에 보게 될 것입니다 이것이 바로 설정 파일입니다

그래서 다음 비디오에서는이 프로젝트의 클래스 파일을 만듭니다 모든 코드를 포함 할 것입니다 그 짐승은 길이가 150 줄과 같습니다 그렇게 나쁘진 않다 PHP 초보자라면 많이 좋아 보이지만 솔직히 당신이 그것을보고 단지 우리가하고있는 것을 연구하면, 모든 것이 만들어집니다

감각 그래서 다음 비디오에서 우리는 야수를 다루게 될 것입니다 그건 나쁘지, 정말로 그렇지 않아 좋아, 다음 튜토리얼에서 너희들을 잡을거야

Simple OCR demo in JavaScript

안녕하세요! JavaScript에서 Optical Character Recognition 라이브러리 인 Ocradjs에 대해 오늘 배웠습니다

나는 그것을 사용하기로 결정했다 그래서, 내 첫 번째 아이디어는 카메라에서 이미지를 잡는 것이 었습니다 그 이미지에있는 텍스트를 읽습니다 먼저 HTML5에서 비디오를 캡처하는 방법을 배우기 시작했습니다 html5rocks

com에 잘 설명되어 있습니다 그런 다음 glfxjs 라이브러리를 발견했습니다 일부 필터를 추가하려면 이미지에 일부 파일러를 적용하십시오 변경 : 밝기 변경, 변경 명암을 조절하고 선명하게하십시오

텍스트를 추출하기 전에 카메라에서 이미지를 개선해야합니다 마지막으로 이미지를자를 수있는 작은 jQuery 플러그인을 발견했습니다 나는 이것으로 끝났다 매우 간단한 데모입니다 이제 브라우저에서 카메라를 사용하도록 허용 할 것입니다

여기서 나는 여기에서 추출하려고하는 텍스트를 본다 적절한 스냅 샷을 만들어 보겠습니다 승인 이것은 효과가있다 자, 내가 추출하고자하는 텍스트를 잘라냅니다

승인 이제 우리는 Ocradjs 라이브러리를 사용하여 읽으려고합니다 보시다시피 매우 잘 작동합니다 실제로, 모든 인쇄물, 모든 인쇄 된 텍스트를 테스트 한 결과 올바르게 읽혀지고 추출되었습니다

Ocradjs 라이브러리에 의해 올바르게 필기는 실제로 작동하지 않지만 아마도 필자의 끔찍한 필기 그래, 그게 다야 이 프로젝트를 사용할 수 있도록 노력할 것입니다

곧 나는 그것에 만족할 것이다 보시다시피, 초기 단계에 있습니다 개발 단계 어쨌든, 시청 해 주셔서 감사합니다!

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 을 클릭했을 때 어두운 색깔로 디자인이 변경된다는 것을 볼 수가 있습니다