day33_js

今日内容

0 复习昨日

1 JS概述

2 JS的引入方式

3 JS语法
3.1 变量
3.2 基本数据类型
3.3 引用类型
3.4 数组类型
3.5 日期类型
3.6 运算符(算术运算,逻辑,关系运算,三目运算)
3.7 分支
3.8 循环
3.9 函数(重点)
3 常见弹窗函数
alter,confirm,prompt

0 复习昨日

1 盒子模型

  • 对div进行设置,当盒子
  • border 边框
  • 内边距/填充 padding
  • 外边距 margin

2 浮动

  • 属性float, 值left,right
  • 用来做布局
  • 经典的使用,可以实现文字环绕图片
  • 还可以实现盒子在一排

3 定位

  • 只有定位后,才可以使用方位属性(top,bottom.left,right)

  • 相对定位

    • position:relative
    • 相对于自己原来的位置移动,原来的位置还保留

  • 绝对定位

    • position:absolute
    • 相对于父元素,父元素没有定位,那就相对于body

  • 固定定位

    • position:fixed
    • 相对于浏览器窗口

4 bootstrap

  • 下载源码
  • 导入到当前项目文件
  • 在html文件中使用link引入bootstrap的css样式文件
  • 去官网找css样式,组件复制粘贴就可以啦

1 JavaScript

HTML 写页面展现内容

CSS 用来美化页面

JavaScript 用来让页面有动态效果(轮播图)

JavaScript(JS)是一种脚本语言,主要是配合HTML完成一些页面的动态效果.

  • 脚本: 解释性的,嵌套在其他东西里面的一种
  • 作用是实现动态效果
  • JavaScript这个语言是弱类型

JavaScript这门技术主要包含

  • 基本语法
  • DOM(Document Object Model)对象,其实就是操作HTML标签和CSS样式
  • BOM(Browser Object Model)对象,其实操作浏览器

2 JS的引入

2.1 在标签内写js

  <body><!-- onclick是html的属性,是事件属性,在这里是鼠标点击事件属性值内部写的是js代码alert() 是js的弹窗函数--><button onclick="alert('警告!!!!')">按钮</button></body>

2.2 在文件使用<script>标签引入js

css写样式,需要把style标签写在head标签内

但是写js代码的script标签,可以写在html页面的任何位置,head标签内,body标签内都可,但是一般建议放在后面,越晚加载越好

    <script>alert("<script>标签内执行");</script>

2.3 独立的js文件

1 创建一个后缀为.js的文件

2 文件内写js代码

3 在html文件内使用<script>标签引入该js文件

4 引入js文件的位置,在html中也是任意的

5 作为引入js文件的<script>标签,不能在其中间写js代码

  <body><!-- 引入js文件 --><script src="tk.js"></script></body>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3 JS语法

3.1 变量

变量的使用

  • 声明 , var 变量名;
  • 赋值 , 变量名 = 值;
  • 使用

JavaScript是弱类型语言,声明时不需要设置变量的类型,赋值时就可以赋值任何类型

    <script>// 声明变量var a;// 变量赋值a = 1;// 使用变量// alert(a)// ========================var b = 2; // 赋值整形数字b = "a";   // 可以再改变var c = 3.1; // 赋值浮点型数字var d = "四"; // 赋值字符串var e = true; // 赋值布尔型var f = new Date(); // 赋值对象// 将结果输出到浏览器控制台(F12-Console)console.log("b = " + b);console.log("c = " + c);console.log("d = " + d);console.log("e = " + e);console.log("f = " + f);</script>

ps,浏览器控制台

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.2 基本数据类型

基本类型有数字(number),字符串(string),布尔型(boolean),未定义(undefined),空(null)五种

<script>     var x = 1; // number类型var x2 = 1.1; // number类型var y = "JavaScript"; // string类型var z = true; // boolean型// js有个函数,typeof(),这个函数可以返回变量的类型console.log(typeof x);console.log(typeof x2);console.log(typeof y);console.log(typeof z);console.log(typeof i); // undefined未定义</script>

