브라우저에서 VScode에 작성된 JavaScript 실행

15726 단어 JavaScriptVS Code초학자tech

개시하다


나의 친구는 최근에 어떤 사람이 프로그래밍을 시작했다.
그 선생은 나에게 vscode로 브라우저에서 자바스크립트를 어떻게 실행하는 것이 좋을지 연락해서, 나는 내 방식대로 필기를 정리한 후에 나에게 비교적 이해하기 쉽다고 알려주었다.
초보자일 때도 잘 몰라서 당혹스러웠던 기억이 있기 때문에 어렵게 기사를 쓰려고 처음 젠에 투고했다🙏

미리 준비하다


우선 vscode에 확장 기능을 추가합니다.
vscode를 열고 네 개의 사각형 아이콘을 누르십시오.그러면 검색창이 있으니 거기Debugger for Chrome에 넣어서 검색하세요.이렇게 하면 첨부 파일 사진 같은 UI가 있으므로 설치를 누릅니다.같은 요령Live Server에 따라 검색하여 설치합니다.


이루어지다


vscode를 열고 폴더를 열려면 누르십시오.

원하는 디렉터리 (폴더) 에 새 아스팔트를 만듭니다.

새로 만든 아스팔트를 선택하고 오른쪽 아래쪽을 눌러 열어라.

다음은 서류를 작성하겠습니다.(4개의 나란히 아이콘 맨 왼쪽에 새 파일 만들기)
아이콘을 누르면 파일 이름을 입력할 수 있기 때문에 임의의 파일 이름을 입력합니다.
이번HelloWorld.js.그러면 JavaScript 파일을 만들 수 있습니다.


새 파일에 간단한 코드를 쓰십시오.
먼저 쓴다console.log("Hello world!!");.

이렇게 되면 자바스크립트 파일에 자바스크립트 코드를 쓸 수 있다🎉
그러나 이 경우에만 브라우저에서 코드를 실행할 수 없습니다.
그런 다음 HTML 파일을 만듭니다.
파일을 만드는 방법은 JavaScript 파일과 같습니다.
새 파일을 만들어 주십시오. 이름은 index.html 입니다.

파일에 반각 영문 숫자html를 입력하면 예측 변환이 나타납니다.이 중에서 선택하십시오html:5.선택하면 코드가 자동으로 나옵니다.
(코드가 나오지 않으면 다음 코드를 복사하십시오)
※ 본 취지와 일치하지 않기 때문에 HTML 파일의 내용은 설명하지 않습니다.


다음은 복제용 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
방금 만든 자바스크립트 파일과 이} 파일을 연결하는 작업을 진행합니다.
나는 방금 파일에 코드가 하나 있다고 생각한다<title>Document</title>.
아래에 다시 쓰시오<script src="HelloWorld.js"></script>.참고로 HelloWorld.js 부분은 방금 만든 자바스크립트 파일의 이름을 사용하세요.
※ 파일 이름을 쓸 때는 반드시 ""로 묶어야 합니다.
쓸 뜻은 없지만 자바스크립트 파일<body> 아래에 <h1>Hello world!</h1>라고 적으세요.

미리 준비되었으므로 브라우저를 사용하여 JavaScript 코드를 실행합니다.
예 Open with Live Server를 마우스 오른쪽 버튼으로 클릭하고 를 클릭합니다.

브라우저가 자동으로 시작되어 방금 쓴 것을 보여 줍니다 Hello world!.

그런 다음 브라우저를 마우스 오른쪽 버튼으로 클릭하고 유효성 검사를 누릅니다.

인증 도구가 시작된 것 같습니다. 컨트롤러 탭을 선택하십시오.
방금 자바스크립트 파일에 적힌 console.log("Hello world!!"); Hello world!! 부분을 보여 줍니다.이렇게 하면 브라우저에서 자바스크립트를 실행할 수 있다🎉
자바스크립트 파일Hello world!!을 다른 단어로 바꾸면 브라우저 문구도 바뀔 수 있으니 꼭 시도해 보십시오. ※그때는 반드시 글자를'괄호'로 묶어 주십시오.

응용 프로그램


그런데 솔직히 자바스크립트는 도대체 뭘 할 수 있을까?그런 마음이 있어서 편하게 다른 일을 하고 싶어요.여기에는 별다른 해설이 없으니 복사해 주십시오🙏
(코드가 매우 거칠지만 많이 보세요. 이것은 첫 번째 학자가 사용한 깨진 코드입니다.)
HelloWorld.다음은 js 파일을 다시 쓰는 것입니다.
// フラグでボタンが押されているかどうかを判断
let flag = true;
const changeBgColor = () => {
  //flagがtrueなら{}内の処理に入る
  if (flag === true) {
    //背景色を赤に変更する処理
    document.body.style.backgroundColor = "red";
    //現在のflagがtrueなのでfalseに変更して、
    // 次ボタンが押されたら背景色がblueになるようにする
    flag = false;
    //flagがfalseなら{}内の処理に入る
  } else if (flag === false) {
    //背景色を青に変更する処理
    document.body.style.backgroundColor = "blue";
    //現在のflagがfalseなのでtrueに変更して、
    // 次ボタンが押されたら背景色がredになるようにする
    flag = true;
  }
};
HTML 파일은 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="HelloWorld.js"></script>
  </head>
  <body>
    <input type="button" value="押して！！" onclick="changeBgColor()" />
  </body>
</html>
이걸로 브라우저를 보면 버튼이 있어요. 눌러주세요.나는 배경의 색깔이 변했다고 생각한다.

최후


JavaScript는 광범위한 용도가 있는 것 같아서 무엇부터 시작해야 할지 고민입니다.
가장 중요한 것은 처음에는 어려운 일을 하지 않고 간단한 일(주사위가 만들어 낸 것, 혹은 글을 살짝 움직이는 것)을 하면서 자신이 할 수 있는 일을 배우는 것이다.나는 급하면 시야가 좁아질 것 같아서 제멋대로 하는 것이 좋다.(너무 못난 척 해서 미안해, 난 자제했어.)
PAT(Advanced Level) Practice 1002 A+B for Polynomials(25점)
Windows Phone 7 네트워크 프로그래밍 일기예보 적용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage