JavaScript入门①-基础知识筑基

2022/12/1 1:24:01

编程Tag： javascript 代码 浏览器 基础知识 编程语言

本文主要是介绍JavaScript入门①-基础知识筑基，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

01、JavaScript基础知识

JavaScript（缩写：JS）是一种具有面向对象能力的、解释型的程序语言，基于对象和事件驱动，具有相对安全性的客户端脚本语言。JavaScript是一门完备的 动态编程语言，当应用于 HTML 文档时，可为网站提供动态交互特性，是前端开发最主要、正式的编程语言。

ECMAScript 是由 ECMA 国际标准化组织 制定的一套脚本语言的标准化规范，JavaScript算是他的实现，作为基础语法规范，构成了JavaScript的核心。再加收浏览器提供的DOM（HTML网页内容）操作API、浏览器BOM操作API，共同组成了 JavaScript。

1.1、语法规范

JS代码以行为单位，（半角）分号;结尾。

注释：//

  • 单行注释：//开头。
  • 多行注释：/*多行注释 */（同css）

代码风格：

  • 区分大小写，字母、数字、下划线组成，不能数字开头，不能是关键字。
  • 小驼峰命名（推荐）：initialColor

关键字： 内置的关键词：如var、do、else、enum、eval、false、for、if、void、function、switch...

语句块：花括号 { 代码块 }

1.2、引用方式

  • 行内JS：元素标签内部的JS代码。
  • 内部JS：定义在<script>标签里的JS代码，可以放到head中、body中、body后，推荐body后，先加载html再执行JS。
  • 外部JS（推荐）：单独的JS文件，通过script标签引入，src属性指定JS文件地址，此时标签中写的代码就无效了。
  • 动态加载：通过DOM的API动态加载JS脚本资源，用JS创建<script>标签并引入资源。
<script>属性 描述 值/备注
src 外部资源地址，与嵌入脚本代码不可同时使用 <script src="js1.js" async></script>
type 定义脚本语言类型，可空，默认为JavaScript类型 支持的MIME类型包括text/javascript、 text/ecmascript、 application/javascript 和application/ecmascript
async 异步并行加载，只针对外部JS资源 多个async脚本加载完成的顺序不确定
defer 等HTML解析完成再执行JS，在DOMContentLoaded之前执行，只针对外部JS资源 多个脚本资源顺序加载

脚本加载策略：

  • 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
  • 如果脚本需要等待页面解析，且依赖于其它脚本，应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

 
  <body>
  <div>
  <h1>基础语法</h1>
  <input type="button" value="行内JS" onclick="alert('Hello world!');"/>
  <input type="button" value="外部JS调用" onclick="hello();"/>
  </div><hr/>
  </body>
  <script>
  console.log("内部js：网页加载完成！");
  </script>
  <!-- 引入外部js文件，设置了src属性，script内部的代码就无效了 -->
  <script src="../tstudy/js/js1.js" type="text/javascript" async></script>

02、变量申明var/let/const

变量，就是一个用于存放数值的容器，比如年龄=20，“年龄”就是变量，“20”是他的树值。JS是一种弱类型语言，不需要指明数据类型，用var或 let关键字申明即可。

申明方式：

  • 申明并赋值，1步完成：var str="hello world";
  • 先申明，再赋值，2步完成。var str1; str1="hello world"; // 默认值为undefined

动态数据类型：JavaScript 是一种“动态类型语言”，意味着一个变量可以被赋值为各种类型数据值，通过typeof判断数据类型。


 
  let age;
  console.log(age); //undefined
  age =20;
  console.log(typeof age); //number
  age='年芳二十';
  console.log(typeof age); //string
     (IE11 ES6)  (IE11 ES6)
说明 变量申明 变量申明 只读常量申明：申明时必须初始化值，不可更改
作用域 全局（整个文档）或整个函数体内 块级作用域{}包含的区域 块级作用域{}
命名规范 推荐：小驼峰命名 同var 推荐：全大写+下划线，const MAX_SPEED
默认值 undefined undefined 必须赋值
变量提升 提升所有var申明的变量，可以先使用后申明（不推荐），把var变量申明提升到代码头部，注意不包括赋值 不会提升，顺序执行：必须先申明，后使用。存在暂时性死区
let foo=(foo+55)第二个foo未申明报错		 不会提升，顺序执行：必须先申明，后使用。
全局属性 在全局环境时，会成为顶级对象的属性（不可配置属性），作为全局变量存在。
var age=3; //this.age;window.age		 无 无
       
重复申明 可以重复申明，覆盖前面的，有点太随意了 不可重复申明，作用域内重复申明会报错
● 包括var、const申明的变量
● 子块可重新申明let，不同的作用域了
● 子块中用var变量会重复，var会提升		 不可重复申明，会提示错误，同let
申明多个 支持：var s1=1,st=2; 支持：let s1,s2=2; 支持：const s1=1,s2=2;
性能 一般 一般 编译器会做常量替换优化，提升代码效率
总结 有点粗犷，不推荐 更严谨，推荐使用 不仅更严谨，性能还好，优先推荐！！！

暂时性死区：由于没有了变量提升，及块级作用域，let、const变量只能在申明后才能用，在这之前不可用，称为“暂时性死区”。

标签：JavaScript,基础知识,浏览器,编程语言,代码, 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。



这篇关于JavaScript入门①-基础知识筑基的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程