HTML基础之JS
时间:2019-12-07
本文章向大家介绍HTML基础之JS,主要包括HTML基础之JS使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
HTML中的三把利器的JS 又称为JavaScript,看着好像和Java有点联系,实际上他和java半毛钱关系都没有,JavaScript和我们学习的Python、Go、Java、C++等,都是一种独立的语言,Python的解释器有Python2.7、Python3.x,浏览器具有解释JavaScript的功能,所以它才是HTML的三把利器之一。
在HTML中可以将JavaScript/JS的代码写在head中,被script标签所包裹,当浏览器解释HTML时,遇到style标签时,按照CSS规则解释,遇到Script标签时,按照JavaScript的语法规则解释。
引入JavaScript代码,类似于Python的import
<script src="public.js" type="text/javascript"></script>
head中引入JS与body中引入JS区别
html代码从上而下解析,如果在head中引入JS,影响页面打开的速度,存在风险,所以通常放在html body的最下方,这样页面内容先展示,最后在加载JS。注:写在最下面要有底线,写在body内部的最底下。
注释
单行注释通过 // 多行通过 /* */
举例:input绑定一个onclick事件,输出日志到console:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="demo()" value="login"> <script> //写或者引入js代码 function demo() { // console.log('denglu') /* 输出到console,相当于python中的打印*/ // alert('提示框') /*弹出提示框*/ flag=confirm('确认要提交吗') /*弹出确认框,取消返回false,确认返回true*/ console.log(flag) } </script> </body> </html>
引入js文件:把上例中的demo写一个js文件,然后导入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入js的位置可以在head中,也可以在body中, 放到这里由于代码从上至下执行,所以会卡在head这里,影响体验,所以一般放置body下面--> //<script src="j.js"></script> </head> <body> <input type="button" onclick="demo()" value="login"> <script src="j.js"></script> </body> </html>
判断语句:
if判断: <body> <input type="text" placeholder="请输入用户名" id="username"> <input type="password" placeholder="请输入密码" id="passwd"> <input type="button" onclick="login()" value="login"> <script> function login() { var username = 'lll'; var password = '123'; /* * 1、获取用户名、密码 * 2、if判断 * */ var user = document.getElementById('username'); //定位到输入的用户名 var passwd = document.getElementById('passwd'); //定位到输入的密码 console.log('username--->'+user); //拼接 console.log('passwd--->'+passwd); if (username == user && password==passwd){ console.log('登录成功') }else if(username != user){ console.log('用户名错误') }else if(password !=passwd){ console.log('密码错误') }else { console.log('都错了') } } </script> </body> ## 补充、js中的想要数据类型和值完全匹配,要用===(python中是==) if(1=='1') //这个为true if(1==='1') //这个才能判断int好人字符串不匹配,校验不通过 swith判断: //swith是js特有的,可用于多个业务逻辑,case1干什么,case2干什么;但是需要完全匹配 switch (a) { case 1: console.log('这是1'); break; case 2: console.log('这是2'); break; default: console.log('啥也不是') }
for循环
<!--str和list循环一样;字典不能用第二种循环方法--> // list两种声明方式 // var l1=[1,2,3,4] // var l2 = new Array(1,2,3,4) /*for循环*/ function test() { var l = ['奔驰','宝马','奥迪','凯迪拉克']; // 声明数组 for (var i in l) { console.log(l[i]) for (var i = 0; i < l.length; i++) { console.log(l[i]) } } } var m ={"id":1,"name":'ksk'} for (var k in m){ console.log(k) console.log(m[k]) } e = document.getElementById('dd') e.onclick = function () { console.log('测试匿名函数') <!--匿名函数可以稍微保护代码不被泄露--> } </script> </body>
匿名函数
<body> <input type="button" value="匿名函数" id="i1"> <script> e = document.getElementById('i1') e.onclick = function () { console.log('测试匿名函数') <!--匿名函数可以稍微保护代码不被泄露--> } </script> </body>
原文地址:https://www.cnblogs.com/lsl1230/p/12002481.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法