Heim  >  Artikel  >  Web-Frontend  >  Lösung der JavaScript-Laufzeitumgebung

Lösung der JavaScript-Laufzeitumgebung

coldplay.xixi
coldplay.xixinach vorne
2020-11-27 17:07:3610119Durchsuche

In der Kolumne

Javascript wird die Betriebsumgebung vorgestellt, um einen guten Start zu ermöglichen.

Lösung der JavaScript-Laufzeitumgebung

Verwandte kostenlose Lernempfehlungen: Javascript (Video)

Artikelverzeichnis

  • Dateiversionsbeschreibung
  • JavaScript-Laufzeitumgebung
    • Eingelegte Webseite
    • JavaScript-Dateiskript: .js
    • JavaScript-Druck
      • Druckmethode
      • Druckebene
    • Schreibcode IDE-Plattform: Notepad + Browser
      • Debugging-Code
    • Schreibcode IDE-Plattform: Visual Studio Code + Node. js
      • Hauptprogramm
      • Debugging-Code
    • Schreibcode IDE-Plattform: Linux
    • Chinesische Unterstützung

Dateiversion.

Zhong Xin0.32018.05.05 JS-Kompilierungsumgebung hinzufügenZhongxin0.42018.05.11JS-Funktion hinzufügenZhongxin0.52018.05.14 Destrukturierungsaufgabe hinzufügenZhong Xin + Zhongxin
Version Veröffentlichung Datum Überarbeitetes Kapitel Autor
0.1 2018.05.01 Schreibentwurf Zhong
0.8 2018.06.09 Zeitdefinition hinzufügen

JavaScript-Laufumgebung

Inlay-Webseite

Inlay-JavaScript in ein HTML, Inlay-Tag
JsTest.html

	
		<title> ZX test title </title>
		<script>

		function js_test_html(){  
			alert(&#39;alert ZX test&#39;);
			console.log(&#39;console ZX test&#39;);
			document.write(&#39;document ZX test\n&#39;);
		}  

		js_test_html();

		</script>
	
	
	

Der Anzeigeeffekt ist wie in der folgenden Abbildung dargestellt.
Lösung der JavaScript-Laufzeitumgebung
Lösung der JavaScript-Laufzeitumgebung

JavaScript-Dateiskript: .js

将js代码写入一个js文件中,然后通过html调用这个脚本。
function js_main(){ 
alert('main alert ZX test');
		console.log('main console ZX test');
		document.write('main document ZX test');
} 

js_main();

Integrieren Sie die js-Datei in die HTML-Datei

	
		<title> ZX test title </title>
		<script> </script>
	
	
	

Der Anzeigeeffekt ist wie unten gezeigt.

Lösung der JavaScript-Laufzeitumgebung
Lösung der JavaScript-Laufzeitumgebung

JavaScript-Drucken

JavaScript-Debugging-Drucken kann durch Drücken von F12 im Browser aufgerufen werden, und der Code wird mithilfe des Konsolenobjekts implementiert.

Druckmethoden

Es gibt viele Möglichkeiten, JavaScript zu debuggen und zu drucken, einschließlich des direkten Druckens von Zahlen, Arrays, Zeichenfolgen und sogar Strukturen und Klassen.
Quellcode

function js_console_test(){ 
	
	var strtest = "string";
	var chartest = 'A';
	var istest = 3;
	var fpai = 3.14159;
	var arraytest = ["zx",6.626E-34,'B',8];
	
	var stTest = {
		siindex: 1,
		strname: "ZX Test",
		sinum: 2.71828,
		
		functest: function stfunc(){ return true;}
	};

	console.log(strtest);
	console.log(chartest);
	console.log(istest);
	console.log(fpai);
	console.log(arraytest);
	console.log(stTest);
}

Ausführungsergebnisse
Lösung der JavaScript-Laufzeitumgebung

Druckebene

Das Konsolenobjekt verfügt über Druckebenen zum Debuggen des Druckens, die verschiedenen Debugumgebungen entsprechen.

Quellcode

function js_console_level(){ 
	
	console.log("This is log level.");
	console.debug("This is debug level.");
	console.info("This is info level.");
	console.warn("This is warn level.");
	console.error("This is error level.");
}

Ausführungsergebnisse
Lösung der JavaScript-Laufzeitumgebung

Klicken Sie auf die Stelle rechts, um zu den Code-Debugging-Optionen zu springen
Lösung der JavaScript-Laufzeitumgebung

Code-Schreib-IDE-Plattform: Notepad + Browser

Solange der Browser installiert ist, können Sie kann Notepad Write js-Code verwenden. Damit js jedoch ausgeführt werden kann, müssen Sie js in die HTML-Datei einbetten. Wenn der Browser die HTML-Datei öffnet, können Sie das js-Skript ausführen.

Debug-Code

Drücken Sie F12 im Browser, um die Debugging-Umgebung aufzurufen. Sie können Haltepunkte für den Quellcode setzen, ein Einzelschritt-Debugging durchführen und die Ausgabe anzeigen. Wie unten gezeigt.


Lösung der JavaScript-LaufzeitumgebungDebug-Code am Edge, wie im Bild unten gezeigt


Lösung der JavaScript-Laufzeitumgebung
Lösung der JavaScript-LaufzeitumgebungCode-IDE-Plattform schreiben: Visual Studio Code + Node.js

Die Verwendung von Visual Studio Code ist praktisch und wird mit der Node.js-Entwicklung kombiniert. Sie müssen den Debugging-Code des Browsers nicht aufrufen.

Im Gegensatz zu Browsern können JS-Dateien unabhängig ausgeführt werden, ohne in HTML eingebettet zu sein, und können über Node.js geladen und ausgeführt werden.


Visual Studio Code-Download: https://code.visualstudio.com/

Node.js-Download: https://nodejs.org/en/


Öffnen Sie nach der Installation den angegebenen Ordner, wie im Bild unten gezeigt


Lösung der JavaScript-LaufzeitumgebungWählen Sie LF als Codierungsformat aus, das mit Linux übereinstimmt, wie in der Abbildung unten gezeigt.


Lösung der JavaScript-LaufzeitumgebungHauptprogramm

Konfigurieren Sie nach der Installation von Node.js die Visual Studio Code-Umgebung zum Debuggen des JS-Codes. Wie unten gezeigt.


Lösung der JavaScript-LaufzeitumgebungDebugging-Code

Die Steuerung der Konfiguration des Debugging-Codes wird durch die Datei launch.json gesteuert, und die Debugging-Optionen können unter Konfigurationsoptionen hinzufügen konfiguriert werden. Die Datei launch.json wird im Ordner .vscode des Projektverzeichnisses abgelegt, wie in der folgenden Abbildung dargestellt.


Lösung der JavaScript-LaufzeitumgebungDie Bearbeitungsoberfläche kann Punkte für das Debuggen unterbrechen und die Ausgabeinformationen können in der Debugging-Konsole angezeigt werden. Mit der Variablenleiste können Sie js-Variablen jederzeit beobachten. Wie unten gezeigt.


Lösung der JavaScript-LaufzeitumgebungCode schreiben IDE-Plattform: Linux

Unter Linux wird JavaScript-Debugging unterstützt, NodeJS muss installiert sein Es werden verstümmelte Zeichen angezeigt, wie in der Abbildung unten dargestellt.

Das obige ist der detaillierte Inhalt vonLösung der JavaScript-Laufzeitumgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel:Wie schreibe ich in ReactNächster Artikel:Wie schreibe ich in React