CSS与JavaScript的简单认识

 CSS:是一门语言,用于控制网页表现,让页面更好看的。  CSS(Cascading Style Sheet):层叠样式表

  CSS与html结合的三种方式:

    1、内部样式:用style标签,在标签内部定义CSS样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color: red;}</style>
</head>
<body>
<div>Hello CSS~
</div>
</body>
</html>

   2、内联样式:在标签内部使用style属性,属性值是css属性键值对

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="color: red">Hello CSS~</div>
</body>
</html>

这种方式html代码就和css代码耦合在一起了,但不利于以后的复用,不推荐这么写

  3、外部样式:定义link标签,引入外部的css文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link href="resource/demo.css" rel="stylesheet">
</head>
<body>
<p>hello css~</p>
</body>
</html>

下面这是文件中的内容

p{color: green;
}

这是引用的外部的demo.css的文件。

 选择器:选择器是选取需设置样式的元素(标签)

    1、元素选择器:元素名称{键值对}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color: red;}</style>
</head>
<body>
<div>div1</div>
<div>div2</div><span></span></body>
</html>

    2、id选择器:#id属性值{键值对}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color: red;}#name{color: blue;}</style>
</head>
<body>
<div>div1</div>
<div>div2</div><div id="name">div4</div><span></span></body>
</html>

   3、类选择器:.class属性值{键值对}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color: red;}#name{color: blue;}.cls{color: pink;}</style>
</head>
<body>
<div>div1</div>
<div>div2</div><div id="name">div4</div><div class="cls">div5</div><span></span></body>
</html>

JavaScript:是一门跨平台、面向对象的脚本语言,来控制网页行为的,它能使网页可交互

就像这种,在不跳转页面的情况下,可以更换更换图片的。

脚本语言:就是浏览器可以直接解释执行,不用经过编译。

JavaScript和Java是完全不同的语言,不论是概念还是设计。但是基础语言类似。

JavaScript引入方式:

  1、内部脚本:将JS代码定义在html页面中。在html中,JavaScript代码必须位于script标签中。

        提示:在html文档中,可以在任何地方,放置任意数量的script标签。但是一般会把脚本置于body标签元素的底部,可改善显示速度,因为脚本执行会拖延显示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>window.alert("hello.js")//写入警告框document.write("hello js2")//写入html页面console.log("hello js3")//写入浏览器控制台
</script>
</html>

 

2、外部脚本:将JS代码定义在外部JS文件中,然后引入到html页面中。

        注意:外部脚本中不能包含script标签;script标签不能自闭合,标签必须写全。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="resources/demo.js"></script>
</body>
</html>demo.js文件中的代码为alert("hello js")

书法语法:

  1、区分大小写:与Java一样,变量名、函数以及其他一切东西都是区分大小写的。

  2、每行结尾的分号都是可有可无的

  3、注释:单行注释:  //注释内容。                 多行注释:  /*注释内容*/

  4、大括号代表代码块

输出语句:

window.alert()写入警告框    document.write()写入html页面      console.log()写入浏览器控制台

变量:

  JavaScript中使用var关键字(variable的缩写)来声明变量。

  JavaScript是一门弱类型的语言,变量可以存放不同类型的值。

     变量名需要遵循以下规则:

       1、组成字符可以是任何字母、数字、下划线或美元符号。

       2、数字不能开头

       3、建议使用驼峰命名

  ECMAScript6新增了let关键字和const关键字。

     let关键字来定义变量,用法与var类似,但是声明的变量,只能在let关键字所在的代码块内有效,且不允许重复声明变量名相同的变量。

    const变量用来声明一个只读变量。一旦声明就无法更改。

var定义的变量的特点:

   1、作用域为全局变量,即使var变量写在某个代码块中,在代码块外部也能访问。

   2、变量可以重复定义,可以定义俩个变量名相同的变量,后定义的覆盖前面的

数据类型:

   JavaScript中分为原始数据和引用数据

     5种原始数据:

           number:数字(整数,小数,NaN(Not a Number))

           string:字符,字符串,单双号都可以。     boolean:布尔。true或false。    null:对象为空

           undefined:当声明的变量未初始化时,该变量的默认值为undefined。

     使用typeof运算符可以获取数据类型 alert(typeof age)

运算符

   运算符几乎和Java的一致,不同的就是JavaScript中多了=== 全等于

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>var age1=20var age2="20"alert(age1==age2);//返回truealert(age1===age2);//返回false</script>
</html>

 ==:先判断类型是否一样,如果不一样,则进行类型转换,然后再去比较其值

 ===:判断类型是否一致,不一致直接返回false。一致时才会去比较值

