Ruby에서 JavaScript로 가는 길

나는 6개월 동안 루비를 배웠고 플레티론에서 Rails 개발자가 되었다.다음 도전은 자바스크립트 잠입이다.지난 두 달간의 자바스크립트는 나에게 싸움이었다.DOM과 이벤트 리스트를 조종하는 것은 나에게 있어서 모두 신선한 일이다.JavaScript에 들어가면 왜 Rails와 비교해서 웹 응용 프로그램을 구축하는 데 매우 유용한지 알 수 있을 것이다.솔직히 저는 아직도 많은 것을 배우고 있습니다. 더 열심히 일해야 더 좋은 자바스크립트 개발자가 될 수 있습니다.나의 첫 번째 프로젝트인 Rails API로 자바스크립트 단일 페이지 프로그램을 구축하는 과정에서 나는 많은 기교와 요령을 배웠다. 이런 기교와 요령이 나 같은 다른 초보자들이 자바스크립트를 배우는 데 도움을 줄 수 있기를 바란다.

위하다vs 중위...... 에 속하다

위하다위하다물론, 너는 두 개의 유용한 교체기를 알아야 한다.위하다in 은 객체에 사용되고 는 에 사용됩니다.of는 배열에 사용됩니다.

for (variable in object) {
  statement
}

에 사용됩니다.in 문장은 대상의 모든 열거 가능한 속성에 변수를 번갈아 지정합니다.이 문은 객체의 각 속성에 대해 실행됩니다.

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

위의 예에서, 우리는 대상과 컨트롤러를 교체하여 속성과 이름을 기록한다.대상에서 속성을 얻으려면, 이것은 아주 좋은 교체기입니다.

for (variable in object) {
  statement
}

에 사용됩니다.of 문장은iterable 대상을 옮겨다니며 주로 수조입니다.이 문장은 그룹의 모든 요소에 대해 실행됩니다.매번 교체할 때마다, 서로 다른 속성의 값이 변수에 분배된다.변수는const나let으로 설명할 수 있습니다.

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

innerText와 innerHTML

프로젝트를 구축할 때,div나 요소에 내용을 지우고 추가해야 합니다.이를 위해서는 요소의 inner HTML이나 inner Text에 접근해야 합니다.이 두 방법 사이의 차이를 이해하는 것은 매우 중요하다.

<div id='example'>
   <strong>This sentence is bold!</strong>
</div>

페이지에 나타나는 예제 코드는 다음과 같습니다.
이 말은 매우 거칠다!element.innerText와 element.innerHTML를 사용하면 우리는 예시 코드에서 무엇을 얻었는지 볼 수 있다.

const sentence = document.getElementById('example')
sentence.innerText

// => "This sentence is bold!"

innerText에서 태그의 내용을 검색하고 순수한 텍스트로 설정합니다.div에 HTML 형식이 없는 문자열을 반환합니다.형식이 없는 요소 내부의 내용을 보려면 innerText를 사용하십시오.

const sentence = document.getElementById('example')
sentence.innerHTML

// => <strong>This sentence is bold!</strong>

innerHTML은 HTML 형식으로 같은 내용을 검색하고 설정합니다.공백이나 줄 바꿈을 포함하여 div에 HTML 태그가 있는 문자열을 반환합니다.HTML 태그와 요소의 특정 컨텐트를 보려는 경우

==vs===

루비는 제 첫 번째 언어입니다. 저는 항상 ==를 사용해서 사물을 비교합니다.나는 자바스크립트===에 대해 이상하다고 말할 수 밖에 없었다.그것은 너무 길어 보여서 나는 다시 버튼을 눌러야 한다.자바스크립트는 기존==도 있고===도 있지만 가장 좋다===.쌍과 같은 연산자는 추상적인 비교이고, 삼과 같은 연산자는 엄격한 비교이다.

const a = 2
const b = 2

a == b
// => true

a === b
// => true

이런 상황에서 두 비교 연산자는true로 되돌아간다. 그러면 차이는 무엇일까?
쌍과 같은 연산자는 비교하기 전에 변수 값을 같은 유형으로 변환하고, 삼과 같은 연산자는 유형 변환이 없으며, 값과 유형이 모두 같을 때만true를 되돌려줍니다.

const a = 2
const b = 2
const c = "2"

a == b
// => true

a === b
// => true

a == c
// => true

a === c
// => false

이전의 같은 예시를 사용했지만, a와 b와 유사한 새로운 변수 2를 추가했지만, 이것은 정수가 아닌 문자열입니다.a == ctrue를 되돌려줍니다. 두 변수는 같은 값을 포함하기 때문에 서로 다른 유형을 가지고 있어도.이중 연산자는 두 변수를 같은 데이터 형식으로 변환한 다음 값을 비교합니다.a === cfalse를 되돌려줍니다. 변수의 유형이 다르기 때문에 값이 같아도.전체적으로 말하자면 삼중은 연산자가 데이터 유형과 값에 대해 엄격한 비교를 했기 때문에 이것은 보통 쌍과 같은 연산자보다 더 많이 사용해서 이를 더욱 좋고 정확한 비교로 만든다.

바보

Ruby에서 JavaScript로의 전환은 매우 어렵다.나는 많은 것을 배웠고, 또 많은 것을 배워야 한다.솔직히 말하면 편강 과정은 어려워서 잘 모르겠지만 일단 프로젝트를 시작하면 재료를 이해하기 시작한다.저처럼 발버둥치는 사람들에게 자바스크립트 프로젝트를 구축하는 것은 큰 도움이 될 것입니다.