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

JavaScriptの学習経験

一个新手

リリース： 2017-09-06 10:43:16

オリジナル

3489 人が閲覧しました

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> タグ。これには 6 つの属性があります。

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

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

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

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

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

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

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

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

最初の 4 つは一般的に使用されます
🎜(2) 使用法: <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>在使用了src属性后，不要在内嵌代码，此时的内嵌的代码不会被执行。只会执行src对应文件的代码。

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

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

<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> 标签，应用场景：

浏览器不支持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 サイトの他の関連記事を参照してください。