JS起步（学就完事了）

最新推荐文章于 2024-10-06 12:31:10 发布

齐白在学习

最新推荐文章于 2024-10-06 12:31:10 发布

阅读量525

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qi_bai_jin/article/details/127192941

版权

前言

在学习JS之前，我们一般需要HTML与CSS基础，我们要先知道为什么需要学JavaScript以及JavaScript是什么？JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等，这也是我们要学JS的原因，接下来将会讲JS的基本内容，让你对JS有一个基本了解。

一、了解JS

1.体验JS

我们先来体验一下JS，先在页面中添加我们的JS，我们知道CSS可以用<style>或者是<link>标签来引入，而JS只需要一个script标签。

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <title>使用 JavaScript 的示例</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
        // 创建函数
        function createParagraph() {
            let para = document.createElement('p');
            para.textContent = '你点击了这个按钮！';
            document.body.appendChild(para);
        }
        // 获取页面中的所有button元素
        const buttons = document.querySelectorAll('button');
    
        for(let i = 0; i < buttons.length ; i++) {
            // 监听button事件,并且调用函数
            buttons[i].addEventListener('click', createParagraph);
        }
        });
//上述代码不懂没关系，只是个演示
      </script>
  </head>
  <body>
    <button>点我</button>
  </body>
</html>

该案例呈现的效果是点击按钮，则在页面中添加文字。这就是JS能在页面中呈现的一个基本效果。

2.基本概念

在体验完之后，我们先学习几个基本概念：

1.解释代码与编译代码：JavaScript 是轻量级解释型语言，当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。因为编译过程发生在代码运行中，而非之前，所以JavaScript 仍然是一门解释型语言。

2.服务端代码与客户端代码：客户端代码是在用户的电脑上运行的代码，在浏览一个网页时，它的客户端代码就会被下载，然后由浏览器来运行并展示。可以说我们平时所看见的用户界面都是客户端代码构建，这也是 JavaScript需要实现的。而服务器端代码在服务器上运行，接着运行结果才由浏览器下载并展示出来。流行的服务器端 web 语言包括：PHP、Python、Ruby、ASP.NET 、Java等，但JavaScript 也可用作服务器端语言，我们使用Node.js 环境，也能够实现服务器端构建。也就是说JS不仅能写客户端，还能写服务端代码。

3. javaScript的运行次序：当浏览器执行到一段 JavaScript 代码时，通常会按从上往下的顺序执行JS语句，这与大部分语言类似。

二、正式学习JS

1.引入JS

1）head中引入 JavaScript 函数

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <title>使用 JavaScript 的示例</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
        // 创建函数
        function createParagraph() {
            let para = document.createElement('p');
            para.textContent = '你点击了这个按钮！';
            document.body.appendChild(para);
        }
        // 获取页面中的button元素，所有的button将会变成一个数组
        const buttons = document.querySelectorAll('button');
    
        for(let i = 0; i < buttons.length ; i++) {
            // 监听button事件,并且调用函数
            buttons[i].addEventListener('click', createParagraph);
        }
        });
      </script>
  </head>
  <body>
    <button>点我</button>
  </body>
</html>

2）body中引入 JavaScript 函数

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <title>使用 JavaScript 的示例</title>
  </head>
  <body>
    <button>点我</button>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
        // 创建函数
        function createParagraph() {
            let para = document.createElement('p');
            para.textContent = '你点击了这个按钮！';
            document.body.appendChild(para);
        }
        // 获取页面中的button元素，所有的button将会变成一个数组
        const buttons = document.querySelectorAll('button');
    
        for(let i = 0; i < buttons.length ; i++) {
            // 监听button事件,并且调用函数
            buttons[i].addEventListener('click', createParagraph);
        }
        });
      </script>
  </body>
</html>

3）外部引入 JavaScript

我们将上述js代码写入basic.js(后缀必须要js)文件中，通过引入该文件实现代码调用。

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <title>使用 JavaScript 的示例</title>
  </head>
  <body>
    <button>点我</button>
    <script src="./js/basic.js"></script>
  </body>
</html>

2.注释

就像 HTML 和 CSS，JavaScript 代码中也可以添加注释，浏览器会忽略它们，注释的作用就是让我们在一段时间够重新看我们的代码时能够快速理解代码意思，注释有两种形式。

一种是在双斜杠后添加单行注释（快捷键ctrl+/），比如：

