JavaScriptの学習経験-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptの学習経験

一个新手

Sep 06, 2017 am 10:43 AM

javascriptjs勉強

1. 前書き:

私は少し前に Little Red Book (Advanced Programming with JavaScript) を読みましたが、読むつもりはなく、詳細なメモも取っていませんでした。何もかもが空っぽで、何かが間違っていると感じました。うわー、フロントエンドの JS 開発者ですらフロントエンドの使い方を学べないことにイライラしています。バックエンドは js を学習しました。死ぬかどうかはあなたが決めます。

そこで、私はそれを読んで、もう一度読んで、印象を高め、将来の参照と議論のために読書メモを作成するために、それについてブログに書くことにしました。

暖かいリマインダー: メモ内の言葉は主観的なものであるため、知識は強調して記録する必要があります。

2. JavaScript の歴史

起源: 前世紀末の 1995 年に Netscape が Navigator ブラウザを起動したと言われています。同社は、静的な HTML だけでなく、特にフォーム入力が正当であるかどうかをバックエンドが知るまでフォームの検証を処理できるようにしたいと考えています。時代は一度に数分待っていましたが、今ではウェブサイトが壊れていると文句を言いながら、オフにすることもせずに 10 秒ほど待っています。
実践: 目標があるなら、それを実行してください。Brendan Eich は 10 日間で JavaScript を作成しました (最初に公開されたときは LiveScript と呼ばれていました)。人気のスターに追いつくために Java の人気は JavaScript に変更されたため、実際には両者は何の関係もありません。
競合: Netscape が js を持っているのを見て、Microsoft はこれではダメだと感じ、私の IE は殺されるだろうと感じました。同時に、js には明るい未来があるとも感じたので、JavaScript を作成しました。 JScriptと呼ばれる実装。
標準: Netscape と Microsoft の間の競争から生まれた js はバージョンの不一致を引き起こしており、業界の懸念により JavaScript の標準化が議題に上っています。 ECMA 組織はこれを実現し、1997 年に標準として ECMAScript を考案しました。ここでは、ECMAscript と JavaScript は同じものを表現していると見ることができます

3. ECMAScript

ECMAScript (以下、ES) は、主に言語の文法的基礎であり、標準です。 ES と JS を区別する場合、ES は基本的な言語規格であり、JS はこの規格に基づいて実装された言語です。

ES のバージョンについて: ES は 1997 年に策定されて以来、多くのバージョンを経てきました。以前のバージョンはすべて軽微な変更でした。重要なバージョン: 3 番目のバージョンである

ES3 は、標準に対する最初の実際の変更です

2009 ES5 は現在、すべての主要な人気ブラウザでサポートされています

2015 ES6 の公開も一般的になってきています。

2015年以降は毎年バージョンがリリースされますが、ブラウザはまだ対応できておりません。

4. JavaScript の実装

javascript は 3 つの部分で構成されています:

1. ECMAScript: コア部分は js の文法の基礎であり、その文法については後ほど書き続けます。

2.DOM (Text Object Model): HTML ドキュメントを操作するためのアプリケーションプログラミングインターフェイス。 DOM について:

DOM の出現により、ページをリロードせずに Web ページの外観とコンテンツを変更できる動的 HTML (DHTML) の実装が可能になりました。
DOM によって引き起こされる問題: 主に互換性に関して、Netscape と Microsoft は独自の意見を持っており、その結果ブラウザーの非互換性が生じます。この問題はまだ解決されていません。W3C は、DOM レベル: DOM1、DOM2、DOM3 の計画を開始しました。これは、DOM が常に改良されていることを意味します。
3.BOM（ブラウザモデル）：ブラウザで表示するページ以外の部分をBOMで制御します
(1)タグ属性：Webページでjsを使うポイントはを使うことです><script>< /code> タグ。これには 6 つの属性があります。 </script>