数据转换:

  其他类型转换为number:

     1、string:按照字符串的字母值,转换为数字,如果字面值不是数字,例如var str=‘abc’,则转换为NaN。一般使用parseInt方法转换。

     2、boolean:true转换为1,false转换为0.

    其他类型转换为boolean:

      1、number:0和NaN转为false,其他数字转为true。

      2、string:空字符串转为false,其他字符串转为true。

      3、null:fasle

      4、undefined:false

函数:JavaScript函数通过function关键字进行定义

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//定义函数方式1:// function add(a,b){//   return a+b;// }//定义函数方式2:var add=function (a,b){return a+b;}var result=add(1,2)alert(result);
</script>
</body>
</html>

注意:形式参数不需要写出类型,返回值也不需要定义类型,可以在函数内部直接使用return返回即可。因为JavaScript是弱类型的语言。函数中即使定义函数时写了2个形参,调用函数时可以传入2个以上的参数。

JavaScript

  定义:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var arr=new Array(1,2,3)alert(arr)var arr2=[1,2,3]alert(arr2)
</script>
</body>
</html>

特点:JavaScript数组相当于Java中的集合。变长变类型。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var arr2=[1,2,3]alert(arr2)arr2[6]=6alert(typeof arr2[5])//为undefined类型
</script>
</body>
</html>

且同一个数组中不必须全是number类型,可以有不同类型。

    数组方法:  push方法,添加元素。   splice方法,删除元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var arr5=[1,2,3]arr5.push(10)arr5.splice(0,1)alert(arr5)</script>
</body>
</html>

 

字符串对象:

   定义:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var str1=new String("abc")var str2="abc"
</script>
</body>
</html>

length属性:字符串的长度。 

charAt()返回指定位置的字符。     indexOf()检索字符串。 trim()去除字符串前后俩段的空白字符。

自定义对象:相当于Java中类的定义

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var person={name:"zhangsan",age:21,eat:function (){alert("干饭~")}}alert(person.name)alert(person.age)person.eat()
</script>
</body>
</html>

BOM:Browser Object Model浏览器对象模型

 JavaScript将浏览器的各个组成部分封装成对象。

  组成:Window:浏览器窗口对象。    Navigator:浏览器对象。    Screen:屏幕对象

            History:历史记录对象。      LOcation:地址栏对象。

    window:弹框方法:alert()弹出警告框和comfirm()弹出有确认和取消按钮的对话框。点确认返回true,取消返回fasle

                   定时器方法:serlnterval()按照周期(毫秒)来调用函数或计算表达式,循环执行。

                                         setTimeout()在指定的毫秒数后调用函数或计算表达式,这个只执行一次。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var flag=confirm("确认删除?")setTimeout(function (){alert("hehe")},1000)setInterval(function (){alert("hehe")},1000)
</script>
</body>
</html>

     history:历史记录

          方法:back() 加载history列表中的前一个URL。  forward()加载history列表中的下一个URL。

     location:地址栏对象

        属性:href:设置或返回完整的URL

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>alert("跳转百度")location.href="https://www.baidu.com"//3秒跳转首页document.write("3秒跳转首页")setTimeout(function (){location.href="https://www.baidu.com"},3000)</script>
</body>
</html>

DOM:Document Object Model 文档对象模型

  将标记语言的各个组成部分封装成对象:

      Document:整个文档对象。     Element:元素对象        Attribute:属性对象

      Text:文本对象        Comment:注释对象

 获取Element:元素对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img id="light" src="">
<div class="cls">黑马</div>
<div class="cls">程序员</div><input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏<script>var img=document.getElementById("light")//根据id获取alert(img)var divs=document.getElementsByTagName("div")//根据标签名获取,返回数组alert(divs.length)for(let i=0;i<divs.length;i++){divs[i].style.color="red"//设置元素css样式divs[i].innerHTML="hehe"//设置元素内容alert(divs[i])}var hobbies= document.getElementsByName("hobby");//根据name属性获取,返回数组for (let i=0;i<hobbies.length;i++){alert(hobbies[i])}var classes= document.getElementsByClassName("cls")//根据name属性值获取,返回数组for (let i=0;i<classes.length;i++){alert(classes[i])}</script></body>
</html>

Element对象中的俩个常用属性: style:设置元素css样式。 innerHTML:设置元素内容。

  checkbox对象中一个重用属性ckecked:设置或返回元素是否被选中。让对象的checked属性为true即位被选中,为fasle就是未被选中。

