前端入门日记-环境的安装和部分基础

不愿透露姓名的唐马儒

已于 2023-06-13 17:58:03 修改

阅读量87

点赞数

分类专栏：前后端学习文章标签： html javascript

于 2023-05-29 17:58:31 首次发布

本文链接：https://blog.csdn.net/weixin_51959864/article/details/130931070

版权

前后端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇文章介绍了JavaScript的基本概念，包括它作为客户端脚本语言的角色，以及如何在浏览器和Node.js环境中运行。主要内容涵盖JavaScript的安装、VSCode的配置，以及JavaScript与HTML的交互，如内部和外部引用脚本的方法。此外，文章还讲解了JavaScript的基础语法，如变量、数据类型、运算符、控制流（分支和循环）、数组和函数，包括匿名函数的使用。

摘要由CSDN通过智能技术生成

基本介绍

- JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。

- 脚本语言：不需要编译，就可以被浏览器直接解析执行了。

- 核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！

安装过程

安装node.js (js---运行环境)

Js天生就可以在浏览器运行环境，在浏览器运行之前，比如需要调试，或者后端进行执行需要node.js ；安装完成后cmd： node -v #查看版本； nmp -v #显示nmp管理包信息

安装VSCode，安装插件，设置中文

JS和HTML部分基础整合

js引用方法

内部引用：<script></script>

<body>
    <button id="btn">点击按钮</button>
    <script> 
    //js内部方式引用
    //document js对象 getElementById定位对象.事件
    //使用函数来响应事件
    document.getElementById("btn").onclick=function()
    {
        alert("弹出提示效果")

    }
    </script>
</body>

1. 在按钮标签标签下面编写一个<script>标签。

2. 在<script>标签中编写代码。

外部引用：<script src=文件路径></script>

1.先创建一个js文件

// jwjs.js
document.getElementById("btn2").onclick=function()
{
    alert("点我咋滴~~？")

}

2.编写<script src="引用此文件即可"></script>

<body>

    <button id="btn2">点我呀</button>
    <script src="jwjs.js"> 
    </script>
    
</body>

注释 // 单行注释 /*多行注释*/

部分基本语法

js和用户交互--输入与输出

- 输入框 prompt(“提示内容”);

- 弹出警告框 alert(“提示内容”);

- 控制台输出 console.log(“显示内容”);

- 页面内容输出 document.write(“显示内容”);

定义常量变量

JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型。

局部变量 let 变量名 = 值; 在同一个 {} 中引用

定义全局变量变量的名字=值;

定义常量 const 常量名 = 值;

数据类型

typeof 用于判断变量的数据类型;

// let age=18.02;
    // document.write(typeof(age));//number数据类型~ 小数整数算number
    // let age;
    // document.write(typeof(age));// 只有赋值后才算定义  undefined
    let age=null;
    document.write(typeof(age));// 空 认为空对象  object

运算符

let age=(7>6)?10:8;
    document.write(age);
// 输出10

分支控制

支持 if(条件) 如果{} else 否则{} else if(条件)如果{}

 <script>
   //if语句
let month = 7;
if(month >= 3 && month <= 5) {
    document.write("春季");
}else if(month >= 6 && month <= 8) {
    document.write("夏季");
}else if(month >= 9 && month <= 11) {
    document.write("秋季");
}else if(month == 12 || month == 1 || month == 2) {
    document.write("冬季");
}else {
    document.write("月份有误");
}

document.write("<br>");


        
    </script>

Js支持switch分支

  <script>
let month =9;
//switch语句
switch(month){
    case 3:
    case 4:
    case 5:
        document.write("春季");
        break;
    case 6:
    case 7:
    case 8:
        document.write("夏季");
        break;
    case 9:
    case 10:
    case 11:
        document.write("秋季");
        break;
    case 12:
    case 1:
    case 2:
        document.write("冬季");
        break;
    default:
        document.write("月份有误");
        break;
}

document.write("<br>");       
    </script>

循环控制

For循环

for(初始化变量1;条件2;执行循环体后的操作4)

{循环体3

}

for(let i = 1; i <= 5; i++) {
    document.write(i + "<br>");
}

while 循环

while(条件){循环体}

let n = 6;
while(n <= 10) {
    document.write(n + "<br>");
    n++;
}

数组

数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。

定义格式

let 数组名字=[放多个元素];

…可变数据组合

let jwarr=[10,20,30];
    
//1复制数组
let jwarr2=[...jwarr];
for(let i = 0; i < jwarr2.length; i++) {
document.write(jwarr2[i] + "<br>");
}
document.write("==============<br>");
//2合并数组

let arr3=[40,50,60];
let arr4=[...jwarr,...arr3];
for(let i = 0; i < arr4.length; i++) {
document.write(arr4[i] + "<br>");
}
document.write("==============<br>");

//3字符串转为数组
let arr5=[..."zhangsan"];

for(let i = 0; i < arr5.length; i++) {
document.write(arr5[i] + "<br>");
}

函数

function 方法名(参数列表)

{ 方法体;

return num1+num2;

}

可变函数 ...参数前面

//定义加法功能(可变参数  作用接受不同数量的实参，将实参当作数组处理)
function jwadd(...jwnum)
{   let sum=0;
    for(let i=0;i<jwnum.length;i++) // 注意数组不要超出范围
    {    //js  超出索引的值 Nan空
    // 10+Nan=Nan
        sum += jwnum[i]; // sum=sum+jwnum[i]
    }
    return  sum;
}
//调用
let result=jwadd(10,20);
document.write("结果是"+result);
let result2=jwadd(10,20,30);
document.write("结果是"+result2);

匿名函数

let result=jwadd(10,20);
document.write("结果是"+result);
let result2=jwadd(10,20,30);
document.write("结果是"+result2);


 //匿名函数 必须有个指向
 let jwadd=function (...jwnum)
 {   let sum=0;
     for(let i=0;i<jwnum.length;i++) // 注意数组不要超出范围
     {    //js  超出索引的值 Nan空
        // 10+Nan=Nan
         sum += jwnum[i]; // sum=sum+jwnum[i]
     }
     return  sum;
 }
 //调用
 let result=jwadd(10,20);
 document.write("结果是"+result);
 let result2=jwadd(10,20,30);
 document.write("结果是"+result2);