브라우저에서 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는 광범위한 용도가 있는 것 같아서 무엇부터 시작해야 할지 고민입니다.
가장 중요한 것은 처음에는 어려운 일을 하지 않고 간단한 일(주사위가 만들어 낸 것, 혹은 글을 살짝 움직이는 것)을 하면서 자신이 할 수 있는 일을 배우는 것이다.나는 급하면 시야가 좁아질 것 같아서 제멋대로 하는 것이 좋다.(너무 못난 척 해서 미안해, 난 자제했어.)
Reference
이 문제에 관하여(브라우저에서 VScode에 작성된 JavaScript 실행), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/takeinn/articles/916659f5425e70텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)