async: オプション。スクリプトをすぐにダウンロードすることを示しますが、スクリプト上の他の操作を妨げません。ページ。つまり、非同期スクリプトは外部スクリプトファイルにのみ適用されます。

defer: オプション。ドキュメントが完全に解析されて表示されるまでスクリプトを遅延できることを示します。つまり、遅延スクリプトは外部スクリプトファイルにのみ適しています。

`<script></script>`标签，其有6个属性：

async：可选，表示立即下载脚本，但不妨碍页面中的其他操作。也就是异步脚本，只适用于外部脚本文件。
defer：可选，表示脚本可以延迟到文档完全被解析和显示后在执行。也就是延迟脚本，只适合与外部脚本文件。
src：可选，表示包含要执行代码的外部文件。
type：默认text/Javascript。默认执行js，可以不用指定。
charset：可选，表示通过src属性指定代码的字符集，大多数浏览器会忽略它的值，很少人使用。
language：已废弃
常用就前4个

(2)使用：使用`<script></script>`

src: オプション。実行されるコードを含む外部ファイルを示します。

タイプ: デフォルトのテキスト/JavaScript。 js はデフォルトで実行されるため、指定する必要はありません。

charset: src 属性で指定されたコードの文字セットを示すオプション。ほとんどのブラウザーはその値を無視し、使用する人はほとんどいません。

最初の 4 つは一般的に使用されます
🎜(2) 使用法: <script></script> を使用します: 2 つの操作があります: 🎜🎜1.タグ内にコードを記述すること、つまり HTML にコードを埋め込むことはお勧めできません。例: 🎜🎜🎜🎜
```
<script>
 function helloWorld(){
    alert("hello world!");
 }
 helloWorld();</script>
```
🎜2. src 属性を通じて外部ファイルを導入する別の方法。 🎜🎜🎜🎜
```
<script src="js/hello.js"></script>
```
🎜 できる限り外部参照 js ファイルを使用する利点: 🎜🎜🎜🎜 保守性: HTML に埋め込まれたコードは保守が難しく、可読性が低いため、別の js ファイルで保守するのがはるかに簡単になります。 🎜
可缓存：浏览器可以根据具体的设置缓存链接的所用外部js文件
适应未来：通过外部文件来包含js无须对XHML的特别处理和注释hack。HTML和XHTML的包含文件的语法相同。

特别注意：<script></script>在使用了src属性后，不要在内嵌代码，此时的内嵌的代码不会被执行。只会执行src对应文件的代码。

(3)位置：关于`<script></script>` 在HTML文档中的位置：

在HTML4中规定<script></script> 标签可以放在和标签内。
由于浏览器解析HTML文档是由上到下，且在遇到<script></script> 标签后会先解析和执行js代码，并中断HTML的加载，所以放在标签中是会使得HTML文档可视内容中断加载。
画重点:所以<script></script> 标签的位置首考虑放在标签底部。例如：

<html>
    <head>
       <title>hello js</title>
    </head>
    <body>
        <p>hello js!</p>
        <!-- js文件放在body底部 -->
        <script src="example.js"></script>
    </body></html>

六、JavaScript的平稳退化方案

什么是平稳退化：就是有些浏览器不支持js，当然现在几乎没有浏览器这么菜啦，还有就是js功能被禁用。这时就需要没有js的情况下你的网页怎么友好一点交互，不会搞得太难看，太尴尬。
使用<noscript></noscript> 标签，应用场景：

浏览器不支持JavaScript
浏览器支持脚本，但脚本被禁止了

例子：当浏览器不支持js或禁用js时就会显示出noscript标签中的内容，若浏览器能执行js则noscript就被隐藏。

<html>
    <head>
        <script src="example.js"></script>
    </head>
    <body>
        <noscript>
         <p>本页面需要浏览器支持JavaScript</p>
        </noscript>
    </body></html>

以上がJavaScriptの学習経験の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。