検索
ホームページウェブフロントエンドjsチュートリアルNode.js 簡単なページ出力実装 code_javascript スキル

インストールプロセスには入りません。成功した場合は、node コマンドを使用できます。 Node.js のデバッグは非常に便利です。各バックエンド言語には、ダーク コンソール グループに出力する実用的なコマンドがあります。 node.js は、FF のセット、つまりコンソール オブジェクトとそのメソッドに従います。まず、次の内容を含む example.js ファイルを作成し、それをコンソールで開きます。

コードをコピー コードは次のとおりです。

console.log("hello node.js ")
for(var i in console){
console.log(i " " console[i])
}
node example.js。

node.js のデバッグには、alert を使用しないでください。これはブラウザーが提供するグローバル メソッドです。エラーが報告されないのはおかしいでしょう。
出力結果は次のとおりです:
コードをコピーします コードは次のとおりです:

var log = function () {
process.stdout.write(format.apply(this, argument) 'n');
}
var info = function () {
process.stdout .write(format.apply (this, argument) 'n');
}
var warn = function () {
writeError(format.apply(this, argument) }
var error = function () {
writeError(format.apply(this, argument) 'n');
}
var dir = function (object) {
var util = require('util' );
process.stdout.write(util.inspect(object) 'n');
}
var time = function (label) {
times[label] = Date.now() ;
}
var timeEnd = function (label) {
var period = Date.now() - 回
exports.log('未定義: NaNms ', label, period) ;
}
var trace = function (label) {
//
// が公開されたら、おそらく TODO は V8 のデバッグ オブジェクトを使用してより適切に実行できるでしょう。 >var err = 新しいエラー ;
err.name = ラベル ||
Error.captureStackTrace(err, argument.callee); error(err.stack) ;
}
varassert = function (expression) {
if (!expression) {
var arr = Array.prototype.slice.call(arguments, 1);
require('assert').ok(false, format.apply(this, arr));
}
}


これらの関数を通じて、そのノードを大まかに理解します。 .js はグローバル スコープにあります。 require や process など、追加されたもの。ただし、一定範囲の私的オブジェクトである可能性があるため、恣意的に言うことはできません。ただし、これらのグローバル オブジェクトを理解し、これらのオブジェクトから他のオブジェクトを理解することは、node.js の生態学的構造を理解するのに非常に役立ちます。フロントエンドでは、ブラウザがアップグレードされるたびに、ウィンドウ オブジェクトとその要素ノードを走査して追加されたメソッドと属性を確認し、ドキュメントを確認します。これらの変更ログからすべての詳細を知ることは不可能です。他の人よりも詳しく知るためには、自分で確認する必要があります。さて、node.js のグローバル オブジェクトを見つけてみましょう。
node.js のドキュメントには、次のグローバル オブジェクトがあることが記載されています:
global, process, require,__filename,__dirname, module
しかし、なぜ console.log を直接使用できるのでしょうか?経験上、コンソールは、alert や window.alert と同様に、グローバル オブジェクトのメンバーでなければなりません。さて、名前 global をトラバースして、非常に横暴なオブジェクトを取得しましょう




コードをコピーします
コードは次のとおりです: for(var i in global){ console.log("var " i " = " global[i])
}


結果は次のようになります:



コードをコピー
コードは次のとおりです: var global = [オブジェクト グローバル] var process = [オブジェクト EventEmitter ]
var GLOBAL = [オブジェクト グローバル]
var root = [オブジェクト グローバル]
var Buffer = function Buffer(subject, encoding, offset) {
//長すぎるため、
を省略します }
var setTimeout = function () {
var t = NativeModule.require('timers');
return t.setTimeout.apply(this, argument); >}
var setInterval = function () {
var t = NativeModule.require('timers');
return t.setInterval.apply(this, argument); clearTimeout = function () {
var t = NativeModule.require('timers');
return t.clearTimeout.apply(this, argument);
var clearInterval = function () {
var t = NativeModule .require('timers');
return t.clearInterval.apply(this, argument);
}
var console = [オブジェクト オブジェクト]


グローバルには、ブラウザウィンドウと同様に、それ自体を指す同じ名前のメンバーがあることがわかります。ウィンドウ === ウィンドウ.ウィンドウ、グローバル === グローバル.グローバル。ただし、node.js は初期の段階では適切に設計されておらず、別の冗長な GLOBAL メンバーが作成されました。
console.log(global === global.global)//true
console.log(global === global.GLOBAL)//true
次にモジュール オブジェクトをスキャンします:
コードをコピー コードは次のとおりです:

for(var i in module){
console。 log("var " i " = " module[i])
}

結果は次のようになります:
コードをコピー コードは次のとおりです:

var id = .
var exports = [object Object]
varparent = null
var filename = /home/cheng19840218/node/example.js
var ロード = false
var exited = false
var Children =
var paths = /home/cheng19840218/node/node_modules,/home/cheng19840218 /node_modules,/home/node_modules,/node_modules
varload = function (filename) {
//長すぎるため省略
}
var _compile = function (content, filename) {
//長すぎるので省略します
}

有名なエクスポートがここで提供されていることがわかり、__filename はおそらく filename への参照です。ざっと読んでみると、たくさんの興味深いことがわかります。しかし、秘密がすぐに暴露されるとは思わないでください。まだ通過できない属性がたくさんあります。たとえば、上記のグローバル オブジェクトを調べましたが、数えることができるメンバーは少数です。ecma262v5 の新しいメソッドを使用して確認できます。
console.log(Object.getOwnPropertyNames(global))
結果は次のとおりです。
コードをコピー コードは次のとおりです:

[ 'clearInterval',
'TypeError'、
'decodeURI'、
'Buffer'、
'parseFloat'、
'Number'、
'URIError'、
'encodeURIComponent'、
'RangeError'、
'ReferenceError'、
'RegExp'、
'Array'、
'isNaN'、
'setTimeout'、
'console'、
'日付'、
' 無限大'、
'ブール'、
'エラー'、
'ルート'、
'NaN'、
'文字列'、
' Function'、
'Math '、
'未定義'、
'encodeURI'、
'escape'、
'unescape'、
'process'、
'decodeURIComponent '、
'EvalError' 、
'clearTimeout'、
'GLOBAL'、
'setInterval'、
'SyntaxError'、
'Object'、
'eval' ,
'global',
'parseInt',
'JSON',
'isFinite' ]

多くの人は、node.js を学習し、すぐにドキュメントを読みます。 Node.js 自体が依存していることはほとんど知られていません。V8 エンジンには、ecma262v5 によってもたらされた新しいメソッドやオブジェクト、Firefox を模倣する構文など、学ぶべきことがたくさんあります。
__defineGetter__
__defineSetter__
__lookupGetter__
__lookupSetter__
set
get
__proto__
ただし、set や get などの最新のブラウザー (IE9 など) ではこれをサポートすることはお勧めしません。以下の開発者ツールで試すことができます:
コードをコピー コードは次のとおりです:

var a = {
get 最新 () {
if (this.log.length > 0) {
return this.log[this.log.length - 1]; }
else {
return null ;
}
},
log: []
}
a.log[0] = "a"; .log[1] = "b";
console.log(a.latest)


基本的に、node.js には互換性の問題はありません (初期のノードからプレイしていない場合) .js)、非常に多くのネイティブ オブジェクトが追加されており、node.js に付属のライブラリと組み合わせて、各モジュールがさまざまな API を提供しています。それだけでは不十分な場合は、github に何千ものプラグインがあります。これは、バックエンド プログラミングに挑戦したい JSers にとって非常に魅力的です。バックエンドにはデータベース操作が含まれるのではないかと言う人もいるかもしれません。これは、フロントエンドの DOM 互換性に比べれば何でもありません。他のフォルダーやファイルの操作については、特別な配列操作として扱ってください。だからあなたは怒られるかもしれません!
さて、本題に入りましょう。 Node.js はもともと http サーバーであり、フロントエンドと対話するため、リクエストとレスポンスの 2 つのオブジェクトが不可欠です。フロントエンドがいつリクエストを送信するかがわからないため、リクエストとレスポンスは明らかに非同期です。また、ログ、データベースの読み取りと書き込み、その他の操作も行う必要があります。 。したがって、JavaScript の場合、これはコールバック関数を使用するのが最適です。では、誰がこのコールバックを受け入れるのでしょうか?サーバーオブジェクトです!


コードをコピー コードは次のとおりです:

var http = require("http");
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/plain) "});
response.write("Hello node.js");
response.end();
}).listen(8888);

