掌握 JavaScript:从初学者到高级开发者的完整指南(一)

简介: 掌握 JavaScript:从初学者到高级开发者的完整指南(一)


1.1 介绍

html完成了架子,css做了美化,但是网页是死的,我们需要给他注入灵魂,所以我们需要学习JavaScript,这门语言会让我们的页面能够和用户进行交互。

1.2 引入方式

同样,js代码也是书写在html中的,那么html中如何引入js代码呢?主要通过下面的2种引入方式:

第一种方式:内部脚本,将JS代码定义在HTML页面中。

  • JavaScript代码必须位于<script></script>标签之间。
  • 在HTML文档中,可以在任意地方,放置任意数量的<script>
  • 一般会把脚本置于<body>元素的底部,可改善显示速度。

例子:

<script>
    alert("Hello JavaScript")
</script>

第二种方式:外部脚本,将 JS代码定义在外部 JS文件中,然后引入到 HTML页面中。

  • 外部JS文件中,只包含JS代码,不包含<script>标签。
  • 引入外部js的<script>标签,必须是双标签。

例子:

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

注意:demo.js中只有js代码,没有<script>标签。

第一步:在VS Code中创建名为 10.JS-引入方式.html 的文件。

第二步:按照上述第一种内部脚本的方式引入js,编写如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    <!-- 内部脚本 -->
    <script>
        alert('Hello JS');
    </script>
</head>
<body>
</body>
</html>

第三步:浏览器打开效果如图所示:

第四步:接下来演示外部脚本,注释掉内部脚本,然后在css目录同级创建js目录,然后创建一个名为demo.js的文件:

第五步:在demo.js中编写如下js内容:

alert('Hello JS2');

第六步:注释掉之前的内部脚本代码,添加<script>标签来引入外部demo.js文件,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    <!-- 内部脚本 -->
    <!-- <script>
        alert('Hello JS');
    </script> -->
    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</head>
<body>
</body>
</html>

第七步:浏览器刷新效果如图:

1.3 基础语法

1.3.1 书写语法

掌握了js的引入方式,那么接下来我们需要学习js的书写了,首先需要掌握的是js的书写语法,语法规则如下:

  • 区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
  • 每行结尾的分号可有可无
  • 大括号表示代码块
  • 注释:
  • 单行注释:// 注释内容
  • 多行注释:/* 注释内容 */

我们需要借助js中3钟输出语句,来演示书写语法

api 描述
window.alert() 警告框
document.write() 在HTML 输出内容
console.log() 写入浏览器控制台

演示如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
</body>
<script>
    /* alert("JS"); */
    //方式一: 弹出警告框
    window.alert("hello js");
</script>
</html>

浏览器打开如图所示效果:

我们注释掉上述代码,添加代码 document.write(“hello js”); 来输出内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
</body>
<script>
    /* alert("JS"); */
    //方式一: 弹出警告框
    // window.alert("hello js");
    //方式二: 写入html页面中
    document.write("hello js");
</script>
</html>

刷新浏览器,效果如图所示:

最后我们使用console.log(“hello js”); 写入到控制台,并且注释掉之前的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
</body>
<script>
    /* alert("JS"); */
    //方式一: 弹出警告框
    // window.alert("hello js");
    // //方式二: 写入html页面中
    // document.write("hello js");
    //方式三: 控制台输出
    console.log("hello js");
</script>
</html>

浏览器f12抓包,去控制台页面,如图所示:

1.3.2 变量

书写语法会了,变量是一门编程语言比不可少的,所以接下来我们需要学习js中变量的声明,在js中,变量的声明和java中还是不同的。首先js中主要通过如下3个关键字来声明变量的:

关键字 解释
var 早期ECMAScript5中用于变量声明的关键字
let ECMAScript6中新增的用于变量声明的关键字,相比较var,let只在代码块内生效
const 声明常量的,常量一旦声明,不能修改

在js中声明变量还需要注意如下几点:

  • JavaScript 是一门弱类型语言,变量可以存放不同类型的值 。
  • 变量名需要遵循如下规则:
  • 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
  • 数字不能开头
  • 建议使用驼峰命名

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基础语法</title>
</head>
<body>
</body>
<script>
    //var定义变量
    var a = 10;
    a = "张三";
    alert(a);
</script>
</html>

可以看到浏览器弹出张三

在js中,我们var声明的变量可以接受任何数据类型的值。并且var声明的变量的作用于是全局的,注释掉之前的代码,添加如下代码:

