web前端：10_初识JavaScript

最新推荐文章于 2024-10-08 12:21:22 发布
最新推荐文章于 2024-10-08 12:21:22 发布
阅读量40 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45906368/article/details/131691574
版权

1,js的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的基本使用</title>
    <!--  -->
</head>
<body>
    <!-- 外部导入，导入一个js文件 -->
    <script  src="demo.js"></script>

    <!-- 内部标签。直接把js代码写在script标签里 -->
    <script>
        alert("多喝热水！")
    </script>

    <!-- 外部导入，从网络里实时获取一个js文件的源码 -->
    <!-- js网址：https://www.bootcdn.cn/jquery/ -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.slim.js"></script>
    
</body>
</html>

2,js的基本输入输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js基本输入输出</title>
</head>
<body>
    <script>
        // 我是一个单行注释

        /*多行注释
        且无需*/

        // 输出语句  document.write(内容)  
        document.write(666)
        document.write('<hr>')
        document.write('<b>bewf</b>')
        document.write(666)

        // alert(内容)  弹窗 ，在网页中显示一个弹窗
        alert("ehc")

        // console.log（内容）  在控制台输出日志.主要用来调试测试内容（内容出现在控制台）
        console.log(21639)
        console.log("而维持")

        // 输入语句  prompt('提示文本')     在进入网页时，弹出输入框。可以上让用户输入内容。输入框里可以提示文本
        // prompt()
        prompt("你有对象吗？")

        // 可以用输入进行赋值 prompt得到的数据为字符串类型
        let name=prompt('请输入你的名字')
        alert('欢迎你' +name) 
    </script>
</body>
</html>

3，js变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js变量</title>
</head>
<body>
<!-- var/let = 声明符/标识符  在声明变量前需要加上 -->
<script>
    // 1,声明变量:  let 变量名   ;  let name='zxr' 
        let age
        let name = 'zxr'
    // 2,声明多个变量：
        let sex="男",marry="未婚"

    // 3，输出变量  单个  多个
        alert(name)
        document.write(sex)
        console.log(name,marry)
    
    // 4，用输入语句对变量进行赋值
    // 变量名声明但没有值，默认值为undefined,未定义。不报错
    let money = prompt("请输入你的家人")

    // 1，查看数据类型
    console.log(name,typeof(name))


</script>
    
</body>
</html>

 4,js数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // number数据类型
        let age = 27
        let height = 121.4
        console.log(age,typeof age)
        console.log(height,typeof height)

        // string 字符串数据类型  ` ''  ""
        // `` 反引号，模板字符串，用来格式化输出
        let name = '宝贝计划会不会基本不i'
        console.log(name,typeof name)
        console.log(`你好，我叫${name},我今年${age}岁`)

        // boolean 布尔类型  逻辑判断 true/false
        let is_vip = true
        // let is_vip = false
        console.log(is_vip,typeof is_vip)


        // undefined 未定义类型 是值也是类型  
        let test
         console.log(test,typeof test)

        // null类型  空  输出为空对象object
        let gf = null
        console.log(gf,typeof gf)

    </script>
    
</body>
</html>

5,js转义字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS转义字符</title>
</head>
<body>
    <script>
        // 1,  \n 换行
        // 2,  \t 制表符缩进
        // 3,  \\  正常输出一个\
        // 4,  \'   正常输出一个'
        console.log("要\n多喝\t热水\\哦\'  ")  //转义字符用在控制台中

    </script>
    
</body>
</html>

6，js类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // 加法首先理解为拼接，其他本来作用
        console.log(1 + '1')   //  + 拼接  11
        console.log( 1 - '1')  //减法 0

        // 强制类型转换   NaN也是数值类型
        let age = Number(prompt("请输入你的年龄"))
        console.log(age + 9,typeof age)

        let test = "多喝热水"
        test = Boolean(test)
        console.log(test,typeof test)

        // parseInt  parseFloat 数据转换为数值。前取整数，后保留小数
        let num = 12.3
        num1 = parseInt(num)  
        num2 = parseFloat(num)
        console.log(num,typeof num)
        console.log(num1,num2)
        
    </script>
</body>
</html>

7，js运算符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(10%3)
        console.log(11%3)

        let i = 8
        console.log(++i)  //9
        console.log(i++)  //9

        
    </script>
    
</body>
</html>

作业1：自我介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        let name= "张三"
        let age = 23
        let sex = "女"
        let city = "重庆"
        let hobby = "学习"
        let bf = "没有"
        console.log(`我叫${name}\今年${age}岁啦！\t我是${sex}生\n来自${city}\n我的爱好是${hobby}\n${bf}男朋友`)
    </script>
</body>
</html>

作业2：输入提示框输入名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        let name = prompt("请输入你的姓名")
        document.write(name)
    </script>
</body>
</html>

 作业3：输入输出方式，打出几个朋友的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        let name1 = prompt("请输入你的朋友")
        
        let name2 = prompt("请输入你的朋友")
        
        let name3 = prompt("请输入你的朋友")
        
        let name4 = prompt("请输入你的朋友")

        console.log(`我的朋友有${name1}\n,${name2}\n,${name3}\n,${name4}`)
        
    </script>
</body>
</html>