ノード。 js には特別な require があり、他のモジュールからオブジェクトを同期的に読み込むために使用されます。これは、他の言語の require および import に似ています。フロントエンドと違ってレイヤーごとに同期できると良いですね。次に、関数を使用してサーバー オブジェクトをインスタンス化し、ポート 8888 をリッスンします。これは、node.js 公式 Web サイトにあるオリジナルの例ですが、誰もがそれを悪く書いています。しかし、そのようなプログラムは実際には役に立ちません。アドレス バーに URL を入力するときは、少なくとも完全なページを私に返さなければなりません。
このためには、まずモジュール化する必要があります。モジュール化はファイルに基づいて行われます。example.js の名前をserver.js に変更し、内部のコンテンツをモジュールに変更します。 node.js ファイルの場合、ファイル内のコンテンツは実際には閉じられた環境で実行されます。他のモジュールと共有したい場合は、exports オブジェクトにバインドする必要があります。
コードをコピー コードは次のとおりです。

var http = require("http") ;
exports.start = function(){
http.createServer(function(request, response) {
console.log("リクエストを受信しました...");
response.writeHead(200) , {" Content-Type": "text/plain"});
response.write("Hello node.js");
response.end()
}); ;
console.log("server start...");
}

次に、入り口として別のindex.jsを構築します(index.jsとserver.jsが配置されています)同じディレクトリ内)。
コードをコピーします コードは次のとおりです。