// 我是一条注释

第二种在 /* 和 */ 之间添加多行注释，比如：

/*
  我也是
  一条注释
*/

合理的使用注释能够为我们带来很大帮助！！！

3.变量

1）变量名

在编程语言中，变量用于存储数据值。

JavaScript 使用 var 关键词来声明变量。= 号用于为变量赋值。

在本例中，x 被定义为变量。然后，x 被赋的值是 7：

var x;

x = 7;

//以下形式也可以
var y = 8;

我们在命名变量名的时候有一定的规则，一般采用拉丁字符 (0-9,a-z,A-Z) 和下划线字符。我们需要注意以下几点：

变量名不能以下划线，数字开头。比如_name,1name,都是不允许的。
可以使用驼峰命名法，用来将多个单词组在一起，小写整个命名的第一个字母然后大写剩下单词的首字符。
变量名大小写敏感——因此myage与myAge是 2 个不同的变量。
避免使用 JavaScript 的保留字给变量命名。保留字，即是组成 JavaScript 的实际语法的单词！因此诸如 var、function、let 和 for 等，都不能被作为变量名使用。

2）var 声明

在一开始我们使用var来声明变量。我们可以将声明理解为创建存放数值的容器。比如var x;创建了名为x的容器，用于存放数值。x=0,表示这个容器存放了0。同理我们用let与const都有这种效果，let与const在后期将会再描述。

3）变量类型

类型	描述
Number	存储数字
String	存储字符串
Boolean	存储布尔值
Array	存储数组
Object	存储对象

变量类型指的是我们存储到容器的值为数字还是字符串还是其余类型，比如：

var x = 12;
//这是Number类型
var y = true;
//这是Boolean类型
var z = '你好';
//这是字符串类型
var z = [];
//这是Array类型
var z = {};
//这是Object类型

因为javascript是弱类型语言，所以不像c，java有int，float这种关键词，只需要一个var或者let const就可以了。并且javaScript的变量能够动态改变类型，比如:

var x = 12;
//这个时候是数字
x= '你好';
//这个时候是字符串

typeof 操作符

我们可以通过typeof查看变量的类型

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof {name:'we', age:20}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function

变量的类型转换

隐式类型转化：静悄悄地，JS代码不知不觉地就进行了类型转化,如下列例子
强制类型转化：写代码进行转化，

Boolean(value)——把给定的值转换成Boolean型；
Number(value)——把给定的值转换成数字（可以是整数或浮点数）；
String(value)——把给定的值转换成字符串。

//当数值和字符串相加时，JavaScript 将把数值视作字符串。
var x = 10+'name'; //返回x= '10name'
//javaScript从左到右执行代码
var x = 10 + 1 + "name";//返回   '11name',10+1的时候都是Number，+字符转的时候Number转为String
var x = "name"+10 + 1;//返回  'name101'
//以上为隐式类型转换
var x = Number('12');//等效于x=12;把'12'转换为了12
//以上为强制类型转换

4.函数

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}
上述为定义函数

name(参数 1 ，参数 2 ，参数 3)；
这里为使用函数

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数：

由函数执行的代码被放置在花括号中：{}

函数参数 是在函数定义中所列的名称，是当调用函数时由函数接收的真实的值。

一般函数有两个过程，一个是声明函数，第二是调用函数（使用）。

全局变量与局部变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。局部变量只能在函数内访问，在函数开始时创建，在函数完成时被删除。

// 此处的代码name这个变量为未声明

function myFunction() {
    var name = "haha";
    // name为局部变量，在函数内部可以使用这个变量
}

// 此处的代码name这个变量为未声明

全局变量则可以在函数与函数外都可使用。

console.log(typeof name);
function myFunction() {
    var name = 12;
}
var name;

我们看这段代码，typeod name的返回值为string,你会想这个name之前都没有声明，为什么会出现这种效果。

这个是因为js代码有变量提升的机制，所有声明，将会在最开始被加载。所以声明变量将会在一开始就执行，赋值的代码与其他代码则在声明的代码处理完之后按从上到下的顺序处理。

本文部分借鉴文档来自w3c或者mdn，这两个网站资料对于学习前端有很大帮助。

未来1个月都将会持续复习JS内容，如果感兴趣可以请您点点关注嘛>_<。

以上内容如有错误，麻烦大家在评论区指正，让我们共同进步。加油！！！

齐白在学习

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