<script>
    //var定义变量
    // var a = 10;
    // a = "张三";
    // alert(a);
    //特点1 : 作用域比较大, 全局变量
    {
        var x = 1;
    }
    alert(x);
</script>

浏览器照样成功弹出:

而且var关键字声明的变量可以重复定义,修改代码如下:

{
     var x = 1;
     var x = "A";
}
alert(x);

浏览器弹出内容是A

所以在ECMAScript 6 新增了 let关键字来定义变量,它的用法类似于 var,但是所声明的变量,只在 let关键字所在的代码块内有效,且不允许重复声明。注释掉之前的代码,添加代码如下:

<script>
    //var定义变量
    // var a = 10;
    // a = "张三";
    // alert(a);
    //特点1 : 作用域比较大, 全局变量
    //特点2 : 可以重复定义的
    // {
    //     var x = 1;
    //     var x = "A";
    // }
    // alert(x);
    //let : 局部变量 ; 不能重复定义 
    {
        let x = 1;
    }
    alert(x);
</script>

浏览器打开,f12抓包,来到控制台页面,发现报错,变量没有定义,说明let声明的变量在代码块外不生效

接着我们使用let重复定义变量,代码修改如下:发现idea直接帮我们报错了,说明let声明的变量不能重复定义

在ECMAScript6中,还新增了const关键字用来声明常量,但是一旦声明,常量的值是无法更改的。注释之前的内容,添加如下代码:

const pi = 3.14;
    pi = 3.15;
    alert(pi);

浏览器f12抓包,来到控制台页面发现直接报错了,

关于变量的讲解我们就此结束,完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基础语法</title>
</head>
<body>
</body>
<script>
    //var定义变量
    // var a = 10;
    // a = "张三";
    // alert(a);
    //特点1 : 作用域比较大, 全局变量
    //特点2 : 可以重复定义的
    // {
    //     var x = 1;
    //     var x = "A";
    // }
    // alert(x);
    //let : 局部变量 ; 不能重复定义 
    // {
    //     let x = 1;
    //     alert(x);
    // }
    //const: 常量 , 不能给改变的.
    const pi = 3.14;
    pi = 3.15;
    alert(pi);
</script>
</html>

1.3.3 数据类型和运算符

虽然js是弱数据类型的语言,但是js中也存在数据类型,js中的数据类型分为 :原始类型 和 引用类型,具体有如下类型

数据类型 描述
number 数字(整数、小数、NaN(Not a Number))
string 字符串,单双引皆可
boolean 布尔。true,false
null 对象为空
undefined 当声明的变量未初始化时,该变量的默认值是 undefined

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-数据类型</title>
</head>
<body>
</body>
<script>
    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14); //number
    alert(typeof "A"); //string
    alert(typeof 'Hello');//string
    alert(typeof true); //boolean
    alert(typeof false);//boolean
    alert(typeof null); //object 
    var a ;
    alert(typeof a); //undefined
</script>
</html>

熟悉了js的数据类型了,那么我们需要学习js中的运算法,js中的运算规则绝大多数还是和java中一致的,具体运算符如下:

运算规则 运算符
算术运算符 + , - , * , / , % , ++ , –
赋值运算符 = , += , -= , *= , /= , %=
比较运算符 > , < , >= , <= , != , == , === 注意 == 会进行类型转换,=== 不会进行类型转换
逻辑运算符 && , || , !
三元运算符 条件表达式 ? true_value: false_value

在js中,绝大多数的运算规则和java中是保持一致的,但是js中的==和===是有区别的。

  • ==:只比较值是否相等,不区分数据类型,哪怕类型不一致,==也会自动转换类型进行值得比较
  • ===:不光比较值,还要比较类型,如果类型不一致,直接返回false
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-运算符</title>
</head>
<body>
</body>
<script>
     var age = 20;
     var _age = "20";
     var $age = 20;
     alert(age == _age);//true ,只比较值
     alert(age === _age);//false ,类型不一样
     alert(age === $age);//true ,类型一样,值一样
</script>
</html>

在js中,虽然不区分数据类型,但是有时候涉及到数值计算,还是需要进行类型转换的,js中可以通过parseInt()函数来进行将其他类型转换成数值类型。注释之前的代码,添加代码如下:

// 类型转换 - 其他类型转为数字
alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)

除此之外,在js中,还有非常重要的一点是:0,null,undefined,“”,NaN理解成false,反之理解成true。注释掉之前的代码,添加如下代码:

if(0){ //false
    alert("0 转换为false");
 }

