前端快速入门——JavaScript变量、控制语句

1.JavaScript 定义

JavaScript 简称 JS.

JavaScript 是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果,增加用户与网页的交互性。

作为一种客户端脚本语言,JavaScript 可以直接嵌入 HTML,并在浏览器中执行。与 HTML和 CSS 不同,JavaScript 使得网页不再是静态的,而是可以根据用户的操作动态变化的。

2.JavaScript 作用

JavaScript 在前端开发中扮演着重要的角色,其应用领域包括但不限于:

客户端脚本:用于在用户浏览器中执行,实现动态效果和用户交互

网页开发:与 HTML和 CSS 协同工作,使得网页具有更强的交互性和动态性

后端开发:使用 Node.js,JavaScript 也可以在服务器端运行,实现服务器端应用的开发。

3.JavaScript 导入方式

(1)内联

html 复制代码
<body>
    <h1>JS导入方式</h1>
    <script>console.log('hello world')</script>
</body>
<!-- 或者在head中写 -->

在浏览器中按F12即可

(2)外联

html 复制代码
<head>
    <script src="/myscript.js"></script>
</head>

myscript.js

JavaScript 复制代码
console.log('Hello, world! This is a simple JavaScript file.');

4.JavaScript变量与数据类型

JavaScript 有三种变量声明方式:

var:声明一个变量,可选择将其初始化为一个值。

let:声明一个块级作用域的局部变量,可选择将其初始化为一个值。

const:声明一个块级作用域的只读命名常量。

在应用程序中,你将变量用作值的符号名。变量的名字又叫做标识符,其需要遵守一定的规则。

JavaScript 标识符通常以字母、下划线(_)或者美元符号($)开头;后续的字符也可以是数字(0-9)。因为 JavaScript 是区分大小写的,所以字母包含从 A 到 Z 的大写字母和从 a 到 z 的小写字母。

html 复制代码
<body>
    <script>
        var x;
        let y=5;
        const z=10;
        let name ='你好'
        console.log(x,y,z,name);
        console.log(typeof x,typeof y,typeof z,typeof name);
    </script>  
</body>

5.JavaScript控制语句

(1)条件语句

html 复制代码
 <script>
        let time=12;
        if(time<12){
            console.log('还可以再玩一会儿')
        }
        else{
            console.log('该睡觉了')
        }
    </script>  

(2)循环

html 复制代码
    <script>        
        let sum=0
        for(let i=0;i<10;i++){
            sum +=i;
        }
        console.log(sum);

    </script>
html 复制代码
    <script>
        let sum=0;
        while(sum<10){
            sum +=1;
        }
        console.log(sum);

    </script>
html 复制代码
    <script>
		for(let i=0;i<10;i++){
            if(i%2==0){
                console.log(i+'是偶数');
                continue; // 跳过当前循环的剩余部分,继续下一次循环
            }
            if(i==5){
                console.log('跳出循环');
                break; // 终止整个循环
            }
            console.log(i);
        }
    </script>
相关推荐
七灵微10 分钟前
ES6入门---第三单元 模块三:async、await
前端·javascript·es6
七灵微3 小时前
ES6入门---第二单元 模块五:模块化
前端·ecmascript·es6
m0_616188494 小时前
vue3 - keepAlive缓存组件
前端·vue.js·缓存
先鱼鲨生4 小时前
【Qt】初识Qt
开发语言·qt
chao_7894 小时前
QT开发工具对比:Qt Creator、Qt Designer、Qt Design Studio
开发语言·qt
lh_12544 小时前
Uni-app 组件使用
前端·javascript·uni-app
Kx…………5 小时前
Day3:设置页面全局渐变线性渐变背景色uniapp壁纸实战
前端·学习·uni-app·实战·项目
Q_Boom5 小时前
前端跨域问题怎么在后端解决
java·前端·后端·spring
搬砖工程师Cola5 小时前
<Revit二次开发> 通过一组模型线构成墙面,并生成墙。Create(Document, IList.Curve., Boolean)
java·前端·javascript
林十一npc5 小时前
Fiddler抓取APP端,HTTPS报错全解析及解决方案(一篇解决常见问题)
android·前端·网络协议·https·fiddler·接口测试