网站建设总流程图,学做ps的软件的网站有哪些内容,广西网站建设价格,网站icp备案查询官网文章目录 概要整体架构流程技术名词解释技术细节小结 概要
什么是 JavaScript#xff1f;
JavaScript 是一种脚本#xff0c;一门编程语言#xff0c;它可以在网页上实现复杂的功能#xff0c;网页展现给你的不再是简单的静态信息#xff0c;而是实时的内容更新#xf… 文章目录 概要整体架构流程技术名词解释技术细节小结 概要
什么是 JavaScript
JavaScript 是一种脚本一门编程语言它可以在网页上实现复杂的功能网页展现给你的不再是简单的静态信息而是实时的内容更新交互式的地图2D/3D 动画滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层其中 HTML 和 CSS 我们已经在学习中心的其他部分进行了详细的讲解
HTML是一种标记语言用来结构化我们的网页内容并赋予内容含义例如定义段落、标题和数据表或在页面中嵌入图片和视频。CSS 是一种样式规则语言可将样式应用于 HTML 内容例如设置背景颜色和字体在多个列中布局内容JavaScript是一种脚本语言可以用来创建动态更新的内容控制多媒体制作图像动画还有很多。好吧虽然它不是万能的但可以通过简短的代码来实现神奇的功能。
这三层依次建立秩序井然。
整体架构流程 技术名词解释
变量是什么
一个变量就是一个用于存放数值的容器。这个数值可能是一个用于累加计算的数字或者是一个句子中的字符串。变量的独特之处在于它存放的数值是可以改变的。 number类型的变量在需要转换成boolean类型时 如果值为0或者NaN则转换成false否则为true string类型的变量在需要转换成boolean类型时 如果值为空字符串则转换成false否则为true null和undefined都会转换成false //1.数据类型和变量let a3console.log(typeof a)//numberaabcconsole.log(typeof a)//stringatrueconsole.log(typeof a)//booleananullconsole.log(typeof a)//nullaconsole.log(typeof a)//undefinedlet bconsole.log(typeof b)//2.数据类型转换let ageundefinedif(age){console.log(1)}else{console.log(0)}
数组是什么
数组通常被描述为“像列表一样的对象”; 简单来说数组是一个包含了多个值的对象。数组对象可以存储在变量中并且能用和其他任何类型的值完全相同的方式处理区别在于我们可以单独访问列表中的每个值并使用列表执行一些有用和高效的操作如循环 - 它对数组中的每个元素都执行相同的操作。也许我们有一系列产品和价格存储在一个数组中我们想循环遍历所有这些产品并将它们打印在发票上同时将所有产品的价格统计在一起然后将总价格打印在底部。
如果我们没有数组我们必须将每个产品存储在一个单独的变量中然后调用打印的代码并为每个产品单独添加。花费的时间要长得多效率很低而且也容易出错。如果我们有 10 个产品需要添加发票那就只是有点麻烦而已但是 100 个或者 1000 个呢
//1.简单数组let arr1[1,2.5,a,true,null,undefined,null];console.log(arr1.length)//2.复杂的数组let arr2[{id:1,name:曹操,age:40},{id:2,name:刘备,age:41},{id:3,name:孙权,age:42},]
什么是函数
在 JavaScript 中另一个基本概念是函数, 它允许你在一个代码块中存储一段用于处理单任务的代码然后在任何你需要的时候用一个简短的命令来调用而不是把相同的代码写很多次。在本文中我们将探索函数的基本概念如基本语法、如何定义和调用、范围和参数。
函数的定义
您在过去的课程中还看到很多定制功能 - 在代码中定义的功能而不是在浏览器中。每当您看到一个自定义名称后面都带有括号那么您使用的是自定义函数。
//函数的2种常用的定义方式function f1(){console.log(f1函数)}let f2function(){console.log(f2函数)}console.log(arr1)console.log(arr2)//3.数组的遍历arr2.forEach(function(e,i){console.log(e,i)})//简化为 箭头函数的表现形式arr2.forEach((e,i){console.log(e,i)})//4.数组的筛选,原数组不会被改变筛选出来的结果返回到新数组中let arr3 arr2.filter((e,i){return e.age42})console.log(arr3)
JS-dom操作
事件是发生在你正在编程的系统中的事情——当事件发生时系统产生或“触发”某种信号并提供一种机制当事件发生时可以自动采取某种行动即运行一些代码。事件是在浏览器窗口内触发的并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素一组元素当前标签中加载的 HTML 文档或整个浏览器窗口。有许多不同类型的事件可以发生。 p 什么是dom操作和html进行交互br 1.获取html标签返回一个元素对象br 2.设置值br /p input idinput1 typetext valueaa ul idul1 li1-a-12/li li2-b-13/li li3-c-14/li /ul button οnclickchangeText()替换按钮/button ul lionclick属性表示一个点击事件属性/li lionclick属性值是一个函数名称()/li li表示一旦点击该按钮就调用这个函数/li /ul JS代码 //1.单个的设置 //1.1获取 let input1document.getElementById(input1) //1.2设置值 input1.value曹操 //2.批量的设置 let arr2[ {id:1,name:曹操,age:40}, {id:2,name:刘备,age:41}, {id:3,name:孙权,age:42}, ] //2.1获取ul let ul1document.getElementById(ul1) function changeText(){ //2.2替换 let s arr2.forEach((e){ sli${e.id}-${e.name}-${e.age}/li }) ul1.innerHTMLs } 技术细节
炫酷的js动画
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title心动的感觉/titlestyle/* 定义动画 */keyframes jump{from{transform: scale(0.5);opacity: 0.5;}to{transform: scale(2.0);opacity: 1;}}/* 定义一个iou旋转动画 */keyframes circles{from{transform: rotate(0deg);z-index: 1;}to{transform: rotate(360deg);/*z-index: -1;*/}}.f{width: 170px;height: 160px;/* border: 1px solid rebeccapurple; */position: relative;left: 200px;top: 200px;/* 给父元素绑定动画 *//* animation: jump 1s ease alternate infinite; */}.m{animation: jump 1s ease infinite alternate; }.fdiv{position: absolute;}/* 两个圆 */.z1,.z2{width: 100px;height: 100px;border-radius: 50%;background-color: red;}.z2{left: 70px;}.z3{width: 100px;height: 100px;background-color: red;left: 35px;top: 35px;transform: rotate(45deg);}.z4{top: 50px;left: 50px;font-size: large;color: aliceblue;z-index: -1;}.z4c{animation: circles 1s linear 0.5s infinite alternate;}button{width: 80px;height: 40px;background-color: rgb(39, 141, 39);border: none;color: white;font-size: large;border-radius: 10px;cursor: pointer;box-shadow: 0 8px 5px gray;margin-left: 20px;}button:active{transform: translate(5px,5px);}/style
/head
bodybutton onclickstart1()开始/buttonbutton onclickstop1()停止/buttondiv iddivF classfdiv classz1/divdiv classz2/divdiv classz3/divdiv idz4 classz4Iemsp;oemsp;u/div/div
/body
script//1.获取let divFdocument.getElementById(divF)let z4document.getElementById(z4)function start1(){//2.设值不能使用关键字classdivF.classNamef mz4.classNamez4 z4c}function stop1(){//2.设值不能使用关键字classdivF.classNamefz4.classNamez4}
/script
/html
强盛集团实现薪资翻倍功能
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title强盛集团/titlestylebutton{width: 100px;height: 40px;border: none;outline: none;color: white;border-radius: 8px;font-size: large;color: seashell;cursor: pointer;margin-left: 40px;}.fbbutton:nth-child(1){background-color: rebeccapurple;}.fbbutton:nth-child(2){background-color: goldenrod;}.fbbutton:nth-child(3){background-color: green;}.fbbutton:nth-child(4){background-color: rgb(11, 171, 235);}/* 鼠标放上去有个阴影 */button:hover{box-shadow: 10px 10px 10px rebeccapurple;}/* 鼠标点击动一动 */button:active{transform: translate(5px,5px);}/* tbody中的每一个tr隔行变色 */tbodytr:nth-child(odd){background-color: skyblue;}tbodytr:nth-child(even){background-color: rgb(240, 194, 78);}/style
/head
bodyh1 styletext-align: center;强盛集团员工薪资表/h1h2 styletext-align: center;风浪越大鱼越贵/h2div classfb styletext-align: center;button onclickchangeText()生成表格/buttonbutton onclickdoubleMoney()薪资翻倍/buttonbutton onclickrestEmp()退休人员/buttonbutton onclicksumMoney()薪资总数/button
/divtable stylemargin-top: 30px; aligncenter border1 cellspacing0 cellpadding20theadtrtha hrefjavascript:orderEmp(id)序号/a/ththm姓名/m/ththa hrefjavascript:orderEmp(age)年龄/a/ththa hrefjavascript:orderEmp(money)薪资/a/th/tr/theadtbody idtd1tr bgcolorlightskybluetd1/tdtd高启强/tdtd36/tdtd2000000/td/tr/tbodytfoot idtfoottr styletext-align: center; color:rgb(255,255,0);td colspan4薪资总数:/td/tr/tfoot/table
/body
scriptlet arr2[{id:1,name:高启强,age:36,money:300},{id:2,name:高启盛,age:30,money:200},{id:3,name:唐小龙,age:34,money:100},{id:4,name:唐小虎,age:32,money:50},{id:5,name:陈泰,age:66,money:30},{id:6,name:老默,age:40,money:10},]//2.1获取td1元素let td1document.getElementById(td1)let tfootdocument.getElementById(tfoot)function changeText(){//2.2替换//调用函数createTab(arr2)}//重复出现的代码封装成一个函数,把某个数组中的数据放在tbody中function createTab(arr){let sarr.forEach((e){strtd${e.id}/tdtd${e.name}/tdtd${e.age}/tdtd${e.money}/td/tr})td1.innerHTMLs}let newEmps;function doubleMoney(){//薪资翻倍后返回一个新的数组newEmpsarr2.map((e){e.money*2return e;})//调用函数createTab(newEmps)}//退休功能function restEmp(){let newEmpsarr2.filter((e){return e.age65})//调用函数createTab(newEmps)}//薪资求和function sumMoney(){let moneySumif(newEmps){//alert(对翻倍后的数组求和)moneySumnewEmps.reduce((sum,e){return sume.money},0)}else{//alert(对原数组求和)moneySumarr2.reduce((sum,e){return sume.money},0)}tfoot.innerHTMLtr styletext-align: center; color:rgb(255,255,0);td colspan4薪资总数:${moneySum}/td/tr}//排序let a truefunction orderEmp(type){a!a//每调用一次a取反let newEmps2switch(type){case id:console.log(根据id排序)newEmps2arr2.sort((e1,e2){return a? e2.id-e1.id : e1.id-e2.id})break;case age:console.log(根据age排序)newEmps2arr2.sort((e1,e2){return a? e2.age-e1.age : e1.age-e2.age})break;case money:console.log(根据money排序)newEmps2arr2.sort((e1,e2){return a? e2.money-e1.money : e1.money-e2.money})break;}//调用生成tbody的函数createTab(newEmps2)}
/script
/html
js炫酷走马灯
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title走马灯/titlestyle.f{width: 800px;height: 100px;border-top: 1px solid rebeccapurple;}.fdiv{width: 60px;height: 40px;background-color: white;border-radius: 50%;float: left;margin-left: 20px;}keyframes changeColor{0%{background-color: rgb(236, 65, 65);}20%{background-color: rgb(235, 176, 68);}40%{background-color: rgb(28, 148, 28);}60%{background-color: rgb(35, 35, 165);}80%{background-color: rebeccapurple;}100%{background-color: pink;}}.fdiv:nth-child(1){animation: changeColor 3s ease 0s infinite;}.fdiv:nth-child(2){animation: changeColor 3s ease 1s infinite;}.fdiv:nth-child(3){animation: changeColor 3s ease 2s infinite;}.fdiv:nth-child(4){animation: changeColor 3s ease 3s infinite;}.fdiv:nth-child(5){animation: changeColor 3s ease 4s infinite;}.fdiv:nth-child(6){animation: changeColor 3s ease 5s infinite;}.fdiv:nth-child(7){animation: changeColor 3s ease 6s infinite;}.fdiv:nth-child(8){animation: changeColor 3s ease 7s infinite;}.fdiv:nth-child(9){animation: changeColor 3s ease 8s infinite;}.fdiv:nth-child(10){animation: changeColor 3s ease 9s infinite;}/style
/head
body idbodyform action methodbutton onclickgenerate生成/buttoninput typetext namesubmit1 value 行/formdiv classfdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/div/div
/body
script// function generate(){// }// 1.获取let bodydocument.getElementById(body)let sfor(let i0;i10;i){sdiv classfdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/divdiv/div/div}body.innerHTMLs
/script
/html
效果图 小结
本节小课堂我们对js核心课程进行了学习有数据类型转换变量简单数组和复杂数组函数的两种定义方式js-dom操作并且通过四个有趣的小项目加以巩固所学到的知识点这些绚丽的js前端动画特效让我眼前一亮核心代码也通俗易懂。希望上述内容能带给你们帮助有需求或者想要讨论前端内容的可以评论或者私信我。看到这里的小伙伴点个赞吧我们一起学习打卡哟