变量有不同的类型,不同类型使用的作业不一样

  • number类型,数字,那就可以做算术,逻辑运算等 (后续运算时使用)

  • boolean类型,那就可以用于逻辑判断,分支语句,循环等 (后续分支循环时使用)

  • string类型,那就可以使用字符串的方法,对字符串操作(跟java中String操作很像)

    完整的string操作,可以查看APIJavaScript 字符串方法 (w3school.com.cn)

      var y = "Java-Script"; // string类型var j = y.charAt(0); // 根据下标找字符console.log(j);console.log(y.indexOf("a")); // 找到第一个指定字符的下标console.log(y.lastIndexOf("a")); // 找到最后一个指定字符的下标console.log(y.split("-")); // 根据指定字符,拆分字符串,返回字符串数组console.log(y.substring(5)); // 根据指定截取字符串,直到末尾console.log(y.substring(5, 8)); // 根据指定下标截取字符串,[begin,end)// length不是方法,是属性,调用时不用()console.log(y.length); // 获得字符串长度

3.3 引用类型

其实引用类型是借鉴Java中的对象的思想.

JS中的引用类型其实是JSON,后续学框架,工作中JSON是重中之重!非常常见

今天主要学习JSON(杰森)的语法格式,会用JSON定义一个对象

将来使用JSON在前端后后端之间传输数据的

语法格式

  • JSON对象使用大括号,{}
  • 大括号内,是键值对,键值对使用是冒号分割.{key:value}
  • 键正常写,值得写法区分数字,字符串,布尔值,数组,对象等
    • {id:18} 数字直接写
    • {name:“张三”} 字符串需要双引号
    • {sex:true} 布尔值直接写
    • {arr:[1,2,3]} 数组使用[]
    • {obj:{}} 对象使用{}
  • 大括号内,可以同时写多个键值对,中间使用逗号隔开
    • {id:18,name:“李四”,sex:true}
      // json对象,引用类型var student = {id: 1,name: "小胡",sex: true,age: 18,score: [98, 99, 100],teacher: {id: 2,name: "邱哥",age: 18,},};// 取出对象的属性值// 对象.属性 其实是对象.keyconsole.log(student.id);console.log(student.name);console.log(student.sex);console.log(student.age);console.log(student.score);console.log(student.teacher);console.log(student.teacher.name);

3.4 数组类型

数组是用来存储多个数据

  • 创建时可以是空数组,后面也可以继续赋值
  • 数组没有长度限制
  • 数组存储的类型没有限制

创建数组的语法

  • var 名字 = []
  • var 名字 = new Array()

取值赋值的语法

  • 数组名[下标]
   <script>// 创建数组var arr1 = []; // 空数组var arr2 = [1, 2, 3, 4]; // 创建数组,数组有值var arr3 = [1, "二", true, new Date()]; // 创建数组,数组有值,类型不固定var arr4 = new Array(); // 空数组var arr5 = new Array(1, "二", true);console.log(arr1);console.log(arr2);console.log(arr3);console.log(arr4);console.log(arr5);// 数组取值console.log(arr2[0]);console.log(arr2[4]); // 下标越界时,显示未定义// 赋值arr1[0] = 1;arr1[1] = "贰";console.log(arr1);</script>

除了以上基本数组操作之外,JS的数组还有一些方法可以调用

详细可以参考文档JavaScript 数组方法 (w3school.com.cn)

    <script>      var arr6 = [1, 2, 3, 4];// length属性console.log(arr6.length);// toString,数组转字符串console.log(arr6.toString());// join,数组转字符串,以指定符号分割console.log(arr6.join(" - "));// pop() 方法从数组中删除最后一个元素,返回的是被删除的元素console.log(arr6.pop());console.log(arr6);// push() 方法（在数组结尾处）向数组添加一个新的元素：arr6.push(4);console.log(arr6);// ================for (var i = 0; i < arr6.length; i++) {console.log(arr6[i]);}</script>