事件监听:

  事件:html事件时发生在html元素上的事情。

  事件监听:JavaScript可以在事件被侦测到时执行的代码。

事件绑定的俩种方式:

  一:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="button" value="点我" onclick="on()"> <br><script>function on() {alert("我被点了")}
</script>
</body>
</html>

二:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="button" value="在点我" id="btn"><script>document.getElementById("btn").onclick=function (){alert("我再次被点")}</script>
</body>
</html>

常见事件:

   onclick: 鼠标点击事件。       onblur:元素失去焦点。    onfocus:元素获取焦点

   onload:某个页面或图像被完成加载。     onsubmit:当表单被提交时触发该事件。

   onkeydown:某个键盘被按下        onmouseover。鼠标被移到某个元素上

   onmouseout:鼠标从某个元素移开

正则表达式:定义了字符串组成的规则

   定义:俩种方式

var reg=/^\w{6,12}$/var reg2=new RegExp("\\w{6,12}$")

  方法:test()方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var reg=/^\w{6,12}$/var str="abccccc"var flag=reg.test(str)alert(flag)</script>
</body>
</html>

  判断字符串str是否符合正则表达式reg。

语法规则:

    ^:表示开始。      $:表示结束。 

   []:表示某个范围内的单个字符。

   .:代表任意单个字符,除了换行符和行结束符。

  \w:代表单词字符:字母,数字,下划线

  \d:代表数字字符

量词语法:

  +:至少一个

  *:零个或多个

  ?:零个或一个

  {x}:x个

 {m,}:至少m个

 {m,n}:至少m个,之多n个

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

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

相关文章

vim学习笔记

vim学习笔记 Linux Vim编辑器的基本使用 显示行号 set nu 自动补全 CTRL-N或CTRL-P $到当前行的末尾 u 撤销上一步的操作 Ctrlr 恢复上一步被撤销的操作 vim下配置tab缩进格数 原始文件&#xff1a; helloworld nice 普通缩进 shift > &#xff08;或者 Shift <…

springcloud微服务篇--6.网关Gateway

一、为什么需要网关&#xff1f; 网关功能&#xff1a; 身份认证和权限校验 服务路由、负载均衡 请求限流 在SpringCloud中网关的实现包括两种&#xff1a; gateway zuul Zuul是基于Servlet的实现&#xff0c;属于阻塞式编程。而SpringCloudGateway则是基于Spring5中提供的Web…

【SpringCloud笔记】(12)分布式请求链路跟踪之Sleuth

Sleuth 背景 在微服务框架中&#xff0c;一个由客户端发起的请求在后端系统中会经过多个不同的的服务节点调用来协同产生最后的请求结果&#xff0c;每一个前段请求都会形成一条复杂的分布式服务调用链路&#xff0c;链路中的任何一环出现高延时或错误都会引起整个请求最后的…

通信原理课设(gec6818) 006:网络编程

目录 1、概念 2、通信 3、通信基本流程 TCP: UDP: 4、函数 I 创建套接字 II 绑定地址 III 字节序转换 IV 地址转换 V 监听 VI accept VII connect VIII 从套接字接收信息 IX 从套接字发送消息 X 关闭套接字 5、网络配置 1、确保你的网卡里面有两个虚拟网卡&a…

WeNet语音识别分词制作词云图

在线体验 ,点击识别语音需要等待一会&#xff0c;文件太大缓存会报错 介绍 本篇博客将介绍如何使用 Streamlit、jieba、wenet 和其他 Python 库&#xff0c;结合语音识别&#xff08;WeNet&#xff09;和词云生成&#xff0c;构建一个功能丰富的应用程序。我们将深入了解代码…

JavaScript 中类和构造函数的区别

JavaScript 中的类和构造函数在实现上有一些区别&#xff0c;但它们的目的相同&#xff0c;都是用于创建对象。 构造函数是一种特殊的函数&#xff0c;它用于创建对象。构造函数使用 new 关键字来创建一个对象实例&#xff0c;并将属性和方法添加到该实例上。构造函数一般以大…

XXL-JOB学习笔记-基于注解实现自动注册新建任务

项目每次注册新建任务都需要手动操作配置xxl-job&#xff0c;不同的环境都需要手动操作配置一次&#xff0c;比较麻烦&#xff0c;为此想要简化相关的手动操作工作&#xff0c;基于注解的形式实现自动注册新建任务。 本篇是在之前一篇基于代码实现新建任务的基础上进一步实现。…

AUTOSAR从入门到精通- 虚拟功能总线(RTE)(三)

