3.2JavaScript网页编程——JavaScript网页编程基础

已于 2022-10-19 16:12:18 修改
阅读量1.6k 收藏 7
点赞数 1
分类专栏： 前端 文章标签： javascript 前端 开发语言
于 2022-10-13 16:09:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanmy_dl/article/details/127289054
版权

这里写目录标题


VScode主题：one dark pro插件

总体JS知识流程

在这里插入图片描述

JS基本知识

JS组成

ECMAscript、DOM、BOM

引入方式：内联、内部形式、外部

如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略！！！如下代码所示：

<body>
	<!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  	<script>
   	 	alert('嗨，欢迎来传智播学习前端技术！');
  	</script>
  	
	<!-- 内部-->
	<button @click="alert('月薪过万')">点击</button>
	
  	<!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  	<script src="demo.js">
    	// 此处的代码会被忽略掉！！！！
  		alert(666);  
  	</script>
</body>

输入输出

一输入三输出：

document.write(‘要输出的内容’); //语句的分号可加可不加
alert(‘要输出的内容’);
console.log(‘xxx’);
prompt(‘请输入您的姓名:’);以弹窗形式提示用户输入，//输入的是一个字符串类型

字面量

在这里插入图片描述

let（推荐）和var（面经有）

以下是使用 let 时的注意事项：

  1. 允许声明和赋值同时进行
  2. 不允许重复声明
  3. 允许同时声明多个变量并赋值
  4. JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：
在这里插入图片描述

变量（标识符）规则（3+1（不能数字开头））

  1. 只能是字母、数字、下划线、$，且不能能数字开头
  2. 字母区分大小写，如 Age 和 age 是不同的变量
  3. JavaScript 内部已占用于单词（关键字let、var或保留字int等）不允许使用
  4. 尽量保证变量具有一定的语义，见字知义，推荐小驼峰后面单词首字母大写

typeof 关键字检测数据类型

<script> 
    // 检测 1 是什么类型数据，结果为 number
    document.write(typeof 1);

	// typeof 结合字符串隐式转化
	let num = 10
	console.log(typeof num + '11') // number11
	console.log(typeof(num + '11')) // string
	console.log(typeof(num + +'11')) // number
</script>

JS数据类型

注：JavaScript 中变量的值决定了变量的数据类型

  • 注意是number不是integer
  • undefine未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

在这里插入图片描述
在这里插入图片描述

<script>
	let temperature = -40; // 负数
	document.write(typeof temperature); // 结果为 number
	
	// 只声明了变量，并末赋值
	let tmp;
	document.write(typeof tmp); // 结果为 undefined
</script>

模板字符串${age}

  • 字符串拼接比较麻烦，直接用模板字符串
  • 模板字符串可以加标签，可以设置样式
