首页 > 其他分享 >基础课-前端JS

基础课-前端JS

时间:2023-11-08 15:46:38浏览次数:33  
标签:函数 标记 前端 JS --- 基础课 编写

JAVA Script基础语法

意义:让前端界面动起来;它是负责前端界面与用户之间的交互

前端界面变化的思维导图:

                          触发                       调用                     运行

用户进行操作------------>前端事件------------>JS函数------------>界面产生变化

JS代码的编写方式

1.嵌入编写

嵌入在HTML中的script(脚本)标记中,它可以出现在任意位置,建议放在body代码标记后

2.外部编写

单独编写在JS文件中,使用script标记进行引入

 

前端事件是标记中以on开头的属性

on开头的属性值需要设置事件发生后需要调用的函数"函数名()"

例如:<button onclick="red()">变红</button>

JS的函数分为两类:

 

1.内部函数

可以直接调用,例如alert(弹框)、close(关闭)

2.自定义函数

函数代码需要程序员编写,可以完成个性化的变化需求

自定义函数要求:

<script>

function 空格 函数名(){

    函数具体代码(例如:document.getElementById('h').style.color='#09f4a1')

}

</script>

JS动态变化代码编写套路

1.找到需要变化的标记

2.修改相关的属性值

 

document---文档对象(所有标记)

.意义---里面的(点)

getElementByld函数---通过标记的id属性值获得某个标记

style---样式属性(具体样式属性名遵守驼峰命名规则,例如:fontSize)

= 意义---赋值符(右侧的数据赋值给左侧)

字符数据需要使用引号括起来(使用' '或" ")

 

标签:函数,标记,前端,JS,---,基础课,编写
From: https://www.cnblogs.com/hefury/p/17816902.html

相关文章

  • JS 计算两日期时间相差多少天
    计算两日期时间相差多少天!functiongetDays(DateOne,DateTwo){ varOneMonth=DateOne.substring(5,DateOne.lastIndexOf('-')); varOneDay=DateOne.substring(DateOne.length,DateOne.lastIndexOf('-')+1); varOneYear=DateOne.substring(0,DateOn......
  • JS 获取几天后的日期格式
    functiongetDateStr(addDayCount,a){ vardd=newDate(); dd.setDate(dd.getDate()+addDayCount);//获取addDayCount天后的日期 vary=dd.getFullYear(); varm=(dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期,不足10补0 var......
  • JS 字符串操作
    JS字符串操作小结:concat()–将两个或多个字符的文本组合起来,返回一个新的字符串。 indexOf()–返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回-1。 charAt()–返回指定位置的字符。 lastIndexOf()–返回字符串中一个子串最后一处出现的索引,如果没有匹......
  • JSTL fmtformatNumber日期、 数字、货币格式化
    JSTLfmt:formatNumber日期、数字、货币格式化使用<fmt>标签应先导入<%@taglibprefix="fmt"uri="http://java.sun.com/jsp/jstl/fmt"%>其uri可在fmt.tld文件下 1、日期格式化<fmt:formatDatevalue=“${XXX.date}”pattern=“yyyy-MM-ddHH:mm:ss”/> value:要......
  • 纯前端实现录屏并保存视频到本地【转载】
    转载地址:https://mp.weixin.qq.com/s/ryAF9IXRsaPs01xSHG-AiA<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scal......
  • 前端工程狮
    现在移动互联网发展的这么快,前端开发领域也越来越广,前端早已经告别了切图崽的时代,在web端、移动端(安卓、IOS)、Watch、小程序、公众号开发、混合app开发都能看到前端开发工程师的影子。从狭义上讲,前端工程师使用HTML、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网......
  • nodejs安装
    官网下载路径:https://nodejs.org/en/download,点击previousReleases查看以前的版本  Node安装yarnNodei-gyarn......
  • js事件
    开关灯案例:<divid='d1'class='c1bg_redbg_green'></div><buttonid='d2'>变色</button><script>letbtnEle=document.getElementById('d2')letdivEle=document.getElementById('d1�......
  • js小数运算出现多位小数如何解决
    为什么操作小数会出现误差?浮点数值的最高进度是17位小数,但在进行运算的时候其精确度却远远不如整数;整数在进行运算的时候都会转成10进制; 而Java和JavaScript中计算小数运算时,都会先将十进制的小数换算到对应的二进制,一部分小数并不能完整的换算为二进制,这里就出现了第一次的误差......
  • 纪念上绿名,acwing基础课完结!
    唉,终于磨磨唧唧突破灰名了感谢cf902div2同样是昨天,acwing基础课也终于听完了,完结撒花!......