weixin_45906368
关注
Web前端-初识React框架
qq_25592087的博客
11-07 616
官方说明：用于构建用户界面的 JavaScript 库。
初识JavaScript.md
09-02
对JavaScript的简单认识
web前端：初识HTML、JavaScript、CSS
qq_45020131的博客
03-05 330
这篇blog应该算是复习资料吧，虽然笔记整理的有点乱。 接下来是一段HTML代码, 我的笔记都是根据这部分代码来写的 <!DOCTYPE html> <html lang="zh"> <head> <link rel="stylesheet" href="./demo.css"> <style> <!-- style...
WEB前端(3)—— 初识JavaScript
qq_46187519的博客
08-19 1133
什么是JavaScript: JavaScrpt,是一种直译式脚本语言，是一种动态类型，弱类型，基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，是浏览器的一部分，广泛用于客户端的脚本语言中，最早是在HTML（标准通用标记语言下的一个应用）网页上使用的，用于为HTML网页增加动态功能。目前JavaScript 被广泛用于Web应用开发，常用于为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。 JavaScript的特点： JavaScript 具有以下四个方面的特
web前端学习笔记：初识Web前端开发
薛定谔的猫
03-03 346
行业发展与岗位变化 Web访问流程 网站-----网站与Web应用 网页设计师/网页制作员-----Web前端工程师 PC端-----移动端 Web端产品开发流程 相关岗位名称 招聘要求例 相关理论--万维网 万维网（World Wide Web）：简称WWW或3W，是目前互联网上最流行的一种基于超文本形式的资源组织形式。 万维网基于三个机制向用户提供资源： （1）协议 协议是一组标准的规则，用于实现通过通信信道发送信息所需的数据表示、信号发送、身份验证及错...
入门学习JavaScript_初识JavaScript
10-24 8951
JavaScript概述 JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页上，大多数的交互逻辑几乎都是由JavaScript实现的。 语言 作用 及说明 HTML 结构_决定网页的结构和内容，相当于人的身体 CSS 样式-_决定网页呈现给用户的模样，相当于给人穿衣服，化妆 JavaScript 行为_实现业务逻辑和页面控制，相当于人的各种动作 ...
前端_Vue_1.初识Vue
三千幻想乡
12-05 863
以前写桌面程序比较多，最近发现客户现场有许多网页端的系统，客户说这种网页端系统非常方便，输个IP就能访问了。确实，这是B/S相对于C/S一个很大的优势。 那好嘛，既然客户喜欢，也为了增加个人竞争力，我也得做起来，顺便扩充一下自己的技术栈。但我已经很久没接触网页了，上次写的时候还是用最原始的HTML、CSS和JS。 于是，第一步我决定进行一个技术选型，了解一下现在有哪些较新的网页技术。通过一些招聘网、技术群、百度，我发现 Vue 和 React ，这两种技术出现的比较多。所以我决定从这两者中进行选择。稍微了解
编程学习之路：Web前端初识
sth0246的博客
02-19 117
前言 大一新生在第一学期初识编程，刚开始接触编程语言。温故而知新，在学习一段时间编程语言之后是时候谈一下对编程语言的认识啦。因为是从/web前端接触的编程，所以本篇文章会从对web前端三剑客语言的认识开头以三种语言的特点具体叙述，最后叙述自己对编程的理解。 Web初识 网页上的内容是由内容、样式、逻辑共同组合而成的。分别就是我们常用的Html、Css、Javascript。对于专业的前端工程师他们通常会用jQuery等库简化JavaScript的写法。网页上展示的内容简白说是渲染过后的内容。之前也有个小问题
【Nodejs】初识Node.js Web应用开发框：Express_03
青春木鱼的博客
05-06 619
本文主要内容为Express框架及其路由、路由器的创建与应用。Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站
web前端学习（三十一）——初识JavaScript
热门推荐
★★光亭★★
02-11 1万+
web前端学习（三十一）——初识JavaScript
Web前端开发技术-初识JavaScript.pptx
07-07
JavaScript是Web前端开发的核心技术之一，它是一种功能强大的编程语言，专为创建交互式Web页面而设计。在当今数字化世界中，JavaScript几乎无处不在，无论是个人电脑还是移动设备上的网页，其丰富的交互效果和动态...
Web前端框架应用：第1章 Vue基础入门-概述.pptx
06-06
JavaScript：JavaScript的功能主要包括实现页面逻辑、行为、动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。 jQuery：通过对JavaScript代码的封装，使得DOM、事件处理、动画效果、...
Web前端框架应用：第1章 Vue基础入门-开发环境.pptx
06-06
JavaScript：JavaScript的功能主要包括实现页面逻辑、行为、动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。 jQuery：通过对JavaScript代码的封装，使得DOM、事件处理、动画效果、...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1166
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1269
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
最新发布
m0_73388125的博客
10-08 1204
数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 201
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
《ASP.NET Web Forms 实现短视频点赞功能的完整示例》
Envyᥫᩣ的博客
10-05 1783
Play.aspx前端页面使用ASP.NET Web Forms和jQuery，后端使用C#和AJAX进行数据交互。希望本文对你有所帮助，如果有任何问题或建议，欢迎留言交流！
JavaScript设计模式解析：初识状态模式
本书的所有示例均来源于作者的实际开发经验，具有很高的实用价值，适合各层次的Web前端开发者，特别是希望晋升为架构师的中高级程序员。书中详细的内容和实战案例，有助于读者深化对设计模式的理解，提升开发技能。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值