PharoJS를 사용하여 Pharo에서 JavaScript 실행 시도

Smalltalk 코드PharoJS를 JavaScript로 이동할 수 있는 도구가 있습니다.즐거워 보이지만 일본어로 된 기사가 거의 없기 때문에 이번에는 이 도구를 사용하는 간단한 방법을 써 보려고 합니다.

쓰여 있는 일

  • PharoJS 설치
  • 이동 demo
  • Playground에서 JavaScript 이동
  • 환경

  • macOS Big Sur 11.1
  • Pharo 8.0.0 64bit
  • PharoJS (commit 2ed6a3d)
  • Safari 14.0.2
  • 설치


    먼저 Pharo가 설치되어 있다고 가정합니다.
    이미지를 시작한 후 Playground에서 다음을 수행합니다.
    Playground
    Metacello new
      baseline: 'PharoJS';
      repository: 'github://PharoJS/PharoJS';
      load
    
    조금 있으면 설치가 다 될 것이다.만약 순조롭게 설치된다면 메뉴 표시줄과 세계 메뉴에 PharoJS Playground가 추가될 것입니다.(겸사겸사 말씀드리지만 왠지 프로젝트 중에는 세계 메뉴에 물건이 많습니다.)

    모바일 데모(HelloWorldApp)


    그럼, 우리 바로 데모를 시작합시다.아무래도 처음이니까 Hello World App을 정하는 게 낫겠죠.“HelloWorld!”출력하면 기술이 향상됩니다. 이런 소문도 있다.

    그러면 메뉴의 항목을 클릭하면 브라우저가 자동으로 열리고 PharoJS의 로고 등이 표시되며 PharoJS Playground가 나타납니다.브라우저의 텍스트 상자에 어떤 문자를 넣을지 Say Hello 버튼을 누르면 문자가 상자 아래에 표시됩니다.순조롭게 움직인 것 같습니다.

    Playground에서 JavaScript 실행


    자동으로 열리는 PharoJS Playground이지만 그 안에 쓰인 Smalltalk 스타일의 코드는 자바스크립트로 자동으로 변환되어 실행될 것 같다.정말 플레이그라운드에서 자바스크립트를 실행할 수 있습니까?자동으로 열린 Playground에 이미 쓰여진 다음 코드doit를 시도해 보십시오.
    Playground
    document body style backgroundColor: '#fee'.
    
    이렇게 하면 브라우저에 표시된 페이지의 배경색이 바뀝니다!JavaScript가 정말 잘 움직이나 봐요.

    어렵기 때문에 플레이그라운드부터 Say Hello를 시도해 보세요.먼저 텍스트 상자에 입력한 값을 가져옵니다.(지금 텍스트 상자에 "Playground!!!"), 템플릿 이름은 다른 형식을 사용합니다.Playground에 다음 코드를 삽입합니다.
    Playground
    document getElementById: 'nameTextInput'.
    
    그러면 검사기에 다양한 정보가 표시됩니다.이것은 텍스트 상자에 있는 정보인 것 같습니다.살짝 스크롤해 보니 원하는 문자열이 있습니다!

    value 메시지를 이전 대상에 보내면 문자를 받을 수 있습니다.실제로 검사기 창에서 시도하면 순조롭게 얻을 수 있습니다.

    그럼 Playground로dot 다음 코드를 사용합시다.
    Playground
    boxText := (document getElementById: 'nameTextInput') value.
    messageField := document getElementById: 'greetingMessageContainer'.
    messageField innerText: 'Hello ' , boxText.
    
    브라우저의 측면에서 볼 때, 그것은 안전하게 반영된다!

    종료되면 Playground를 닫으면 브라우저도 자동으로 닫힙니다.

    끝내다


    Pharo에서 JavaScript 객체를 접하면 다양한 즐거움을 누릴 수 있을 것 같습니다.GitHub도 활동 중이니 앞으로도 기대해도 좋다.그냥 사용하면 JavaScript에 대한 지식도 필요할 것 같습니다.
    그렇다면 이번에는 살짝 건드리기만 하고 더 잘 쓰면 웹 앱도 만들 수 있고 스마트폰 앱도 만들 수 있다.상세한 상황예의 바른 강좌과 [참고문헌2]이 있으니 마음에 드는 사람은 꼭 참고하세요.

    참고 문헌

  • FAQ | PharoJS
  • 지금 스몰톡으로 네트워크 개발을 해볼까요?
  • 설치 방법을 모르면 Smalltalk Advent Calendar 2020 5일째 쿠리타 씨가 Pharo의 환경 구조를 썼기 때문에 참고할 수 있습니다. 
    정확히 말하면 PjProxy 클래스의 대상 메시지는 js 코드로 변환된 것처럼 보이지만 확인되지 않았습니다. 

    좋은 웹페이지 즐겨찾기