SlideShare a Scribd company logo
1 of 14
Java Script  on Rails 제 5 회 루비세미나 발표자료 (2007 년  12 월  1 일 ) 튜토리얼 [email_address] http://thinkr.egloos.com http ://usefulparadigm.com
모든 자바스크립트 마법이 시작되는 한 줄 <%= javascript_include_tag  :defaults  %>
레일스  Ajax  헬퍼 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ajax  응답의  3 유형 Client Server ,[object Object],[object Object],HTML  조각 1 Client Server ,[object Object],[object Object],[object Object],[object Object],데이터  only (XML, JSON, etc) 2 Client Server ,[object Object],자바스크립트 (instructions) 3 1 3 2 Client-side Processing Loosely-coupled Server-side Processing Tightly-coupled
RJS =  Ruby  generated JavaScript try { $(&quot;here&quot;).visualEffect(&quot;highlight&quot;); } catch (e) {alert('RJS error:' + e.toString());    alert('$(amp;quot;hereamp;quot;).visualEffect(amp;quot;highlightamp;quot;);');  throw e  } page[‘here’].visual_effect(…) page.select(‘xxx’).doSomething ... class ThingsController < .. def do ... # process rutines end  <%=  link_to_remote  “Hello,”,   :url => do_things_path %> <div id=“ here ”>World!</div> Form Rails RJS Hello, World! Hello, World!
Ajax Request Processing <div id=“ userlist ”>...</div> <%  remote_form_for  :user,   :update => ‘ userlist ’,   :position => :bottom,   :url => users_path do … render  :partial  => :user, :locals => … <div id=“ userlist ”>...</div> <%  remote_form_for   :user,   :url => users_path do … page.insert_html :bottom,  ‘ userlist ’ ,    :partial  => :user, :locals => … 액션 뷰 뷰 Ajax Request RJS Ajax Request
Why RJS? ,[object Object],[object Object],[object Object],[object Object]
JavaScriptGenerator 와  RJS  프록시 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
RJS Recipes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
WHERE  do I put my JS? <%=  yield :javascript  %> layouts/application.rhtml <% content_for  :javascript do  %> <%= javascript_include_tag  :my_own  %> <%  end  %> controllers/index.rhtml var myObject = function() { ... public/javascripts/my_own.js
Unobtrusiveness? <%=  link_to_remote “ Click Me? ”,    user_path(3)  %>
Unobtrusive  JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Rails Way vs. jQuery Way? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Rails Javascript Helper Prototype + LowPro/UJS jQuery
DEMO

More Related Content

What's hot

Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework Sakthi Bro
 
Requirejs
RequirejsRequirejs
Requirejssioked
 
Automated testing with RSpec
Automated testing with RSpecAutomated testing with RSpec
Automated testing with RSpecNascenia IT
 
Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4성일 한
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IVisual Engineering
 
jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)Addy Osmani
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applicationsMilan Korsos
 
How to learn to build your own PHP framework
How to learn to build your own PHP frameworkHow to learn to build your own PHP framework
How to learn to build your own PHP frameworkDinh Pham
 
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...Caldera Labs
 
SproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsSproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsMike Subelsky
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewVisual Engineering
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 
Обзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScriptОбзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScriptCOMAQA.BY
 

What's hot (20)

Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework
 
Requirejs
RequirejsRequirejs
Requirejs
 
Symfony2 and AngularJS
Symfony2 and AngularJSSymfony2 and AngularJS
Symfony2 and AngularJS
 
RSpec 2 Best practices
RSpec 2 Best practicesRSpec 2 Best practices
RSpec 2 Best practices
 
Automated testing with RSpec
Automated testing with RSpecAutomated testing with RSpec
Automated testing with RSpec
 
Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
 
jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
 
22 j query1
22 j query122 j query1
22 j query1
 
How to learn to build your own PHP framework
How to learn to build your own PHP frameworkHow to learn to build your own PHP framework
How to learn to build your own PHP framework
 
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
 
SproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsSproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
JavaScript Basics with baby steps
JavaScript Basics with baby stepsJavaScript Basics with baby steps
JavaScript Basics with baby steps
 
Being a jsp
Being a jsp     Being a jsp
Being a jsp
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Js unit testing
Js unit testingJs unit testing
Js unit testing
 
Обзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScriptОбзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScript
 

Viewers also liked

