JS入门必备基础知识(适合新人学习)

JS入门必备基础知识(适合小白)

一、JS是什么?
1、JS简介
2、JS的组成部分
3、JS的基本特点
4、JS的特性
5、JS与HTML、CSS的对比
二、JS的用法
1、JS的引入方法
1)head中的JavaScript函数
2)body中的JavaScript函数
3)外部的JavaScript
2、JS得到基本语法
3、JS中的变量
1)变量名
2)变量值
3)全局变量与局部变量
4、数据类型
1)基本数据类型
2)引用数据类型
3)JS数据类型的转换
4)typeof操作符
5、JS代码在执行时的两个阶段
1)预编译
2)代码执行
6、加var声明的变量与不加var声明的变量的区别
7、初步了解函数
8、let声明和const声明
1)let声明
2)const声明

JS是什么

1、JS简介

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的 高级编程语言 。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

2、JS的组成部分

ECMAScript,描述了该语言的语法和基本对象。
文档对象模型(DOM),描述处理网页内容的方法和接口。
浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

JS基本组成
3、JS的基本特点

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
1、是一种解释性脚本语言(代码不进行预编译)。
2、主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
3、可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
4、跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。
5、Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。
6、可以实现web页面的人机交互。

4、JS的特性

JavaScript脚本语言具有以下特点:
1) 脚本语言。 JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
2) 基于对象。 JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
3) 简单。 JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
4) 动态性。 JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
5) 跨平台性。 JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。

5、JS与HTML、CSS的对比

相同点: 三者运行环境都可以在浏览器中。
不同点: HTML、CSS 不叫编程语言,JS运行环境不只是浏览器,也可以是其他环境。

二、JS的用法

1、JS的引入方法
1)head中的 JavaScript 函数

<script>标签写在html文件中的<head>标签中

示例如下:


<!DOCTYPE html> <html>

<head>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "我的第一个 JavaScript 函数";
        }
    </script> </head>

<body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">尝试一下</button> </body>

</html>

2)body中的 JavaScript 函数

<script>标签写在html文件中的<body>标签中

示例如下:

<!DOCTYPE html>
<html>

<body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">尝试一下</button>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "我的第一个 JavaScript 函数";
        }
    </script>
</body>

</html>

3)外部的 JavaScript

JS代码写在JS文件中,然后在html文件中通过<script>标签引入,写项目时通常会把JS写在一个单独的文件中

示例如下:

<!DOCTYPE html>
<html>

<body>
    <script src="myScript.js"></script>
</body>

</html>

外部JS
2、JS的基本语法

1)JS是区分大小写
2)忽略空白符(空格  换行  tab)
3)语句分号可加可不加
4)单行注释//  多行注释/* */
5)要特别注意标识符和关键字 
6)不能以数字开头

3、JS中的变量

变量是用于存储信息的"容器",也就是内存中的一个空间。

1)变量名

内存空间的别名
 注意:
    变量必须以字母开头
    变量也能以 $ 和 _ 符号开头(不过不推荐这么做)
    变量名称对大小写敏感(y 和 Y 是不同的变量)

2)变量值

存储在内存空间的数据

3)全局变量与局部变量

全局变量与局部变量的分界点是函数,函数外部的是全部变量,内部的是局部变量。全局变量在函数内外都可以访问,局部变量只能在函数内部访问。

4、数据类型

为了更加合理的使用内存空间,基本上所有的编程语言中都提出
数据类型的概念,研究针对不同的数据,分配不同的空间。

1)基本数据类型

i)number: 数字型

    number是一个数据类型,这个数据类型对应的值有无数个。
    在JS中number数据类型是不分整数和小数 都是number
    可以通过typeof查看一个变量值的数据类型
    (max)最大值 和 (min)最小值
    number可以通过不同进制显示 2进制  8进制 10进制  16进制 
    NaN  不是一个数字
    JS中不要对小数运算

ii)String: 字符串类型

    在JS中 使用‘’ “”把字符串包起来 不包 JS会给它当成变量
    单引号不要嵌套单引号 双引号不要嵌套双引号 外单内双 外双内单
    string数据类型对应的数据有无数个

iii)boolean 布尔类型

    boolean数据类型对应的值就两个 true false
    true 和 True 不一样的 JS是区分大小写的

iv)undefiend 没有值

    undefiend是一个数据类型,这种数据类型对应的值是undefiend
    
v)null  没有值
  • 什么时候会出现undeined?

  • 答:一个变量没有赋值 它的值是undefiend 这个值的类型是undefiend

2)引用数据类型

    object 对象
    array 数组
    function 函数

3) JS的数据类型转换

隐式类型转化:悄咪咪地,JS代码不知不觉地就进行了类型转化
强制类型转化:写代码进行转化
    <script>
        console.log(parseInt(3.14)); // 把小数转成整数
        console.log(parseInt("3.14abc")); // 尝试把小数或非数字转成整数
        console.log(parseFloat(3))
        console.log(parseFloat("3.14abc"))
        console.log(Number("abc123"))  // NaN
        console.log(Number("123abc"))  // NaN
        console.log(Number("123"))  // 123
        console.log(String(123456))  // 123456*/
    </script>