3.5 日期类型

创建日期对象,

日期对象提供了方法可以获得/设置日期信息

详细信息查看文档JavaScript 日期 (w3school.com.cn),JavaScript 日期获取方法 (w3school.com.cn),JavaScript 日期设置方法 (w3school.com.cn)

    <script>// 创建日期对象var date = new Date(); // 当前时间console.log(date);// 创建时间时指定毫秒值,时间从1970/01/01 00:00:00var date2 = new Date(1000 * 60 * 60 * 24 * 40);console.log(date2);// 以指定年月日创建日期,月份特殊!!!一月是 0。十二月是11。var date3 = new Date(2022, 10, 13);console.log(date3);// 获得日期方法var year = date3.getFullYear(); // 获得年var month = date3.getMonth() + 1; // 获得月,0-11var day = date3.getDate(); // 获得日var week = date3.getDay(); // 周,0-6 周日是0,周一1,周六6console.log(year + "/" + month + "/" + day + "周" + week);// 设置日期date.setFullYear();// 按照本地日期格式输出日期var dateString = date.toLocaleString();console.log(dateString);</script>

3.6 运算符

算术运算

关系运算

逻辑运算

三目运算

以上这些运算操作,与java中操作基本一样

算术运算

 <script>// ================算术运算=================// + - * / % ++ --console.log(1 + 1);console.log(1 + "1" + 1);console.log(1 - 1);console.log(1 * 10);console.log(10 / 2);console.log(10 / 3); // 除法,除不尽没有取整!@!!console.log(10 % 3);var a = 1;a++;console.log(a);var b = 1;//   var c = b++;var c = ++b;console.log(c);var d = 1;d += 1; // 等价于 d = d + 1console.log(d);</script>

关系运算

	<script>     // ================关系运算=================// > < >= <= == != ===// 关系运算的结果是布尔值: true / falseconsole.log(1 > 0);console.log(1 < 0);console.log(1 <= 0);console.log(1 >= 0);// == 判断[值]是否相等console.log("1 == 1   " + (1 == 1));console.log("1 == '1'  " + (1 == "1"));// === 判断[值]和[类型]是否都相等console.log("1 === '1'  " + (1 === "1"));console.log("1 === 1  " + (1 === 1));</script>

逻辑运算

 <script>     // &&  || !// && 一错就错,全对才对,也有短路效果console.log(1 > 0 && 1 > 0);var a = 1;console.log(1 < 0 && a++ > 1);console.log("a = " + a);// || 一对就对,全错才错,也有短路效果console.log(1 < 0 || 1 > 0);var b = 1;console.log(1 > 0 || b++ > 0);console.log(b);// !取反console.log(!true);</script>

三目运算

	<script>      console.log("================三目运算=================");// 前面的表达式如果为true,就执行冒号左边// 如果前面的表达式为false,就执行冒号后边console.log(1 > 0 ? "111" : "000");</script>

3.7 分支

if

ifelse

if-elseif-elseif-else

switch

    <script>var a = 1;if (a > 0) {console.log("a  >  0");}if (a < 0) {console.log("a < 0");} else {console.log("a > 0");}if (a > 0) {console.log("a > 0");} else if (a < 0) {console.log("a < 0");} else {console.log("a == 0");}// switchcase也一样...</script>

3.8 循环

while

dowhile

for

    <script>// 输出1-10var i = 1;while (i < 11) {console.log(i);i++;}// 输出100 110 ---200var j = 100;do {console.log(j);j += 10;} while (j <= 200);// 求和1-100var sum = 0;for (var k = 1; k <= 100; k++) {sum += k;}console.log("sum = " + sum);</script>

3.9 函数(重点)

函数就是java中方法的概念,用来完成某些功能的.

定义函数的语法

