一、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
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文件
可以在
1、创建js文件：demo.js
function demo() {
console.log('123123') // 等同于python里的input
alert('提示框！！！') // 提示框
flag = confirm('确认要登录吗？') //确认框
console.log(flag)
}
2、在html里
标签-导入js文件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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>Titletitle>
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>Titletitle>
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>
