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 …
阅读更多...
7 图

7 图

图的分类 有向图 add(a,b)无向图 add(a,b) add(b,a) 名词解释 完全图&#xff1a;含有e (n-1)*n/2 条边的无向图有向完全图&#xff1a;含有e (n-1)*n 条边的有向图若边或弧的个数 e<nlogn&#xff0c;则称作稀疏图&#xff0c;否则称作稠密图简单路径&#xff1a;序列中…
阅读更多...
LeetCode Hot100 回顾（一）

LeetCode Hot100 回顾（一）

哈希 128.最长连续序列 要求复杂度为O(n)的算法, 通过两次遍历实现: 第一次遍历将所有元素插入到哈希表中, 第二次遍历过程中对每个元素n进行处理, 如果哈希表中存在值为n-1的元素, 则说明该元素已经被处理或即将被处理; 若不存在, 就继续查看值为n1, n2, n3…的元素是否存在…
阅读更多...
个体诊所电子处方系统设计，社区门诊处方开单管理系统软件教程

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

个体诊所电子处方系统设计&#xff0c;社区门诊处方开单管理系统软件教程 一、前言 以下软件程序操作教程以 佳易王诊所电子处方管理系统软件V17.3为例说明 如图&#xff0c;在基本信息设置里&#xff0c;可以设置处方配方模板&#xff0c;这样在开电子处方的时候可以一键导入…
阅读更多...
动态规划——编辑距离问题

动态规划——编辑距离问题

假设有a&#xff0c;b两个字符串&#xff0c;现对a字符串进行修改使得a字符串与b字符串完全一样&#xff1b;要求是使用最小的操作次数&#xff0c;使a&#xff0c;b字符串相等。操作有三种&#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;显…
阅读更多...
PostgreSQL15安装和实现物理复制（主从配置）全程指南

PostgreSQL15安装和实现物理复制（主从配置）全程指南

1 概述 本文介绍如何在centos7或rocky9下安装postgresql15&#xff0c;并配置物理复制的全过程。postgresql安装采用shell脚本安装&#xff0c;一键执行&#xff0c;通俗易懂。 2 环境说明 序号IP操作系统用途备注0110.10.0.41rockylinux9.3主库0210.10.0.42rockylinux9.3从…
阅读更多...
【electron】安装网络问题处理

【electron】安装网络问题处理

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

软件门槛之算法

软件门槛之算法 1.背景2.算法定义3.特征4.基本要素5.常用设计模式6.常用实现方法7.复杂度时间复杂度空间复杂度8.分类9.算法常用的一些工具10.算法的检验标准1.背景 一入行业深似海 再回首已是白发生！ 工作这么多年了，感觉算法是比较难搞的。 写代码最重要的可能是框架和算法…
阅读更多...
【Linux环境配置】core dump配置和快速gdb调试core文件

【Linux环境配置】core dump配置和快速gdb调试core文件

文章目录 0. 在Ubuntu系统中直接运行导致coredump的程序并没有生成core文件1. core dump 设置1.1 设置core文件格式1.2 设置core 大小限制 2. 写个代码测一下2.1 示例代码放入 test.c 中2.2 编译运行2.3 gdb调试一下core 3. 参考资料 0. 在Ubuntu系统中直接运行导致coredump的程…
阅读更多...
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|…
阅读更多...
React中antd的使用技巧

React中antd的使用技巧

1.antd的基本使用&#xff1a; (1).yarn add antd(2).引入样式&#xff1a;import antd/dist/antd.css;(3).根据文档引入组件2.antd按需引入样式 (1).yarn add react-app-rewired customize-cra babel-plugin-import(2).修改package.json&#xff0c;内容如下&#xff1a;.....…
阅读更多...
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; 此位置的…
阅读更多...
qt学习：json数据文件读取写入

qt学习：json数据文件读取写入

目录 什么是json 基本格式 例子 解析json文件数据到界面上 组合json数据文档对象 什么是json json是一种轻量级的数据交互格式&#xff0c;简单来说&#xff0c;json就是一种在各个编程语言中流通的数据格式&#xff0c;负责不同编程语言中的数据传递和交互 基本格式 以…
阅读更多...
最新文章

Copyright @ 2022~2023