>  기사  >  웹 프론트엔드  >  자바스크립트 학습 경험

자바스크립트 학습 경험

一个新手
一个新手원래의
2017-09-06 10:43:163486검색

1. 서문:

얼마 전에 Little Red Book(JavaScript를 사용한 고급 프로그래밍)을 읽었지만 읽을 계획이 없었고 자세히 메모하지도 않았습니다. 읽고 난 후 약간의 느낌이 들었습니다. 뭔가 허전하고 뭔가 잘못된 것 같은 느낌이 들었습니다. 와, 프론트엔드 JS 개발자도 프론트엔드를 어떻게 하는지 배우지 못하는 것 같아요. 백엔드가 js를 배웠으니 죽을지 말지 결정하세요.

그래서 나는 그것을 읽고, 다시 읽고, 내 인상을 높이고 나중에 참고하고 토론할 수 있도록 독서 노트를 만들기 위해 그것에 대해 블로그에 쓰기로 결정했습니다.

주의 사항: 노트의 단어는 주관적이므로 지식을 강조하여 기록해야 합니다.

2. JavaScript의 역사

  • 원산지: 지난 세기말인 1995년에 넷스케이프가 네비게이터 브라우저를 출시했다고 합니다. 회사는 정적 HTML뿐만 아니라 동적 효과도 추구하고 있으며, 특히 양식 입력이 적법한지 여부를 백엔드에서 확인할 때까지 기다리지 마십시오. 몇 분씩 기다리던 우리는 이제 일부 웹 사이트가 깨졌다고 불평하면서 끄고 싶지 않은 채 10초를 기다립니다.

  • 실습: 목표가 있으면 실행하세요. Netscape에는 많은 유명인이 있습니다. Brendan Eich는 처음 나왔을 때 JavaScript를 10일 만에 만들었습니다. .인기스타를 따라잡기 위해 자바 인기도를 자바스크립트로 바꾸었기 때문에 사실상 서로 아무런 관련이 없습니다.

  • 경쟁: Netscape에 js가 있는 것을 보고 Microsoft는 그것이 좋지 않다고 느꼈고 내 IE가 죽을 것이라고 느꼈습니다. 동시에 js의 미래가 밝다고 느꼈기 때문에 JavaScript를 만들었습니다. JScript라는 구현입니다.

  • 표준: Netscape와 Microsoft 간의 경쟁으로 인해 등장한 JS는 업계의 우려로 인해 버전 불일치로 이어졌습니다. ECMA 조직은 이를 위해 나섰고, 마침내 1997년에 ECMAScript를 표준으로 내놓았습니다. 여기서 ECMAscript와 JavaScript는 같은 것을 표현한다고 볼 수 있습니다

3. ECMAScript

ECMAScript(이하 ES)는 ECMA-262에 의해 공식화되었으며 ES는 주로 언어의 문법적 기반이며 표준입니다. ES와 JS를 굳이 구분하자면 ES가 기본 언어 표준이고, JS는 이 표준을 기반으로 구현된 언어입니다.

ES 버전 정보: ES는 1997년 공식화 된 이후 많은 버전을 거쳤습니다. 이전 버전은 모두 사소한 수정이었습니다. 중요 버전:

  • ES3, 세 번째 버전은 표준

  • 2009에 대한 최초의 실제 수정입니다. ES5는 현재 모든 주요 인기 브라우저에서 지원됩니다.

  • 2015 ES6 게시도 인기를 얻고 있습니다.

  • 2015년 이후 매년 버전이 출시될 예정이지만, 브라우저에서는 아직 이를 지원하지 않습니다.

4. JavaScript 구현

javascript는 세 부분으로 구성됩니다.

1 ECMAScript: 핵심 부분은 js의 문법적 기초이며 나중에 문법을 계속 작성할 것입니다.
2.DOM(Text Object Model): HTML 문서를 작동하기 위한 애플리케이션 프로그래밍 인터페이스입니다. DOM 정보:

  • DOM의 출현으로 페이지를 다시 로드하지 않고도 웹 페이지의 모양과 내용을 변경할 수 있는 동적 HTML(DHTML)을 구현할 수 있게 되었습니다.

  • DOM으로 인한 문제: 주로 호환성 측면에서 Netscape와 Microsoft는 각자의 의견을 갖고 있어 브라우저 비호환성을 초래합니다. 이 문제는 해결되지 않았습니다. W3C는 DOM

  • DOM 레벨: DOM1, DOM2, DOM3을 계획하기 시작했습니다. 이는 DOM이 지속적으로 개선되고 있음을 의미합니다.

3.BOM(브라우저 모델) : BOM을 사용하여 브라우저에 표시되는 페이지 이외의 부분을 제어합니다.

5. JavaScript 사용법 :

(1) 태그 속성 : 웹 페이지에서 js를 사용하는 핵심은 6가지 속성이 있는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그: <h3><ol class=" list-paddingleft-2"> <code>3f1c4e4b6b16bbbd69b2ee476dc4f83a标签,其有6个属性:
  1. async:可选,表示立即下载脚本,但不妨碍页面中的其他操作。也就是异步脚本,只适用于外部脚本文件。

  2. defer:可选,表示脚本可以延迟到文档完全被解析和显示后在执行。也就是延迟脚本,只适合与外部脚本文件。

  3. src:可选,表示包含要执行代码的外部文件。

  4. type:默认text/Javascript。默认执行js,可以不用指定。

  5. charset:可选,表示通过src属性指定代码的字符集,大多数浏览器会忽略它的值,很少人使用。

  6. language:已废弃
    常用就前4个

(2)使用:使用5b8b77bb7a3607db25abf34210579d17

async: 선택 사항, 스크립트를 즉시 다운로드하지만 다른 작업을 방해하지 않음을 나타냄 페이지에서. 즉, 비동기 스크립트는 외부 스크립트 파일에만 적용됩니다.


defer: 선택 사항이며 문서가 완전히 구문 분석되고 표시될 때까지 스크립트가 지연될 수 있음을 나타냅니다. 즉, 지연된 스크립트는 외부 스크립트 파일에만 적합합니다.

src: 선택 사항이며 실행할 코드가 포함된 외부 파일을 나타냅니다.

유형: 기본 텍스트/Javascript. Node.js는 기본적으로 실행되므로 지정할 필요가 없습니다.
  • charset: 선택 사항이며 src 속성을 통해 지정된 코드의 문자 집합을 나타냅니다. 대부분의 브라우저는 해당 값을 무시하며 이를 사용하는 사람은 거의 없습니다. 🎜🎜🎜🎜언어: Obsolete🎜처음 4개가 일반적으로 사용됩니다🎜🎜🎜(2) 사용법: 5b8b77bb7a3607db25abf34210579d17 사용: 두 가지 작업이 있습니다: 🎜🎜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的包含文件的语法相同。

特别注意:3f1c4e4b6b16bbbd69b2ee476dc4f83a在使用了src属性后,不要在内嵌代码,此时的内嵌的代码不会被执行。只会执行src对应文件的代码。

(3)位置:关于3f1c4e4b6b16bbbd69b2ee476dc4f83a 在HTML文档中的位置:

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


<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的情况下你的网页怎么友好一点交互,不会搞得太难看,太尴尬。
使用2b0b25ff593c5b6c03403dd6234ffb2c 标签,应用场景:

  • 浏览器不支持JavaScript

  • 浏览器支持脚本,但脚本被禁止了

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


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

위 내용은 자바스크립트 학습 경험의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.