浏览器刷新页面,发现没有任何弹框,因为0理解成false,所以条件不成立。注释掉上述代码,添加如下代码:

if(1){ //true
    alert("除0和NaN其他数字都转为 true");
}

浏览器刷新,因为1理解成true,条件成立,所以浏览器效果如下;

其他情况可以一一演示,完整演示代码如下:

// if(0){ //false
    //     alert("0 转换为false");
    // }
    // if(NaN){//false
    //     alert("NaN 转换为false");
    // }
    if(1){ //true
        alert("除0和NaN其他数字都转为 true");
    }
    // if(""){ //false
    //     alert("空字符串为 false, 其他都是true");
    // }
    // if(null){ //false
    //     alert("null 转化为false");
    // }
    // if(undefined){ //false
    //     alert("undefined 转化为false");
    // }

流程控制语句if,switch,for等和java保持一致,此处不再演示

需要注意的是:在js中,0,null,undefined,“”,NaN理解成false,反之理解成true

1.4 函数

在java中我们为了提高代码的复用性,可以使用方法。同样,在JavaScript中可以使用函数来完成相同的事情。JavaScript中的函数被设计为执行特定任务的代码块,通过关键字function来定义。接下来我们学习一下JavaScript中定义函数的2种语法

1.4.1 第一种定义格式

第一种定义格式如下:

function 函数名(参数1,参数2..){
    要执行的代码
}

因为JavaScript是弱数据类型的语言,所以有如下几点需要注意:

  • 形式参数不需要声明类型,并且JavaScript中不管什么类型都是let或者var去声明,加上也没有意义。
  • 返回值也不需要声明类型,直接return即可

如下示例:

function add(a, b){
    return a + b;
}

代码演示:

<script>
     function add(a,b){
        return  a + b;
     }
</script>

但是上述只是定义函数,函数需要被调用才能执行!所以接下来我们需要调用函数

let result = add(10,20);
alert(result);

查看浏览器运行结果:浏览器弹框内容如下图所示:

1.4.2 第二种定义格式

第二种可以通过var去定义函数的名字,具体格式如下:

var functionName = function (参数1,参数2..){   
  //要执行的代码
}

接下来我们按照上述的格式,修改代码如下:只需要将第一种定义方式注释掉,替换成第二种定义方式即可,函数的调用不变

<script>
    //定义函数-1
    // function add(a,b){
    //    return  a + b;
    // }
    //定义函数-2
    var add = function(a,b){
        return  a + b;
    }
    //函数调用
    var result = add(10,20);
    alert(result);
</script>

浏览器弹框效果和上述一致

我们在调用add函数时,再添加2个参数,修改代码如下:

var result = add(10,20,30,40);

浏览器打开,发现没有错误,并且依然弹出30,这是为什么呢?

因为在JavaScript中,函数的调用只需要名称正确即可,参数列表不管的。如上述案例,10传递给了变量a,20传递给了变量b,而30和40没有变量接受,但是不影响函数的正常调用。

后记
👉👉💕💕美好的一天,到此结束,下次继续努力!欲知后续,请看下回分解,写作不易,感谢大家的支持!! 🌹🌹🌹

相关文章
|
3月前
|
前端开发 JavaScript 开发者
深入理解JavaScript:从基础到高级应用
深入理解JavaScript:从基础到高级应用
43 0
|
3月前
|
JSON JavaScript 前端开发
掌握 JavaScript:从初学者到高级开发者的完整指南之JavaScript对象(二)
掌握 JavaScript:从初学者到高级开发者的完整指南之JavaScript对象(二)
|
1月前
|
JavaScript 前端开发 索引
JavaScript字符串检查:从基础到高级
【2月更文挑战第26天】
24 0
JavaScript字符串检查:从基础到高级
|
27天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(六)
JavaScript高级笔记-coderwhy版本
73 0
|
27天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(一)
JavaScript高级笔记-coderwhy版本
34 0
JavaScript高级笔记-coderwhy版本(一)
|
2月前
|
前端开发 JavaScript API
网页开发者必看!5种JS跳转页面技巧,提升用户交互体验
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
3月前
|
JSON JavaScript 前端开发
深入理解JavaScript对象:从基础到高级用法
深入理解JavaScript对象:从基础到高级用法
63 0
|
3月前
|
前端开发 JavaScript 安全
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
|
3月前
|
XML 存储 JavaScript
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)
|
3月前
|
XML JavaScript 前端开发
掌握 JavaScript:从初学者到高级开发者的完整指南(三)
掌握 JavaScript:从初学者到高级开发者的完整指南(三)