HTML基础三-JS
一、JAVA Script
1.1 基本用法
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，影响页面打开的速度，存在风险，所以通常放在htmlbody的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。
注释
单行注释通过 // 多行通过 /* */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摩羯座</title>
</head>
<body>
<div>
<input type="button" onclick="demo()" value="登录">
</div>
<script>
function demo() {
console.log('123123') // 等同于python里的input
alert('提示框！！！') // 提示框
flag = confirm('确认要登录吗？') //确认框
console.log(flag)
}
</script>
</body>
</html>
1、点击【登录】
出现弹窗
2、点击【确定】
1.2 html引入JS文件
可以在<header>或者<body>中引入
1、创建js文件：demo.js
function demo() {
console.log('123123') // 等同于python里的input
alert('提示框！！！') // 提示框
flag = confirm('确认要登录吗？') //确认框
console.log(flag)
}
2、在html里 <body>标签-导入js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="button" onclick="demo()" value="登录">
</div>
<script src="demo.js"></script>
</body>
</html>
1.3 写一个登录接口
1、定义好登录用户名、密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" placeholder="请输入用户名" id="username">
<input type="password" placeholder="请输入密码" id="password">
<input type="button" onclick="login()" value="登录">
</div>
<script>
function login() {
var username = 'wdc';
var password = '123456';
var user = document.getElementById('username').value;
var passwd = document.getElementById('password').value;
console.log(user);
console.log(passwd);
/*
* 1、获取用户名和密码的value
* 2、if 进行判断
* */
}
</script>
</body>
</html>
2、判断用户名、密码是否验证通过
js的判断语句
if (username == user){ console.log('用户名验证通过')}else { alert('你的用户名不对')}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" placeholder="请输入用户名" id="username">
<input type="password" placeholder="请输入密码" id="password">
<input type="button" onclick="login()" value="登录">
</div>
<script>
function login() {
var username = 'wdc';
var password = '123456';
var user = document.getElementById('username').value;
var passwd = document.getElementById('password').value;
console.log('username-->'+user);
console.log('password-->'+passwd);
// if a==b:
// xxx
if (username == user){
console.log('用户名验证通过')
}else {
alert('你的用户名不对')
}
/*
* 1、获取用户名和密码的value
* 2、if 进行判断
* */
}
</script>
</body>
</html>
3、if语句，and的用法 要加“&&”
if (username == user && password==passwd ){
console.log('登录成功')
}else {
alert('你的用户名不对')
}
4、if语句，else if用法
if (username == user && password==passwd ){
console.log('登录成功')
}else if (username != user) {
console.log('用户名有错误！')
}else if(password != passwd){
console.log('密码错误！')
}else {
console.log('都错了')
}
5、for 循环
function test() {
var l = ['奔驰','宝马','奥迪','凯迪拉克']; //生命数组
// var l1 = new Array(1,2,3,4); //第二种声明方式
for (var i in l){
console.log(l[i])
}
或者
function test() {
var l = ['奔驰','宝马','奥迪','凯迪拉克']; //生命数组
// var l1 = new Array(1,2,3,4); //第二种声明方式
for (var i=0;i<l.length;i++){
console.log(l[i])
}
6、字典 循环
function test() {
var m = {"name": "wdc", "age": 18};
for (var k in m) {
console.log(m[k])
}
}
// 不能用下方这种方式循环字典
for (var i=0;i<l.length;i++) {
console.log(l[i])
}
7、字符串 循环
function test() {
var s = '测试循环字符串';
for (var i in s) {
console.log(s[i])
}
}
或者
function test() {
var s = '测试循环字符串';
for (var i = 0; i < s.length; i++) {
console.log(s[i])
}
}
1.4 匿名函数
<body>
<input type="button" value="匿名函数测试" id="i1">
<script>
element = document.getElementById('i1');
element.onclick = function () {
console.log('测试匿名函数')
}
</script>
</body>
1.5 作用域
<body>
<input type="button" value="作用域" onclick="test_var()">
<script>
function test_var() {
var name = 'wdc'
console.log(name)
}
</script>
</body>
HTML基础三-JS的更多相关文章
- 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
- Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap<基础三> 排版
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
- 前端总结·基础篇·JS（一）五大数据类型之字符串（String）
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(二)补充 前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录 这是& ...
- 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）
目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...
- 前端总结·基础篇·JS（四）异步请求及跨域方案
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
随机推荐
- [******] java多线程连续打印abc
题目描述 建立三个线程A.B.C,A线程打印10次字母A,B线程打印10次字母B,C线程打印10次字母C,但是要求三个线程同时运行,并且实现交替打印,即按照ABCABCABC的顺序打印. 5种方法 使 ...
- win10 连接samba 账号密码不正确，win7可以访问
1.本地安全策略,本地策略-安全选项,需要修改成默认的值的修改方式: 查找注册表浏览到 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\LSA ...
- Elasticsearch由浅入深（十）搜索引擎：相关度评分 TF&IDF算法、doc value正排索引、解密query、fetch phrase原理、Bouncing Results问题、基于scoll技术滚动搜索大量数据
相关度评分 TF&IDF算法 Elasticsearch的相关度评分(relevance score)算法采用的是term frequency/inverse document frequen ...
- OIDC-Open ID Connect
OpenID Connect的简称,OIDC=(Identity, Authentication) + OAuth 2.0.它在OAuth2上构建了一个身份层,是一个基于OAuth2协议的身份认证标准 ...
- 【网络知识之五】TCP
TCP协议:传输控制协议. 一.TCP保证可靠性的机制1.校验和 TCP报头有16位检验和: 由发送端填充, 检验形式有CRC校验等. 如果接收端校验不通过, 则认为数据有问题. 此处的校验和不光包含 ...
- # Leetcode 14：Longest Common Prefix 最长公共前缀
公众号:爱写bug Write a function to find the longest common prefix string amongst an array of strings. If ...
- git账户配置
一.生成github的ssh key ssh-keygen ssh-keygen -t rsa -f ~/.ssh/zzf073_rsa -C zzf073@163.com 二.配置账户公钥 1.查看 ...
- WebRTC之框架与接口
出处:http://www.cnblogs.com/fangkm/p/4370492.html 上一篇文章简单地介绍了下WebRTC的协议流程,这一篇就开始介绍框架与接口. 一提到框架,本能地不知道从 ...
- 【linux】CentOS 查看系统时间，修改时区
===============CentOS 7.6================ 1.查看系统时间 date 查看当前系统时间以及时区结果是: Mon Jul 8 09:23:31 UTC 2019 ...
- EF Core中如何设置数据库表自己与自己的多对多关系
本文的代码基于.NET Core 3.0和EF Core 3.0 有时候在数据库设计中,一个表自己会和自己是多对多关系. 在SQL Server数据库中,现在我们有Person表,代表一个人,建表语句 ...