루비온레일즈_01_간단한 정적인 홈페이지 제작
루비온레일즈_01_간단한 정적인 홈페이지 제작루비온레일즈_01_간단한 정적인 홈페이지 제작
루비온레일즈_01_간단한 정적인 홈페이지 제작SangHun Lee
 
루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기Sukjoon Kim
 
레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드Sukjoon Kim
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails추근 문
 
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)Taeung Song
 
문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시동현 조
 
패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션Taegon Kim
 
프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요Chris Ohk
 
이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께지수 윤
 
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)MinGeun Park
 
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101Chang W. Doh
 
초급 개발자 탈출
초급 개발자 탈출초급 개발자 탈출
초급 개발자 탈출JeongHun Byeon
 
게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법Chris Ohk
 
2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태NAVER D2
 
손코딩뇌컴파일눈디버깅을 소개합니다.
손코딩뇌컴파일눈디버깅을 소개합니다.손코딩뇌컴파일눈디버깅을 소개합니다.
손코딩뇌컴파일눈디버깅을 소개합니다.Kwangsung Ha
 
EMOCON 2015 - Sketch3로 기획서 관리하기
EMOCON 2015 - Sketch3로 기획서 관리하기EMOCON 2015 - Sketch3로 기획서 관리하기
EMOCON 2015 - Sketch3로 기획서 관리하기이상한모임
 
소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵중선 곽
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기JinKwon Lee
 

Viewers also liked (18)

루비온레일즈_01_간단한 정적인 홈페이지 제작
루비온레일즈_01_간단한 정적인 홈페이지 제작루비온레일즈_01_간단한 정적인 홈페이지 제작
루비온레일즈_01_간단한 정적인 홈페이지 제작
 
루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기
 
레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드레일스를 이용한 애자일 웹 개발 가이드
레일스를 이용한 애자일 웹 개발 가이드
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails
 
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
 
문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시
 
패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션
 
프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요
 
이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께
 
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
[0119 박민근] 기술 면접시 자주 나오는 문제들(ver 2013)
 
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101
 
초급 개발자 탈출
초급 개발자 탈출초급 개발자 탈출
초급 개발자 탈출
 
게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법
 
2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태
 
손코딩뇌컴파일눈디버깅을 소개합니다.
손코딩뇌컴파일눈디버깅을 소개합니다.손코딩뇌컴파일눈디버깅을 소개합니다.
손코딩뇌컴파일눈디버깅을 소개합니다.
 
EMOCON 2015 - Sketch3로 기획서 관리하기
EMOCON 2015 - Sketch3로 기획서 관리하기EMOCON 2015 - Sketch3로 기획서 관리하기
EMOCON 2015 - Sketch3로 기획서 관리하기
 
소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 

Similar to JavaScript on Rails 튜토리얼

Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On RailsWen-Tien Chang
 
And the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack SupportAnd the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack SupportBen Scofield
 
Introduction to Prototype JS Framework
Introduction to Prototype JS FrameworkIntroduction to Prototype JS Framework
Introduction to Prototype JS FrameworkMohd Imran
 
PHP and Rich Internet Applications
PHP and Rich Internet ApplicationsPHP and Rich Internet Applications
PHP and Rich Internet Applicationselliando dias
 
Adventurous Merb
Adventurous MerbAdventurous Merb
Adventurous MerbMatt Todd
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2tonvanbart
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery ApplicationsRebecca Murphey
 
Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008Rob
 
Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2borkweb
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricksambiescent
 
Avinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPressAvinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPresswpnepal
 

Similar to JavaScript on Rails 튜토리얼 (20)

Merb jQuery
Merb jQueryMerb jQuery
Merb jQuery
 
Building Web Interface On Rails
Building Web Interface On RailsBuilding Web Interface On Rails
Building Web Interface On Rails
 
And the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack SupportAnd the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack Support
 
Introduction to Prototype JS Framework
Introduction to Prototype JS FrameworkIntroduction to Prototype JS Framework
Introduction to Prototype JS Framework
 
Framework
FrameworkFramework
Framework
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
 
Rails is not just Ruby
Rails is not just RubyRails is not just Ruby
Rails is not just Ruby
 
JS-05-Handlebars.ppt
JS-05-Handlebars.pptJS-05-Handlebars.ppt
JS-05-Handlebars.ppt
 
Intro to jquery
Intro to jqueryIntro to jquery
Intro to jquery
 
