首页 > 其他分享 >第1节 js相关概念

第1节 js相关概念

时间:2023-01-02 19:22:38浏览次数:28  
标签:xxx 浏览器 代码 JavaScript js 概念 相关 解析

1:js介绍

  1. javascript 是一门弱类型的编程语言,简称js,创始人布兰登·艾奇,由美国网景公司发布。微软也有类似的语言叫jscript。
  2. 前端编程语言只有js,而后端编程语言有java、C 、C+++、C#、go、pyhton等等
  3. 如果说html是一个网页骨架,那么css就是对网页的装饰,让网页变得更漂亮,而js则是用来给网页添加动作和行为的。

2:js运行环境

JavaScript的运行环境有两种:

  1. 浏览器
  2. 服务器(nodejs)

3:js构成

img

我们主要在浏览器环境下运行的JavaScript。所以前端主要就是书写浏览器环境下的JavaScript。

浏览器环境下的JavaScript分为3大部分.

1:ECMAScript简称ES。它是js的语法规范。实际上这部分和浏览器没关系。

ES的最新版本是ES6。我们主学ES5.1,穿插学习ES6。

2:DOM(Document Object Model)文档对象模型,提供了操作网页元素的API。

3:BOM(Broswer Object Model)浏览器对象模型,提供了操作浏览器的API。

我们主学ES。ES是Javascript的基础和核心。其次是DOM,BOM最不重要。

一:ES主要知识大纲

1:变量,常量和数据类型

2:运算符,表达式

3:流程控制语句, 控制结构、循环和判断

4:函数

5:对象,面向对象

其中1-3是编程基础。4-5是编程进阶,是难点,也是重点。

二:DOM主要知识大纲

1:节点获取和操作

2:事件对象,事件流

3:html文档操作。

三:BOM主要知识大纲

1:location对象

2:navigator对象

3:history对象

4:js的引入和js语句

js引入有三种方式

1: 通过script引入外部的js文件, script是双标签(注意,书写了src的script标签内部就不能再写JavaScript代码。)

<script src="my.js"></script>

2: 内嵌式的js ,使用script,一定要写在title下面

<script>
    alert("你好");
</script>

3:行内样式 直接写到元素的内部 (不推荐)

 <input type="button" value="你好" onclick="alert('世界')"

js语句

  1. js语句用来向浏览器发出命令
  2. js语用分号结尾
  3. 以下是js用来输出的语句
    <script>
        // 这是一个输入框
        prompt('您的年龄?')
        //alert  弹出警示框,展示给用户看的
        alert('计算结果是')
        //console.log 给程序员测试用的
        console.log('程序员才看的见的')
    </script>

5:程序运行过程

浏览器运行JavaScript的过程

问题1: 开发人员书写JavaScript代码,是谁执行(运行)的,何时执行的?是谁运行?

  1. JavaScript代码(也叫 JavaScript脚本)是由浏览器运行的。
  2. 我们书写的JavaScript代码,实际是一个任务清单。
  3. 浏览器运行JavaScript代码,实际相当于按照任务清单执行任务。
  4. 浏览器运行JavaScript代码,大概分为两个阶段:
    • 解析阶段。此阶段分析代码是否有语法错误。
    • 运行阶段。解析成功后,开始逐行运行代码。(按清单执行任务)

问题2: 用户在浏览器输入url到显示页面, 这个过程发生了什么

  1. 这里需要先说明下浏览器显示网页的大概过程,分为两个部分:
    • 解析阶段。此阶段解析html内的所有标签内容。包括style和script
    • 渲染阶段。解析成功后按照解析结果渲染内容到浏览器视口内。
  2. JavaScript的代码在何时运行的?
    • JavaScript代码在浏览器解析html文档时运行。
    • 当浏览器解析到script标签时,即开始JavaScript代码的解析和执行过程。
  3. 以下是浏览器显示网页的大致过程:
    1. 从服务器下载html文档,逐行解析
    2. 如果遇到style的css样式,解析css
    3. 如果遇到script标签,开始解析JavaScript代码,解析完成后运行JavaScript代码
  4. 解析所有标签成功后,开始渲染网页内容到视口内,此过程结束后,用户将看到网页内容。

6:网页报错

如果因为某些原因,JavaScript会报出错误提示。

1:语法错误。SyntaxError

如果在解析JavaScript代码的过程中,发现有语法错误,则解析失败,JavaScript不会进入运行阶段

2:引用错误(ReferenceError)和类型错误(TypeError)。

如果没有语法错误,解析成功,在执行的过程中如果发生了错误,则发生错误处后面的代码无法得到执行。

常见错误:

  • xxx is not defined 意思是xxx变量没声明就使用了。这是引用错误。
  • Cannot read property xxx of undefined 不能读取undefined的xxx属性。因为undefined没有属性。
  • Cannot read property xxx of null 不能读取null的xxx属性。因为null没有属性。
  • Cannot set property xxx of undefined 不能设置undefined的xxx属性,因为undefined不能设置属性
  • Cannot set property xxx of null 不能设置null的xxx属性,因为null不能设置属性
  • xxx is not a function 意思是xxx不是函数,你把它当成了函数使用,这是类型错误。

7:调式

  • 有时候程序报错,我们需要知道报错原因,报错信息不一定能知道错误在哪里。
  • 这里需要了解程序运行过程中的每一步细节和状态。这是入门程序的必备技能。
  • 浏览器按照Javascript代码逐行依次执行,因此我们可以以代码行为单位逐行逐步骤分析代码的运行和跳转过程。

调试方法:

  1. debugger调试。
  2. 利用浏览器的断点功能进行逐行断点调试。

8:注释和分号

    <!-- js可以使用以下两种注释 -->    
    // 1.单行注释ctr + /

    /* 2.多行注释vscode快捷键:ctrl + shift + / 
    * /


    <!-- js每行语句结束之后需要写;(英文) -->
    <!-- 句末加;是良好的习惯 -->

    <!-- script的标签可放在body的最后面 -->
    <script>
        // alert('你好');
        /*alert('你好');*/
        alert('你好');
        alert('他也好');
    </script>

标签:xxx,浏览器,代码,JavaScript,js,概念,相关,解析
From: https://www.cnblogs.com/jokerwen/p/17020372.html

相关文章