前端-JavaScript基础知识（一）

黑马蓝汐

于 2021-12-29 21:19:14 发布

阅读量935

点赞数 3

分类专栏：网页前端文章标签： javascript 前端 css3

本文链接： https://blog.csdn.net/qq_52262831/article/details/122222384

版权

网页前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

每日分享：

区区一个期末考试，你怕什么？……他就考什么。

这个世界上最宽广的是海洋，比海洋还宽广的是天空，比天空还宽广的是考试范围！

目录：

JavaScript的介绍
JavaScript的使用方式
变量和数据类型
函数的定义和调用
变量的作用域

一、JavaScript的介绍

JavaScript是运行在浏览器端的脚本语言，是由浏览器解释执行的，简称js，它可以让网页和用户有交互的功能

前端开发三剑客：1.HTML：负责网页的结构 2.CSS：负责网页样式 3.JavaScript：负责网页行为（网页和用户的交互效果）

二、JavaScript的使用方式

1. 内嵌式

<script>

alert('我是内嵌式js代码');

</script>

2. 外链式

<script src="外链式js代码.js"></script>

3. 行内式

<input type="button" value="这是一个按钮" οnclick="alert('点我干嘛')">

当这三种方式被同时写在一个html中时，它的执行顺序是：内嵌式、外链式、行内式

三、变量和数据类型

1. 定义变量

JavaScript是一种弱类型语言，也就是说不需要指定变量的类型，JavaScript变量的类型由它的值决定，定义变量用关键字‘var’，每一条JavaScript语句以分号结尾

定义变量的语法格式：

var 变量名 = 值;

// 定义数字类型
var iNum = 1;
var fNum = 2.4;
// 定义字符串类型
var sStr = '张三';

2. JavaScript的注释

// "//"为单行注释，Ctrl+/

/*

多行注释代码

*/

3. 数据类型

js中有六种数据类型，其中包括五种基本数据类型和一种复杂数据类型（object）

五种基本类型：

number 数字类型
string 字符串类型
boolean 布尔类型 true或false
undefined undefined类型，变量声明但未初始化，它的值就是undefined
null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面上获取不到对象，返回的值就是null

一种复合类型：

object类型，以及数组、函数和JavaScript对象都属于复合类型

        // 定义数字类型
        var iNum = 1;
        var fNum = 2.4;
        // 定义字符串类型
        var sStr = '张三';
        // 定义boolean布尔类型
        var bBool = true;
        // 定义undefined类型（未对变量初始化）
        var uUndefined;
        // 定义null类型，js把null归属于object类型了
        var nNull = null;
        // 定义object对象
        var oObject = {
            name:'法外狂徒张三',
            age:1
        }
        // 同时定义多个变量      
        var iNum1 = 2, sStr1 = 'asd';
        // 获取对象的name属性
        alert(oObject.name);

4. 变量的命名规范

区分大小写
第一个字符必须是字母、下划线、美元符号($)
其他字符可以是字母、下划线、美元符或数字

5. 命名风格

对象o Object 比如：oDiv、oObject等等

数组a Array 比如：aItems

字符串s String 比如：sStr

整数i integer 比如：iNum

布尔型b Boolean 比如：bBool

浮点数f Float 比如：fNum

函数fn Function 比如：fnDel

四、函数的定义和调用

1. 函数定义

函数就是可以重复使用的代码块，使用关键字function来定义

// 定义函数
        function fnShow(){
            alert('我是一个无参数无返回值的函数');
        }

2. 函数的调用

// 调用函数
        fnShow();

3. 定义和调用有参数有返回值的函数

// 有参数有返回值函数
        function fnSum(iNum1, iNum2){
            var iResult = iNum1 + iNum2;
            alert(iResult)
            return iResult;
            alert("我在return后面，所以我不会执行")
        }
// 有参数的函数的调用
        fnSum(1, 2);

函数中return关键字的作用：

返回函数中的值
执行完return后函数执行结束

五、变量的作用域

变量的作用域就是变量的使用范围：

局部变量
全局变量

1. 局部变量

局部变量就是在函数内定义使用的变量，只能在函数内使用

// 局部变量：函数内定义的变量是局部变量，只能在函数内使用
        function fnShow(){
            // 定义局部变量
            var iNum = 1;
            alert(iNum);
        }
        // 调用函数
        fnShow();
        // 尝试在函数体外使用局部变量，会使用失败
        // alert(iNum);

2. 全局变量

全局变量就是在函数外定义的变量，可以在不同函数内使用

// 全局变量：在函数外定义的变量是全局变量，可以在不同的函数中使用，并且不同函数内可以共享全局变量
        var iNum1 = 1;

        function fnSum(){
            alert('我是在函数内访问全局变量' + iNum1);
            iNum1++;
            alert(iNum1);
        }
        // 调用函数
        fnSum();
        // 外部访问全局变量
        alert('我是在外部访问全局变量：' + iNum1);