目录 前言 RTE的主要功能 几个高频面试题目 RTE基础面试题目 什么是数据转换?

第2课 使用FFmpeg读取rtmp流并用openCV显示视频

本课对应源文件下载链接&#xff1a; https://download.csdn.net/download/XiBuQiuChong/88680079 这节课我们开始利用ffmpeg和opencv来实现一个rtmp播放器。播放器的最基本功能其实就两个:显示画面和播放声音。在实现这两个功能前&#xff0c;我们需要先用ffmpeg连接到rtmp服…

LVS负载均衡配置虚拟引起微服务注册混乱

线上小程序突然报错&#xff0c;查看网关日志&#xff0c;访问下游微服务A时大量报错&#xff1a; 1&#xff09;检查微服务是否未注册。登录eureka页面&#xff0c;发现三个节点均正常注册 三个微服务节点地址分别为&#xff1a;13.9.1.91:8080&#xff0c;13.9.1.92:8080和1…

开源服务指南使用手册

开源服务指南是什么&#xff1f;从哪里来&#xff1f;往哪里去&#xff1f; 定位 用中文推荐优质开源项目&#xff0c;让开发者更容易找到趁手的开源工具。 Slogan 发现开源之美&#xff0c;碰撞无限可能。 我们想要让大家知道更多优秀的开源项目&#xff0c;发现开源的美…

ARM CCA机密计算软件架构之软件堆栈概述

Arm CCA平台通过硬件添加和固件组件的混合方式实现,例如在处理元素(PEs)中的RME以及特定的固件组件,特别是监视器和领域管理监视器。本节介绍Arm CCA平台的软件堆栈。 软件堆栈概述 领域VM的执行旨在与Normal world(正常世界)隔离,领域VM由Normal world Host(正常世界…

【软件工程】融通未来的工艺:深度解析统一过程在软件开发中的角色

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; 软件工程 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言&#xff1a; 正文 统一过程&#xff08;Unified Process&#xff09; 介绍和解释&#xff1a; 应用&#xff1a; 优缺点&#xf…

C/C++ 函数的默认参数

下面介绍一项新内容 - 默认参数。 默认参数指的是当函数调用中省略了实参时自动使用的一个值。 例如&#xff0c;如果将 void wow (int n)设置成n 有默认值为1&#xff0c;则函数调用 wow()相当于 wow(1)这极大地提高了使用函数的灵活性。 假设有一个名为left()的函数&#xff…

SpringIOC之ApplicationObjectSupport

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

pytorch与cuda版本对应关系汇总

pytorch与cuda版本关系 cuda版本支持pytorch版本cuda10.21.5 ~ 1.12cuda11.01.7 ~ 1.7.1cuda11.11.8 ~ 1.10.1cuda11.31.8.1 ~ 1.12.1cuda11.61.12.0 ~ 1.13.1cuda11.71.13.0 ~ 2.0.1cuda11.82.0.0 ~ 2.1.1cuda12.12.1.0 ~ 2.1.1 cuda 与 cudnn关系 cuda版本支持cudnn版本cu…

微信小程序:跳转页面

实际调用需要根据自己业务实际情况决定&#xff0c;虽然各种方式一定程度上能减少内存损耗&#xff0c;但是业务上面流转优化才是最终要满足的&#xff0c;一定要从业务流转去优化去考虑&#xff0c;不要为了性能增加了流转复杂度 1、wx.navigateTo 保留当前页面&#xff0c;跳…

12、defer

defer defer意思是推迟、延迟。语法很简单&#xff0c;就在正常的语句前加上defer就可以了。 ​ 在某函数中使用defer语句&#xff0c;会使得defer后跟的语句进行延迟处理&#xff0c;当该函数即将返回时&#xff0c;或发生panic时&#xff0c;defer后语句开始执行。注意os.E…

算法基础之最短Hamilton路径

最短Hamilton路径 核心思想&#xff1a; 数位dp 用二进制数 存当前所有点 遍历过为1 遍历i图中j点 若j点走过 则求j点路径长度 f[state][j] f[state_k][k] w[k][j] state为除去j点的图 #include<iostream>#include<cstring>#include<algorithm>using n…

java web开发

什么是javaEE javaEE是企业版 是一个web开发平台 规范了web技术标准 技术有 JDBC JSP XML Servlet 硬件服务器&#xff1a;和pc一样属于计算机 软件服务器&#xff1a;文件服务器 数据库服务器 应用服务器java EE 应用服务器 是收费的 实现了EE技术 web 服务器 实现了部分技…