隐式转换
4)typeof 操作符

你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
typeof "xiaoming"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'xiaoming', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

5、JS代码在执行时分两个阶段
1)预编译

把加var的变量进行提升 变量声明会提升 变量的赋值是不会提升
提升到了代码段最前面,把使用function声明的函数进行提升,提升的是整个函数声明

2)代码执行

从头到尾,代码一句一句的执行。

6、加var的变量和没有加var的变量的区别

    <script>
        // 1)在全局代码中,加var会提升,没有var的不会提升。
        console.log(a);
        a = 110;  // a is not defined

        // 2)不管加没加var的全局变量,都会作为window的属性
        var a = 1;
        b = 2;
        console.log(window.a)
        console.log(window.b)

        // 3)没有加var的变量,只能作为全局变量,只要是全局变量,肯定是window的属性
        function f() {
            a = 888;
        }
        f()
        console.log(window.a)

        // 4)加var的局部变量,不会作为window的属性
        function f() {
            var a = 888;
        }
        f()
        console.log(a)
        //  访问一个对象上不存在的属性,结果就是undefind
        console.log(window.a) // undefined
    </script>

7、初步了解函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数定义= 声明 + 赋值
函数就是包裹在花括号中的代码块,前面使用了关键词 function:

注意:调用函数时,就会把函数体中的代码都执行了,函数调用的过程就是实参向形参赋值的过程,一个函数没有返回值,返回的类型就是undefined。

8、let和const声明
1)let声明

<script>
    // 1)let声明的变量没有提升(let声明的变量也提升,仅仅是没有初始化)
     console.log(a);
     let a = 110;  //  Cannot access 'a' before initialization

    // 2)let 配合 {} 也可以形成块级作用域
     if(true){
        var a = 111; // 全局变量
         // b只能在当前的{}中被访问到 出了块就访问不了
         let b = 888; // let + {} 形成块级作用域
     }
     console.log(b); // b is not defined

    //  3)使用let声明的变量不会挂载到GO上
     let a = 111;
     console.log(window.a); // undefine

    // 4)使用let不能重复声明
    let a = 1;
    let a = 2;
     console.log(a); // Identifier 'a' has already been declared

    // 不要使用var来定义变量  使用let声明变量

</script>

2)const声明

<script>
    // const是声明一个常量
     const a = 110;  // 定义了一个常量(不会改变的量)
     a = 666;
     console.log(a); // TypeError: Assignment to constant variable.

    // 1)也没有提升
    console.log(a);
    const a = 1;  //  Cannot access 'a' before initialization

    // 2) 也会形成块级作用域
     if(true){
         const a = 111;
     }
     console.log(a); //  a is not defined

    // 3)使用const声明的常量不会挂载到GO上
     const a = 1;
     console.log(window.a); // undefined

    // 4)使用const不能重复声明
    const a = 1;
    const a = 2;
    // Identifier 'a' has already been declared
    console.log(a);

    // 5)const在声明常量时,必须赋值
     const a;
     a = 1;
     console.log(a)

    // 用法:声明变量使用let  声明常量使用const  不要用var
</script>

let和const很相似

1、let和const的相同点:

① 只在声明所在的块级作用域内有效。
② 不提升,同时存在暂时性死区,只能在声明的位置后面使用。
③ 不可重复声明。

2、let和const的不同点:

① let声明的变量可以改变,值和类型都可以改变;const声明的常量不可以改变,这意味着,const一旦声明,就必须立即初始化,不能以后再赋值。

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习 React 前,有一些必备JavaScript 知识需要掌握。以下是一些重要的 JavaScript 概念和技术,对于学习 React 很有帮助: 1. 变量和数据类型:了解 JavaScript 中的变量声明和数据类型,如字符串、数字、布尔值等。 2. 条件语句和循环:掌握 JavaScript 中的条件语句(如 if-else 和 switch)以及循环(如 for 和 while),以便进行逻辑控制和迭代操作。 3. 函数:了解 JavaScript 中函数的定义、调用和参数传递的方式。还要了解箭头函数、闭包和作用域的概念。 4. 对象和数组:理解 JavaScript 中的对象和数组,以及如何访问和操作它们的属性和元素。 5. DOM 操作:熟悉基本的 DOM 操作,包括获取元素、修改元素属性和添加事件监听器等。 6. 异步编程:掌握 JavaScript 中的异步编程方式,包括回调函数、Promise 和 async/await 等。 7. ES6+ 特性:了解 ES6 及更高版本的新特性,例如模块化导入导出、箭头函数、解构赋值、模板字面量等。 8. AJAX 和 Fetch:掌握使用 AJAX 或 Fetch API 发送异步请求获取数据的方法。 9. 跨域问题:了解跨域请求的问题以及如何解决跨域请求的限制。 10. 模块化开发学习如何使用模块化开发来组织和管理 JavaScript 代码。 这些是学习 React 前必备的一些 JavaScript 知识点。熟练掌握这些概念和技术将为你更好地理解和使用 React 提供基础

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值