哪个网站可以做兼职讲师,财务公司,建e网网址是多少,自适应网站 响应式网站模板目录
▐ 快速认识JavaScript
▐ 基本语法
#x1f511;JS脚本写在哪?
#x1f511;注释
#x1f511;变量如何声明?
#x1f511;数据类型
#x1f511;运算符
#x1f511;流程控制
▐ 函数
▐ 事件
▐ 计时
▐ HTML_DOM对象 * 建议学习完HTML和CSS后再…目录
▐ 快速认识JavaScript
▐ 基本语法
JS脚本写在哪?
注释
变量如何声明?
数据类型
运算符
流程控制
▐ 函数
▐ 事件
▐ 计时
▐ HTML_DOM对象 * 建议学习完HTML和CSS后再来学习JavaScript没有学习的小伙伴文章末尾有相关链接哦
▐ 快速认识JavaScript
JavaScript原名叫LiveScript是由美国网景公司开发的一种前端脚本语言即不需要编译的语言像sqlpythonhtmlcss都是直接由某种解释器(引擎)解释执行也就是逐行从上向下解释执行的。
JavaScript作为前端三剑客之一其作用是为网页添加格式各样的动态功能也就是网页的行为
由于网景公司和Sun公司合作将LiveScript改名为JavaScript注意JavaScript和Java没有任何联系一个是前端脚本语言一个是后端高级语言不要因为名字相似而混为一谈。 ▐ 基本语法 JS脚本写在哪?
JavaScript的脚本写在一个script/script标签中如果在代码量很多的情况下可以写在外部js文件中再在html文件中导入外部js文件即可.
一旦标签导入其他的js文件script标签内部就不能写脚本了 ! 注释 • JavaScript中的注释分为两种,分别是单行注释 // 和多行注释 /* */ 单行注释 // 快捷键 Ctrl / 多行注释 /* */ 快捷键 Ctrl Shift / 变量如何声明? • JavaScript属于弱类型语言即变量是没有类型的给它什么类型的值就是什么类型. • 我们通过关键字var声明一个变量. var a 10;var b 5;var c true;
数据类型 • 数值型 number包含整数和浮点数 • 字符串型 string单引号或双引号都可以表示字符串 • 布尔型 boolean返回 true / false • undefined类型 声明了变量但没有赋值
var g; //此时g就属于undefined类型
alert(typeof(g)); //type()函数用于获取数据类型 • Object类型编译器本身(自带)为我们提供的一些类如日期类Date var date new Date();alert(date.getFullYear); //获取年alter(date.getMonth() 1); //获取月alert(date.getDate); //获取日 运算符
JavaScript中的运算符和Java中的运算符几乎没有差别但也有特殊所在不过大致也可分为算术运算符、比较运算符、赋值运算符、逻辑运算符、条件运算符。在此我主要给大家详细介绍下不同之处和特殊所在。
️算数运算符 特殊点 不仅表示加法运算也表示字符串的连接. var a 10;var b 5;var c 5;var d d;alert(ab);// 15 (加法运算)alert(ac);// 105 (连接作用)alert(ad);// 10d (连接作用) - 减法运算中字符串 - 数值 数值.
JavaScript中会把表达式中数字字符尝试类型转换 5 — 5
但要注意这里的字符串必须是数字若不是数字无法类型转换进行运算返回NaN(not a number) var a 10;var b 5;var c 5;var d d;alert(a-b);// 5 (减法运算)alert(a-c);// 5 (减法运算,将数字字符转化为数值)alert(a-d);// NaN (Not a Number)
NaN并不是报错它只是为我们返回了NaN结果并不是程序错误 ️比较运算符 特殊点 表示全等在此之前我们很少见到三个等号它比较的是值和类型而 只比较值. var a 5;var b 5;var c 5;alert(ac);// true (只比较值)alert(ac);// flase (比较值和类型) ️赋值运算符 ➩ 无特殊点 ️逻辑运算符 ➩ 无特殊点 ️条件运算符 ➩ 无特殊点 流程控制
JavaScript中的流程控制语法和Java中的相同例如选择结构中的 if / if else循序结构中的for循环、while循环...这些基本的语法在这里我就不详细介绍了用法和Java相同 ! ▐ 函数 在JavaScript中我们使用关键字function 来声明一个函数具体结构如下
function 函数名(参数列表){函数体[return ...] //根据情况选择是否需要返回值
} ️常用全局函数 • alert(输出内容) 弹窗显示 • parseInt() 把浮点数转为整数 把字符串转为整数 (前提是该字符串是数字) 如果转换内容为字符串只将开头数字部分转换若字母开头则无法转换 var a6.25;var b parseInt(a);alert(b);//6var c 12.5db5a;var d parseInt(c);//12 (只将开头数字部分转换)alert(d);var ea123;var f parseInt(e);alert(e);//a123 (无法转换) • parseFloat() 把整数转为浮点数语法和parseInt相同 • typeof() 获取变量的数据类型 • eval() 将传入进来的字符串当作js脚本执行 var res 23*4;alert(eval(res));// 14 ▐ 事件 在JavaScript中事件指的是在网页上发生的交互动作或状态变化例如用户点击按钮、输入文本、滚动页面等。通过监听这些事件可以在特定的情况下执行相应的操作或函数实现交互和动态效果。 ️常用事件: • onclick 鼠标单击事件 • dblclick 鼠标双击事件 • onblur 标签失去焦点 • onfocus 标签获得焦点 • onmouseover 鼠标移到某标签上 • onmouseout 鼠标从某标签上移开 • onkeydown 用户按下键盘按键 • onload 网页加载完毕后触发相应的的事件处理程序 • onchange 当前标签失去焦点并且标签的内容发生改变时触发事件处理程序 ➩ 在这里给大家简单演示下 scriptfunction test(){console.log(事件被触发);}/scriptbody!-- onclick鼠标点击事件 --input typebutton value单击触发 onclicktest() /br /!-- onfocus标签获得焦点 --input typetext onfocustest()/body 在浏览器中右键—检查—打开调试界面—点击控制台 ▐ 计时
通过使用JavaScript我们可以做到在一个设定的时间间隔之后来执行代码而不是在函数被调用后立即执行也称之为计时事件.
️常用方法
○ setTimeout • 用法setTimeout ( 函数 , 时间 ) • 含义表示延迟 指定时间 后调用 指定函数 且只调用一次.
○ clearTimeout • 用法clearTimeout ( number ) • 含义关闭setTimeout定时器
这里的参数number是定时器开始时setTimeout返回的一个整数编号
○ setInterval • 用法setInterval ( 函数 , 时间 ) • 含义表示每隔 指定时间 就调用一次 指定函数 只要不关闭定时器就会一直调用.
○ clearInterval • 用法clearTimeout ( number ) • 含义关闭setInterval定时器
同理这里的参数number是定时器开始时setInterva返回的一个整数编号
关于JavaScript中计时的详细介绍请阅读该文章https://blog.csdn.net/2301_79263365/article/details/139471844?spm1001.2014.3001.5502 ▐ HTML_DOM对象 * JS HTML DOM是我们学习JavaScript过程中非常重要的内容它可以解决如何在JavaScript中操作网页中的标签? 这个问题。 Dom是document Object Model (文档对象模型) 的缩写. JavaScript认为网页中的每个标签都是一个对象在js中把这一类标签对象称为html_dom对象
既然我们要操作网页中的标签那么第一步肯定是先拿到标签对象那么第一个问题来了
如何在js中获得网页中的标签对象
在网页加载完毕后在js中生成一个document对象(表示整个html文档)里面提供了一个方法 getElementById() //通过标签id获得网页中的标签对象var obj1 document.getElementById(txt1);var obj2 document.getElementById(txt2);
拿到网页中的标签对象后就可以通过dom对象操作标签的属性了(包括css属性). style#box{width: 300px;height: 300px;}/stylescriptfunction test(){var obj document.getElementById(box);obj.style.backgroundColorblue; }/script/headbodyinput typebutton onclicktest() value蓝色/div idbox/div/body
除此之外我们还可以操作标签体中的内容 innerText 把标签内部值拿到,获得标签体中的文本内容 innerHtml 获得标签内的所有内容(包括子标签) 推荐文章 : HTML基本语法https://blog.csdn.net/2301_79263365/article/details/138354155?spm1001.2014.3001.5501HTML常用标签https://blog.csdn.net/2301_79263365/article/details/138555452?spm1001.2014.3001.5501CSS基本语法https://blog.csdn.net/2301_79263365/article/details/138368375?spm1001.2014.3001.5501CSS盒子模型https://blog.csdn.net/2301_79263365/article/details/138595204?spm1001.2014.3001.5501CSS浮动https://blog.csdn.net/2301_79263365/article/details/139303652?spm1001.2014.3001.5501 本次的分享就到此为止了希望我的分享能给您带来帮助创作不易也欢迎大家三连支持你们的点赞就是博主更新最大的动力如有不同意见欢迎评论区积极讨论交流让我们一起学习进步有相关问题也可以私信博主评论区和私信都会认真查看的我们下次再见 海漫浩浩,我亦苦作舟!大家一起学习,一起进步! 本人微信g2279605572