function 函数名(参数1,参数2,...) {// 执行代码
}
/*
1. function是固定,每个方法都需要设置
2. 没有定义返回值类型,也没有void
3. 函数名,见名知意
4. 参数直接写参数名,没有 数据类型,也没有var
5. 如果要返回数据,通过return 值;返回
*/

    <script>// 1 无参无返回值function fun1() {console.log("无参无返回值...");}// 调用方法,方法名直接调用fun1();// 2 有参无返回值function fun2(a) {console.log("fun2执行");console.log(a);}// 方法有参数,调用时不传参数,方法能执行,但是变量显示未定义// 方法有参数,调用时实参多于形参,方法能执行,多余的参数无意义fun2(10, 20);// 3 无参有返回值function fun3() {return 200;}var result = fun3();console.log(result);// 4 有参有返回值// 设计方法,传入2个参数,相加后返回</script>

特殊的函数定义:匿名函数

      // 5 匿名函数,主要用于配合事件操作var obj = function () {console.log("匿名函数");};

4 常见的弹窗函数

4.1 警告框

    <script>function fun1() {alert("没有权限!");}fun1();</script>

4.2 确认框

    <script>function fun2() {// 该函数有返回值,是ture/false// 点击确定,返回true,点击取消返回fasleif (confirm("确定要删除?")) {alert("删除成功!!");} else {alert("取消删除!");}}fun2();</script>

4.3 输入框

<script>     function fun3() {// 会弹出对话框,输入值后点击确定返回输入框的值// 点击取消返回的就是nullvar ret = prompt("请输入身份证号!");console.log(ret);}fun3();</script>

function fun1() {
alert(“没有权限!”);
}
fun1();


## 4.2 确认框```html<script>function fun2() {// 该函数有返回值,是ture/false// 点击确定,返回true,点击取消返回fasleif (confirm("确定要删除?")) {alert("删除成功!!");} else {alert("取消删除!");}}fun2();</script>

4.3 输入框

<script>     function fun3() {// 会弹出对话框,输入值后点击确定返回输入框的值// 点击取消返回的就是nullvar ret = prompt("请输入身份证号!");console.log(ret);}fun3();</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/653024.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

兄弟MFC-8515DN黑白激光多功能一体机硒鼓及粉盒清零方法

兄弟MFC-8515DN黑白激光多功能一体机硒鼓及粉盒清零方法

耗材信息&#xff1a; 硒鼓DR-3350&#xff1a;约30000页&#xff1b; 墨粉盒TN-3335&#xff1a;约3000页【A4纸5%覆盖率】&#xff1b; 高容量墨粉盒TN-3385&#xff1a;约8000页【A4纸5%覆盖率】&#xff1b; 超高容量墨粉盒TN-3395&#xff1a;约12000页【A4纸5%覆盖率】&a…
阅读更多...
php项目下微信小程序对接实战问题与解决方案

php项目下微信小程序对接实战问题与解决方案

一.实战问题与方案总结 1.SQL查询条件是一组数&#xff0c;传参却是一个字符串导致报错&#xff0c;如下 SQLSTATE[HY093]: Invalid parameter number (SQL: select count(*) as aggregate from car_video where province_id in (1492) and city_id in (1493) and county_id …
阅读更多...
个体诊所电子处方系统设计，社区门诊处方开单管理系统软件教程

个体诊所电子处方系统设计，社区门诊处方开单管理系统软件教程

个体诊所电子处方系统设计&#xff0c;社区门诊处方开单管理系统软件教程 一、前言 以下软件程序操作教程以 佳易王诊所电子处方管理系统软件V17.3为例说明 如图&#xff0c;在基本信息设置里&#xff0c;可以设置处方配方模板&#xff0c;这样在开电子处方的时候可以一键导入…
阅读更多...
计算机提示缺失dll文件怎么办？那种dll解决方法更值得推荐

计算机提示缺失dll文件怎么办？那种dll解决方法更值得推荐

当在运行游戏&#xff0c;软件程序的过程中遇到“找不到dll”的情况时&#xff0c;这实际上意味着系统或应用程序无法定位并加载必要的动态链接库文件&#xff08;DLL&#xff09;&#xff0c;从而无法顺利完成预期的功能调用和执行流程。这种问题的发生可能会引发一系列严重后…
阅读更多...
Selenium + Django + Echarts 实现亚马逊商品数据可视化爬虫项目

Selenium + Django + Echarts 实现亚马逊商品数据可视化爬虫项目

最近完成了1个爬虫项目&#xff0c;记录一下自己的心得。 项目功能简介 根据用户输入商品名称、类别名称&#xff0c;使用Selenium, BS4等技术每天定时抓取亚马逊商品数据&#xff0c;使用Pandas进行数据清洗后保存在MySql数据库中. 使用Django提供用户端功能&#xff0c;显…
阅读更多...
【electron】安装网络问题处理

【electron】安装网络问题处理

目录 场景排查问题排查结论electron 安装失败解决方案 新的问题electron-builder 打包失败处理 场景 在mac上使用electron进行代码开发的时候&#xff0c;无法正常下载与electron、electron-builder相关的依赖 排查问题 是不是因为没有翻墙导致资源无法下载是不是没有设置正…
阅读更多...
MC3172 串口模块

MC3172 串口模块

MC3172 支持12个串口对应关系如下 串口模块初始化 第一个是uart0~11 inpin RX 脚 管脚号 outpin TX脚 管脚号 baud 波特率 read_ptr ,数据读取指针 void uart_init(u32 uart_num,u8 in_pin,u8 out_pin,u32 baud,u8* read_ptr) {INTDEV_SET_CLK_RST(uart_num,(INTDEV_RUN|…
阅读更多...
HCIP-三层架构实验

HCIP-三层架构实验

实验拓扑 实验需求 实验思路 配置IP地址 链路聚合 vlan配置 配置生产树 实验步骤 配置IP地址 以R1为例 <Huawei>sys [Huawei]sys r1 [r1]int g0/0/02 [r1-GigabitEthernet0/0/2]ip address 12.1.1.1 24 Jan 28 2024 17:09:03-08:00 r1 %%01IFNET/4/LINK_STATE(l…
阅读更多...
一天吃透面试八股文

一天吃透面试八股文

内容摘自我的学习网站&#xff1a;topjavaer.cn 分享50道Java并发高频面试题。 线程池 线程池&#xff1a;一个管理线程的池子。 为什么平时都是使用线程池创建线程&#xff0c;直接new一个线程不好吗&#xff1f; 嗯&#xff0c;手动创建线程有两个缺点 不受控风险频繁创…
阅读更多...
vue中使用jweixin-module

vue中使用jweixin-module

目录 一&#xff1a;安装jweixin-module 二&#xff1a;后端配置 三&#xff1a;获取签名并注入配置 四&#xff1a;调用微信JS接口 在Vue项目中使用jweixin-module&#xff08;或通常称为jweixin&#xff0c;即微信JS-SDK的封装&#xff09;来调用微信提供的JS接口&#x…
阅读更多...
二叉树

二叉树

目录 1翻转二叉树 2对称二叉树 3二叉树的深度 最大深度 最小深度 4二叉树的结点数量 完全二叉树的结点数量 5平衡二叉树 6 中序 后序求前序 二叉树结构体如下&#xff1a; struct freenode {int data;struct freenode *lchild, *rchild;//左孩子 右孩子 }T; 1翻转二…
阅读更多...
每日OJ题_算法_前缀和②_牛客DP35 【模板】二维前缀和

每日OJ题_算法_前缀和②_牛客DP35 【模板】二维前缀和

目录 二维前缀和原理 ②牛客DP35 【模板】二维前缀和 解析代码 二维前缀和原理 在一维数组前缀和算法的基础上&#xff0c;想到&#xff1a;计算二维数组前缀和&#xff0c;不就和计算一维数组前缀和一样&#xff0c;即计算每一个位置的前缀和就相当于&#xff1a; 此位置的…
阅读更多...
VUE引入DataV报错记录

VUE引入DataV报错记录

DataV官网&#xff08;不支持Vue3&#xff09;&#xff1a;Welcome | DataV 一、按照官网引入后报错 【1】 Failed to resolve entry for package "dataview/datav-vue3". The package may have incorrect main/module/exports specified in its package.json. 将…
阅读更多...
【Matlab】音频信号分析及FIR滤波处理——凯泽(Kaiser)窗

【Matlab】音频信号分析及FIR滤波处理——凯泽(Kaiser)窗

一、前言 1.1 课题内容： 利用麦克风采集语音信号（人的声音、或乐器声乐），人为加上环境噪声(窄带)分析上述声音信号的频谱，比较两种情况下的差异根据信号的频谱分布，选取合适的滤波器指标（频率指标、衰减指标），设计对应的 FIR 滤波器实现数字滤波，将滤波前、后的声音…
阅读更多...
贪吃蛇/链表实现（C/C++）

贪吃蛇/链表实现（C/C++）

本篇使用C语言实现贪吃蛇小游戏&#xff0c;我们将其分为了三个大部分&#xff0c;第一个部分游戏开始GameStart&#xff0c;游戏运行GameRun&#xff0c;以及游戏结束GameRun。对于整体游戏主要思想是基于链表实现&#xff0c;但若仅仅只有C语言的知识还不够&#xff0c;我们还…
阅读更多...
学习笔记推荐：极客时间《Java常见错误100例》

学习笔记推荐：极客时间《Java常见错误100例》

最近&#xff0c;我有幸接触了一套非常精彩的学习笔记&#xff0c;《Java常见错误100例》。&#xff08;手册链接在文末&#xff01;&#xff01;&#xff01;&#xff09; 这套学习笔记出自极客时间&#xff0c;对于想要在 Java 开发领域深耕细作的朋友们来说&#xff0c;它无…
阅读更多...
SpringBoot内置工具类

SpringBoot内置工具类

Collections java.util包下的Collections类&#xff0c;该类主要用于操作集合或者返回集合 一、排序 List<Integer> list new ArrayList<>();list.add(2);list.add(1);list.add(3);Collections.sort(list);//升序System.out.println(list);Collections.reverse(…
阅读更多...
基于Python flask MySQL 猫眼电影可视化系统设计与实现

基于Python flask MySQL 猫眼电影可视化系统设计与实现

1 绪论 1.1 设计背景及目的 猫眼电影作为国内知名的电影信息网站&#xff0c;拥有海量的电影信息、票房数据和用户评价数据。这些数据对于电影市场的研究和分析具有重要意义。然而&#xff0c;由于数据的复杂性和数据来源的多样性&#xff0c;如何有效地采集、存储和展示这些数…
阅读更多...
【Linux 内核源码分析】多核调度分析

【Linux 内核源码分析】多核调度分析

多核调度 SMP&#xff08;Symmetric Multiprocessing&#xff0c;对称多处理&#xff09;是一种常见的多核处理器架构。它将多个处理器集成到一个计算机系统中&#xff0c;并通过共享系统总线和内存子系统来实现处理器之间的通信。 首先&#xff0c;SMP架构将一组处理器集中在…
阅读更多...
程序员的基本素养之——R语言起源、特点以及应用

程序员的基本素养之——R语言起源、特点以及应用

R语言是一种功能强大的数据分析、统计建模、可视化、 免费、开源且跨平台的编程语言 作为用于数据统计的必备技能语言&#xff0c;博主目前正在对R语言进行基本的学习&#xff0c;这也是生物信息学领域进行统计分析的必备语言之一。下面跟我来一起看看吧&#xff01; R语言是一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023