PHP and Rich Internet Applications
PHP and Rich Internet ApplicationsPHP and Rich Internet Applications
PHP and Rich Internet Applications
 
Adventurous Merb
Adventurous MerbAdventurous Merb
Adventurous Merb
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008Rugalytics | Ruby Manor Nov 2008
Rugalytics | Ruby Manor Nov 2008
 
Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
 
Rails <form> Chronicle
Rails <form> ChronicleRails <form> Chronicle
Rails <form> Chronicle
 
Avinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPressAvinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPress
 

More from Sukjoon Kim

워드프레스 웹사이트 제작 가이드
워드프레스 웹사이트 제작 가이드워드프레스 웹사이트 제작 가이드
워드프레스 웹사이트 제작 가이드Sukjoon Kim
 
Ruby on Rails와 함께 하는 애자일 웹 개발
Ruby on Rails와 함께 하는 애자일 웹 개발Ruby on Rails와 함께 하는 애자일 웹 개발
Ruby on Rails와 함께 하는 애자일 웹 개발Sukjoon Kim
 
루비가 얼랭에 빠진 날
루비가 얼랭에 빠진 날루비가 얼랭에 빠진 날
루비가 얼랭에 빠진 날Sukjoon Kim
 
Realtime Web 간보기
Realtime Web 간보기Realtime Web 간보기
Realtime Web 간보기Sukjoon Kim
 
페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011Sukjoon Kim
 

More from Sukjoon Kim (6)

워드프레스 웹사이트 제작 가이드
워드프레스 웹사이트 제작 가이드워드프레스 웹사이트 제작 가이드
워드프레스 웹사이트 제작 가이드
 
Ruby on Rails와 함께 하는 애자일 웹 개발
Ruby on Rails와 함께 하는 애자일 웹 개발Ruby on Rails와 함께 하는 애자일 웹 개발
Ruby on Rails와 함께 하는 애자일 웹 개발
 
Merb tutorial
Merb tutorialMerb tutorial
Merb tutorial
 
루비가 얼랭에 빠진 날
루비가 얼랭에 빠진 날루비가 얼랭에 빠진 날
루비가 얼랭에 빠진 날
 
Realtime Web 간보기
Realtime Web 간보기Realtime Web 간보기
Realtime Web 간보기
 
페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011페이스북 소셜 앱 개발 가이드 2011
페이스북 소셜 앱 개발 가이드 2011
 

Recently uploaded

Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 

Recently uploaded (20)

Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 

JavaScript on Rails 튜토리얼

  • 1. Java Script on Rails 제 5 회 루비세미나 발표자료 (2007 년 12 월 1 일 ) 튜토리얼 [email_address] http://thinkr.egloos.com http ://usefulparadigm.com
  • 2. 모든 자바스크립트 마법이 시작되는 한 줄 <%= javascript_include_tag :defaults %>
  • 3.
  • 4.
  • 5. RJS = Ruby generated JavaScript try { $(&quot;here&quot;).visualEffect(&quot;highlight&quot;); } catch (e) {alert('RJS error:' + e.toString()); alert('$(amp;quot;hereamp;quot;).visualEffect(amp;quot;highlightamp;quot;);'); throw e } page[‘here’].visual_effect(…) page.select(‘xxx’).doSomething ... class ThingsController < .. def do ... # process rutines end <%= link_to_remote “Hello,”, :url => do_things_path %> <div id=“ here ”>World!</div> Form Rails RJS Hello, World! Hello, World!
  • 6. Ajax Request Processing <div id=“ userlist ”>...</div> <% remote_form_for :user, :update => ‘ userlist ’, :position => :bottom, :url => users_path do … render :partial => :user, :locals => … <div id=“ userlist ”>...</div> <% remote_form_for :user, :url => users_path do … page.insert_html :bottom, ‘ userlist ’ , :partial => :user, :locals => … 액션 뷰 뷰 Ajax Request RJS Ajax Request
  • 7.
  • 8.
  • 9.
  • 10. WHERE do I put my JS? <%= yield :javascript %> layouts/application.rhtml <% content_for :javascript do %> <%= javascript_include_tag :my_own %> <% end %> controllers/index.rhtml var myObject = function() { ... public/javascripts/my_own.js
  • 11. Unobtrusiveness? <%= link_to_remote “ Click Me? ”, user_path(3) %>
  • 12.
  • 13.
  • 14. DEMO