<head>
	<style>
		span {
		color: pink;
	</style>
</head>
<body>
	<script>
		let age = 81
		document.write(`我今年<span> ${age + 1} </span>岁了`)
	</script>

</body>

数据类型的转换

  • 为什么要进行数据类型的转化

隐式的转换


在这里插入图片描述

  • 一些例子
    在这里插入图片描述

显示的转换——number

  • 通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。
  • parseInt()只保留整数部分、parseFloat()会保留小数
  • Number和parseFloat的区别,前者不成功会NAN，后者只留下数值（所以经常被用于过滤单位）parseFloat(‘100px’)是100，但是前面也有字母则不行了

// 并不是所有的值都可以被转成数值类型
let str = ‘hello’;
// 将 hello 转成数值是不现实的，当无法转换成
// 数值时，得到的结果为 NaN （Not a Number）

显示的转换2_string

  • 通过String(变量),例如，String(10)
  • 通过变量age.toString()
  • 或者变量age.toString(2),括号里面是二进制的意思

表格变量例子

在这里插入图片描述
在这里插入图片描述
弹窗3个输入数据后随输入数据渲染了这样的表格
在这里插入图片描述

运算符

  • 以后判断要用===，开发常用，要值和类型都一样
  • 还有最好用!==
    在这里插入图片描述

console.log(5 == ‘5’) // true，只要值一样，不管数据类型
console.log(5 === ‘5’) //false

  • NaN不等于任何值，包括它本身
  • 尽量不要比较小数，因为小数有精度问题，例如 0.1 + 0.2 === 0.3这种false 可能是0.3000000000004
  • 不同类型之间比较会发生隐式转换

逻辑运算符里的短路(中断与否)（5个假的），先算&&后||

  • 逻辑中断原因：通过左边能得到整个式子的结果，因此没必要再判断右边
  • 运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值
    在这里插入图片描述

特殊的几个为假的：undefine、null、0、false、‘’ 这五个和&&直接不用判断后面 和 ||直接看后面，（nan是非数值，所以不考虑，一般也可以暂且看做false，在if条件里面也是）

当传入的没有参数，一般undefine+undefine=NAN
为了防止这种报错，就用 || 进行一个处理，这样undefine || 0 是0…

在这里插入图片描述

先一元运算符，再算逻辑运算符，在逻辑中先算&&，再算||

在这里插入图片描述

表达式和语句

程序三大流程控制语句：顺序、分支（if、三元、swich）、循环

在这里插入图片描述

案例——数字补0

在这里插入图片描述
其实0也可以不加引号,prompt
在这里插入图片描述

case

简单个值用swich直接找，快。
有范围就用多分支吧
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
如果是字符串相应的都要换
在这里插入图片描述

在这里插入图片描述

简易计算器

在这里插入图片描述

浏览器断点

打了要刷新页面，重新执行，不要了再点去掉即可。
在这里插入图片描述

在这里插入图片描述

循环

continue,直接退出本次循环，不再执行后面的语句，进行下一次循环
break,退出所有循环，结束
在这里插入图片描述

数组操作（增push\unshift删pop\shift\slice改查）

在这里插入图片描述

  • 增push\unshift

let arr = []就初始化定义了一个空数组

1.数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度，例如arr.push(‘ewer’,‘rewt’)，添加之后是[…,‘ewer’,‘rewt’]
2.arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度arr.unshift(‘ewer’,‘rewt’)，添加之后是[‘ewer’,‘rewt’,…]

  • 删pop\slice(应用场景：抽奖、删除指定商品）

数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值,无参数
数组. shift() 方法从数组中删除第一个元素，并返回该元素的值,无参数
数组. splice(start, delectCount) 方法 删除指定元素,起始位置+删几个（如果delectCount省略则默认从指定的起始位置删除到最后）

shift是删除、unshift就是加

综合案例

在这里插入图片描述

在这里插入图片描述

匿名函数

将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式

在这里插入图片描述
在这里插入图片描述

使用场景（web API中）
在这里插入图片描述

在这里插入图片描述

立即执行函数

场景介绍: 避免全局变量之间的污染，无需调用，立即执行，其实本质已经调用了，多个立即执行函数之间用分号隔开

前面括号是定义，传入的函数是形参，后面的括号是调用执行，里面是实参
第二种形式也是哦，把括号放里面了
在这里插入图片描述

应用场景

在这里插入图片描述

案例——时、分、秒

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

参数个数!

在这里插入图片描述

对象

  • 对象的访问
    在这里插入图片描述
    在这里插入图片描述
  • 对象的改变，有就改，无就加
    在这里插入图片描述
  • 对象的遍历
    obj.k是去找属性名为k的
    在这里插入图片描述
    在这里插入图片描述

表格渲染数据

  • 表格

在这里插入图片描述
数据是
在这里插入图片描述
先写表头表尾
在这里插入图片描述
JS渲染中间部分
在这里插入图片描述

Math内置对象

在这里插入图片描述
round是四舍五入（就近取整，.5的就往大的取，负数也是大的取）
在这里插入图片描述

任意范围随机数

random是包括0不包括1的，注意有个floor
在这里插入图片描述

案例——根据数组对象渲染排版

根据数据个数渲染li，使用document.write(``)里面写li

在这里插入图片描述

其他补充JS知识

在这里插入图片描述
在这里插入图片描述

  • 简单数据类型存放在栈里面的是值
  • 引用类型变量（栈空间）里存放的是地址

堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中
的栈；
简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
引用数据类型存放到堆里面

在这里插入图片描述
如果修改其中一个的值，另一个也会变
在这里插入图片描述

补充

a++ 、a-- 、!非、正负号、就是一元运算符（只需要自己运算）

3+4的加号就是二元运算符（需要两个运算符一起参与）

三元运算符（相当于简写的if else）需要三个：条件 ? 满足条件的代码 ：不满足条件的代码
还可以 let re = 条件 ? 满足条件的代码 ：不满足条件的代码，进行赋值

prompt()的获取输入默认是字符串类型，可以+prompt()获取就是数字类型了，括号里面可以加提示字符串

冒泡排序

在这里插入图片描述

return 只能返回一个值，要么用数组封装
在这里插入图片描述

lanmy_dl
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript网页编程
m0_73198722的博客
09-18 877
JavaScript 基础认知
javascript代码实现选项卡（14行js代码）
十九万里的博客
04-03 571
一html部分 <div id="main"> <!-- active是默认选中的div --> <button class="active">11</button> <button>22</button> <button>33</button> <!-- 三个div在css中都设置为none 这里的display：block
javascript 常用代码大全(超级收藏，强烈推荐)（４）
weixin_34150830的博客
10-08 264
转载自：巴士飞扬-技术BLOG : [url]http://www.busfly.cn/[/url] /* 随风JavaScript函数库 请把经过测试的函数加入库 */ /******************** 函数名称：StrLenthByByte 函数功能：计算字符串的字节长度，即英文算一个，中文算两个字节 函数参数：str,为需要计算长...
JavaScript语言（网页编程）
最新发布
ZangLing的博客
04-11 708
一、基本语法 二、控制语句 三、函数与对象 四、事件机制 五、DOM编程
JavaScript大作业 制作简单的程序员个人博客网站（web前端网页制作课作业）
qq_38515380的博客
04-27 271
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构
ASP.NET MVC 3高级编程
08-02
《asp.net mvc 3高级编程》 第1章 入门 1 1.1 asp.net mvc简介 1 1.1.1 asp.net mvc如何适应asp.net 1 1.1.2 mvc模式简介 2 1.1.3 mvc在web框架中的应用 2 1.1.4 asp.net mvc 3的发展历程 3 1.1.5 razor视图...
精通qt4编程（源代码）
03-17
\第3章 基础窗口部件——QWidget 35 \3.1 Qt设计器绘制窗口部件 35 \3.1.1 Qt设计器基础 35 \3.1.2 绘制窗口部件 40 \3.2 程序中引入自定义窗口部件 47 \3.2.1 直接使用方式 47 \3.2.2 单一继承方式 49 \3.2.3 多...
有关美食网站的基础项目（附代码）
12-25
本教程将详细讲解一个基于Java、JSP和JavaScript的大数据项目——美食网站的开发过程。该项目旨在为初学者提供一个实际操作的平台，以加深对这些技术的理解。 ### 第一章 选题背景及意义 美食网站的建设旨在搭建一...
JavaScript高级教程
09-10
3.2 对象应用..............................................59 3.2.1 声明和实例化..............................................59 3.2.2 对象引用..............................................59 3.2.3 ...
写给大家看的面向对象编程书（第3版）.[美]Matt Weisfeld(带详细书签).pdf
12-21
3.2 错误处理 44 3.2.1 忽略问题 45 3.2.2 检查问题并中止应用 45 3.2.3 检查问题并尝试恢复 45 3.2.4 抛出异常 45 3.3 作用域概念 47 3.3.1 局部属性 48 3.3.2 对象属性 49 3.3.3 类属性 50 3.4 操作符...
用js做个简单的网页
09-30
简单的网页
11个精美网页——Web前端开发技术课程大作业，html简单网页代码
qq__3200628753的博客
12-20 7022
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Websto...
全网最火个人网页制作教程【免费提供源代码】
孤客科技
03-19 1951
个人网页，代码易懂，非用于买卖，一旦发现后果自负，到现在还不会做个人网页的看教程，（包教收费）
JavaScript的prompt函数的使用
weixin_63066781的博客
12-12 1249
记得点赞，加关注哦！
web编程技术
benkehanmu的博客
01-12 1129
IIS  控制面板 XAMPP  
javascript入门实例：实现简单网页功能
m0_38045338的博客
01-02 4992
这两天帮朋友做一个简单的小网页，由于是初次接触HTML5和css，只实现了最基本的功能，后续会再对功能样式进行填充优化，这里记录一下。 实现效果：可通过切换上面的导航栏实现左侧导航栏的切换，并通过左侧导航栏的切换实现右侧具体导航内容的展示。 代码如下： <!DOCTYPE html> <html lang="ch"> <head> <meta ...
网页设计之JavaScript
qq_53677566的博客
10-05 7303
文章目录JavaScript笔记一.JavaScript概述1.JavaScript历史2.javaScript与java的区别3.javaScript的作用4.JavaScript与html,css关系二.基本语法1.位置2.变量3.控制语句三.函数，内置对象与事件1.函数基本语法：全局函数：2.内置对象（1）String字符串（2）Aarry数组（3）Date对象（4）Math对象3.事件四.Event对象五.HTML Dom对象1.获得标签的四种方式2.HTML DOM - 改变 HTML内容3.HT
【网络编程】从零开始搭建一个自己的网站(静态网页)
AnChenliang_1002的博客
06-15 5583
最近突然对做一个自己的网站，经过不懈的查资料总算是实现了一个简单的网站，实现后会发现其实挺简单的，即使是不懂编程也能很轻松的完成，毫不夸张的说，熟悉的话十来分钟就能完成。现记录一下过程，按照以下操作，一行代码都不用写也能轻松实现：本文为了主要为了演示创建网站的过程，所以对网页的内容只是简单实现了一下，只有简单的内容+图片；首先写一个html文件，代码如下；可以在桌面新建一个名为web的文件夹，在文件夹里新建一个txt文件，然后把以下代码复制进去，最后把名字改为，然后在文件夹里放一张你想在网页上展示的图片，名
《javascript数据可视化编程》—— 第4章
05-11
《Javascript数据可视化编程》第4章主要介绍了D3.js的数据绑定方式和数据更新逻辑。数据绑定是D3.js的重要特性之一，通过数据绑定可以将数据和DOM元素进行关联，使得数据更新时DOM元素可以及时响应变化，实现数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lanmy_dl

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值