var server = require("./server ");
server.start();

次に、index.html ページを作成します。
コードをコピーします コードは次のとおりです。



index



>

これはホームページです



このページが出てきてユーザーに返します。今回はfsモジュール方式を使用します。



コードをコピー
コードは次のとおりです。 var http = require("http") ; var fs = require('fs');
exports.start = function(){
http.createServer(function(request, response) {
fs.readFile('./index) .html' , 'utf-8',function (err, data) {//Read content
if (err) throw err;
response.writeHead(200, {"Content-Type": "text/ html" }); //ここに注意してください
response.write(data);
response.end();
});
}).listen(8888);
コンソール。 log( "server start...");
}


それでは、再起動してアドレスを再度入力すると、完全なページが表示されます。
しかし、HTML 構造層に加えて、ページには JavaScript と CSS も含まれています。次に、現在のディレクトリに javascripts フォルダーを作成し、その中にindex.js を作成します。内容は次のとおりです。



コード
をコピーします。 コードは次のとおりです。 window.onload = function(){ var p = document.createElement("p");
p.innerHTML = "This動的に追加されます"
document .body.appendChild(p);
}


別のstylesディレクトリを作成し、その中にindex.cssを作成します。内容は次のとおりです:



コードをコピーします
コードは次のとおりです: html,body{ background: #3671A5 ;
height: 100%
}


次に、index.html に次の 2 つのファイルを導入します。



コードをコピーします
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptのデータ型:ブラウザとNodejsに違いはありますか?JavaScriptのデータ型:ブラウザとNodejsに違いはありますか?May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1)グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2)バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3)パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント://および / * *を使用するためのガイドJavaScriptコメント://および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments:シングルライン(//)およびマルチライン(//)

Python vs. JavaScript:開発者の比較分析Python vs. JavaScript:開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript:ジョブに適したツールを選択するPython vs. JavaScript:ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1)データサイエンスおよび自動化タスクのPythonを選択します。 2)フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript:それぞれの強みを理解するPythonとJavaScript:それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア:CまたはCの上に構築されていますか?JavaScriptのコア:CまたはCの上に構築されていますか?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション:フロントエンドからバックエンドまでJavaScriptアプリケーション:フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例:Webページテキストのコンテンツを変更します。 2。バックエンドの例:node.jsサーバーを作成します。

Python vs. Javascript:どの言語を学ぶべきですか?Python vs. Javascript:どの言語を学ぶべきですか?May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1)キャリア開発:Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2)学習曲線:Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3)エコシステム:Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター