fjl123 8 сар өмнө
parent
commit
273bb387c6

+ 40 - 0
src/main/java/com/sf/day32/01_js 的数据类型.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+
+</head>
+<body>
+
+</body>
+<script>
+    // number  string boolean  null  undefined
+    //number 类型
+    console.log(typeof 3.14)
+    console.log(typeof 30)
+
+    // 字符串类型
+    // 在JS 中定义字符串 可以使用双引号也可以使用单引号
+    console.log(typeof "你好呀 JavaScript")
+    console.log(typeof '你好呀 js')
+
+    // boolean 类型
+    console.log(typeof true)
+    console.log(typeof false)
+    // console.log(typeof 1>3)
+
+    // 注意: 如果你不给变量设置值 他默认就是undefind类型
+    var a;
+    console.log(typeof a)
+
+    var b  =  "abc"/10;   // Nan
+    console.log(typeof b)
+
+    console.log(typeof null)
+
+
+
+
+</script>
+</html>

+ 48 - 0
src/main/java/com/sf/day32/02-JS 运算符.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+<script>
+    var a = 1
+    var b = "1"
+    //== 只比较值 不比较类型,   === 先比较值,如果值相等就比较类型
+    // console.log(a == b)      //true
+    // console.log(a === b)     //false
+    // 0 Nan "" false  undefined  false
+    console.log(123 && 456 && null)      //null
+    console.log(123 && 555 && "hello")   //hello
+    console.log(false || true || 123)    //true
+
+    console.log(NaN && undefined && 123)   //Nan
+    console.log(undefined || NaN || 123)   //123
+    console.log(true || 123 || "hello")    //true
+
+    console.log("" && 123 && null)      //""
+    console.log("hello" && true && 0)   //0
+
+    console.log("hello" && 123 || true)  //123
+    console.log(0 || "hello" && 456)     //567
+
+    if(123123123){
+        console.log("123")
+    }
+
+    var a = 123;
+    if(a){
+        console.log(a)
+    }
+    if(!0){
+        console.log(11111)
+    }
+
+    if(!""){
+        console.log(22222)
+    }
+
+</script>
+</html>

+ 48 - 0
src/main/java/com/sf/day32/03-逻辑运算符.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+<script>
+    /**
+     * 逻辑运算符在我们js 当中 if  switch   for  和java是一样的
+     */
+    var a = 80
+    if (a >= 90) {
+        console.log("优")
+    } else if (a >= 80 && a < 90) {
+        console.log("良")
+    } else if (a >= 70 && a < 80) {
+        console.log("中")
+    } else if (a >= 60 && a < 70) {
+        console.log("差")
+    } else {
+        console.log("不及格")
+    }
+
+    var grade = "A";
+    switch (grade) {
+        case "A": {
+            console.log("A")
+            break
+        }
+        case "B": {
+            console.log("B")
+            break
+        }
+        default: {
+            console.log("默认值")
+        }
+    }
+
+    // for 循环进行遍历
+    for (var i = 0; i < 10; i++) {
+        console.log(i)
+    }
+
+</script>
+</html>

+ 67 - 0
src/main/java/com/sf/day32/04-JS 函数.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<input type="text" id="username" value="123">
+</body>
+<script>
+    /**
+     * 函数语法: function 函数名(形参....){函数体}
+     *
+     * 函数作用: 为了减少代码重复性,提高代码的复用性
+     */
+    function add(x,y) {
+        return x + y
+    }
+
+    var a = 1;
+    var b = 2;
+    console.log(add(a,b))
+    var c = 2;
+    var d = 3;
+    console.log(add(c,d))
+
+    var f = 5;
+    var g = 6
+    console.log(add(f,g))
+
+    // 定义一个匿名函数
+    /*
+     * 语法: var 变量 =  function(){}
+     *      变量();
+     */
+    // 这样去写形参表示b 的默认值就是1 , 如果你传递了值拿就使用你传递的值, 如果不传递默认值就是1
+    var fun = function (a,b=1) {
+        // 在函数内部当中隐藏一个arguments , 这个argements 中是包含了我们传递所有参数
+        // 简单了解即可, 因为以后我们传递参数 和形参会保持一致
+        console.log(arguments[0])
+        console.log(a,b);
+        console.log("这是一个匿名函数")
+    }
+
+    fun(1,3,3,4,5);
+
+    // 箭头函数
+    var fun1 = a => console.log(a)
+    fun1(123);
+    // 如果有多个参数 ,函数体只有一个
+    var fun2 = (a,b) => a - b;
+    console.log(fun2(2,1))
+
+    //如果函数体有多行内容
+    // 如果有多行代码,要使用{}
+    var fun3  = (a,b) =>{
+        // console.log(arguments)
+        console.log("第一行代码")
+        console.log("第二行代码")
+    }
+    fun3();
+
+
+
+
+</script>
+</html>

+ 34 - 0
src/main/java/com/sf/day32/05-登录练习.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<form action="">
+    账号: <input type="text" name="username" id="username"> <br><br>
+    密码: <input type="password" name="password" id="password"> <br><br>
+    <input type="button" value="按钮" onclick="login()">
+</form>
+</body>
+<script>
+    // login 当中完成登录操作
+    function login(){
+        // 获取到输入框的账号和密码
+        var username = document.getElementById("username").value
+        var password = document.getElementById("password").value
+        // 判断或者密码是否为空, 打印账号不能为空
+        if(!(username && password)){
+            alert("账号密码不能为空")
+            return
+        }
+
+        if("admin" == username && "123" == password){
+            alert("登录成功")
+        }else{
+            alert("登录失败")
+        }
+
+    }
+</script>
+</html>

+ 47 - 0
src/main/java/com/sf/day32/06-计算器练习.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<input type="text" id="number1" name="number1">
+<select  id="calc">
+    <option value="+">+</option>
+    <option value="-">-</option>
+    <option value="*">*</option>
+    <option value="/">/</option>
+</select>
+<input type="text" id="number2" name="number2">
+<input type="button" onclick="calc()" value="=">
+<span id="ret"></span>
+</body>
+<script>
+    // 首先你要计算 要拿到两个input 框的值1  2
+    // 拿到select 值  , 判断 + - * /  最后进行计算
+    // 把计算完以后结果设置span 标签中
+    function calc() {
+        var num1 = document.getElementById("number1").value
+        var num2 = document.getElementById("number2").value
+
+        var str = document.getElementById("calc").value
+        console.log(num1,num2,str)
+        console.log(typeof str)
+        // 获取num1 和num2 是字符串 把字符串转成number parseInt
+        var ret = 0;
+        if("+" == str){
+            ret =  parseInt(num1) + parseInt(num2)
+        }else if("-" == str){
+            ret = parseInt(num1) - parseInt(num2)
+        }else if("*" == str){
+            ret = parseInt(num1) * parseInt(num2)
+        }else if("/" == str){
+            ret = parseInt(num1) / parseInt(num2)
+        }
+        console.log(ret)
+        // 把计算完记过设置到span
+        var ret1 = document.getElementById("ret")
+        ret1.innerText = ret
+    }
+</script>
+</html>

+ 63 - 0
src/main/java/com/sf/day32/07-JS 对象.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+<script>
+    var person = {
+        name: "zhangsan",
+        age: 10,
+
+        eat: function () {
+            console.log("吃东西")
+        }
+    }
+
+    var person1 = {
+        name: "lisi",
+        age: 20,
+
+        eat: function () {
+            console.log("吃东西")
+        }
+    }
+    // console.log(person)
+    // // 获取对象属性   对象名.属性名    对象名.函数名(参数)
+    // console.log(person.name)
+    // console.log(person1.name)
+    var obj = new Object()
+    obj.name = "lisi";
+    obj.fun = function () {
+        console.log("这是一个函数")
+    }
+
+    console.log(obj.name)
+    obj.fun();
+
+    // 第三种创建对象方式 采用构造器创建
+    /**
+     *  function Person(name,age){
+     *      this.name = name
+     *      this.age = age
+     *      this.say = function(){}
+     *  }
+     *
+     *  var p = new Person("zhangsan",10);
+     */
+    function Person(name,age){
+        this.name = name
+        this.age = age
+        this.say =  function () {
+            console.log(123)
+        }
+    }
+
+    var p = new Person("zhangsan",10)
+    console.log(p.name)
+    p.say();
+</script>
+</html>

+ 60 - 0
src/main/java/com/sf/day32/08-JS 对象练习.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<form action="">
+    姓名: <input type="text" name="name" id="name"> <br><br>
+    年龄: <input type="text" name="age" id="age"> <br><br>
+    邮箱: <input type="text" name="email" id="email" placeholder="123@qq.com"> <br><br>
+    密码: <input type="text" name="password" id="password"> <br><br>
+    城市: <select name="city" id="city">
+                <option value="-1">请选择</option>
+                <option value="0">哈尔滨</option>
+                <option value="1">绥化</option>
+                <option value="2">佳木斯</option>
+          </select><br><br>
+          <input type="button" value="修改" onclick="update()">
+</form>
+</body>
+<script>
+    var person = {
+        id: 1,
+        name: "zhangsan",
+        age: 10,
+        email: "123123@qq.com",
+        password: 123,
+        city: 0
+    }
+
+    function showInfo(){
+        // 把对象当中数据 设置到form 表单中
+        document.getElementById("name").value = person.name
+        document.getElementById("age").value = person.age
+        document.getElementById("email").value = person.email
+        document.getElementById("password").value = person.password
+        document.getElementById("city").value = person.city
+    }
+
+    showInfo()
+
+    function update(){
+        var name = document.getElementById("name").value;
+        var age = document.getElementById("age").value;
+        var email = document.getElementById("email").value;
+        var password = document.getElementById("password").value;
+        var city = document.getElementById("city").value;
+        console.log(name,age,email,password,city)
+
+        // 拿到以后修改person 数据
+        person.name = name
+        person.age= age
+        person.password = password
+        person.city = city
+        person.email = email
+        showInfo()
+    }
+</script>
+</html>

+ 59 - 0
src/main/java/com/sf/day32/09-JS的内置对象Array和String.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+<script>
+    // 方式一 创建数组  语法: new Array(元素....)
+    var arr = new Array(1,2,3,5,"hello",true)
+    console.log(arr)
+    // 方式二 [2,3,4,5,6,78]
+    var arr1 = [1,2,3,5,6,7,8,"hello",false]
+    console.log(arr1)
+
+    // 需求: 获取arr1 数组当中 2 索引的数据
+    // console.log(arr1[2])
+    // console.log(arr1[18])
+    for(var i = 0; i< arr1.length; i++){
+        console.log(arr1[i])
+    }
+
+    // 把索引为3的数据修改成123
+    // 修改数组中数据 数组【索引】 = 修改的值
+    arr1[3] = 123
+    console.log(arr1);
+
+    // 数组当中常见的方法
+    // forEach 遍历数组当中每一个元素
+    arr1.forEach(function (item,index) {
+        console.log(item, index)
+    })
+
+    // push 往数组的末尾去添加元素
+    // arr1.push(1,2,3)
+    // console.log(arr1)
+
+    // 需求: 从3号索引开始删除,删除4个元素
+    arr1.splice(3,4)
+    console.log(arr1)
+
+
+    /**
+     * 需求一 : 在界面当中展出出来这个数组 [1,2,3,4,5,6,7,8,3,9,9,0,3]  div 展示在界面中
+     * 按钮: 统计3次数 , 当点击的时候在浏览器中显示次数
+     *
+     * 需求二: 在浏览器用户信息    1   zhangsan   10   123@qq.com
+     *         然后弄个分割线 -----------------------------------------
+     *         在分割线下面可以输入     id  :    name :   xx    age: xx  email:xx
+     *         然后有一个   新增按钮 , 当点击新增在分割线上面要多一条数据如下
+     *         1   zhangsan   10   123@qq.com
+     *         2   lisi       20   222@qq.com
+     *
+     */
+
+</script>
+</html>

+ 32 - 0
src/main/java/com/sf/day32/10-数组练习1.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<span id="msg"></span>
+<div id="div"></div>
+<!--在html 当中button 标签是按钮标签 无动作按钮和input type=button-->
+<button id="btn" onclick="fun()">统计3出现次数</button>
+</body>
+<script>
+    // 需求一 : 在界面当中展出出来这个数组 [1,2,3,4,5,6,7,8,3,9,9,0,3]  div 展示在界面中
+    //  按钮: 统计3次数 , 当点击的时候在浏览器中显示次数
+    var arr = [1,2,3,4,5,6,7,8,3,9,9,0,3]
+    document.getElementById("div").innerText = arr
+
+    var num = 0
+    function fun() {
+        arr.forEach(function (item,index) {
+            if(item == 3){
+                console.log("-----")
+                num = num+1;
+            }
+        })
+        // 把我们计算出来num  设置span 标签中
+        document.getElementById("msg").innerText = num;
+
+    }
+</script>
+</html>

+ 47 - 0
src/main/java/com/sf/day32/11-数组的练习2.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<div id="div"></div>
+<hr>
+<form action="">
+    id:<input type="text" name="id" id="id"> <br> <br>
+    name:<input type="text" name="name" id="name"> <br> <br>
+    age:<input type="text" name="age" id="age"> <br> <br>
+    email:<input type="text" name="email" id="email"> <br> <br>
+    <input type="button" value="新增" onclick="add()">
+</form>
+</body>
+<script>
+    // 需求二: 在浏览器用户信息    1   zhangsan   10   123@qq.com
+    // *         然后弄个分割线 -----------------------------------------
+    // *         在分割线下面可以输入     id  :    name :   xx    age: xx  email:xx
+    // *         然后有一个   新增按钮 , 当点击新增在分割线上面要多一条数据如下
+    // *         1   zhangsan   10   123@qq.com
+    // *         2   lisi       20   222@qq.com
+    var arr = [{id:1,name:"zhangsan",age:10,email:"123@qq.com"}]
+
+    var str = arr[0].id + " " +arr[0].name + " " + arr[0].age+ " " + arr[0].email
+    document.getElementById("div").innerText = str;
+
+    function add() {
+        var id = document.getElementById("id").value
+        var name = document.getElementById("name").value
+        var age = document.getElementById("age").value
+        var email = document.getElementById("email").value
+        var obj = {id: id,name: name,age: age,email: email}
+        // 把obj 添加到arr 数组中 push
+        arr.push(obj)
+        var str = "";
+        arr.forEach(function (item,index) {
+            str += arr[index].id + " " +arr[index].name + " " + arr[index].age+ " " + arr[index].email +"<br>"
+        })
+        console.log(str)
+        document.getElementById("div").innerHTML = str
+
+    }
+</script>
+</html>

+ 32 - 0
src/main/java/com/sf/day32/12-JS字符串.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+<script>
+    // 第一种方式  new String(字符串内容)
+    var obj = new String("abc")
+    // 第二种啊方式  单引号或者是双引号 ‘字符串内容’
+    var str = "hello word"
+    console.log(typeof obj)   //object
+    console.log(typeof str)   //string
+
+    console.log("字符串长度为:" + str.length)
+    console.log("索引为1的字符" + str.charAt(0))
+    console.log("lo所在索引位置:" + str.indexOf("lo"))
+
+    console.log(str.substring(0,2))
+
+    // 切割字符串
+    var str1 = "hello;word"
+    console.log(str1.split(";"))
+    // 判断字符串当中是否包含某一段内容
+    console.log(str1.includes("word"))
+
+
+</script>
+</html>

+ 74 - 0
src/main/java/com/sf/day32/13-JS 字符串练习.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<input type="text" id="name">
+<button id="btn" onclick="fun1()">搜索</button>
+<div id="div"></div>
+</body>
+<script>
+    // 需求1:在网页当中输入用户名:xxxx
+    // 在点击检测 :检车用户名是否存在非法字符  [*,$,-,@]
+    // 都属于非法字符,弹出框提醒用户用户名包含违法字符
+    function fun() {
+        var arr = ["*","$","-","@"]
+        // 1 获取输入框当中name
+        var name = document.getElementById("name").value
+        var flag = false;
+        // 2 便利数组
+        arr.forEach(function (item,index) {
+            if(name.includes(item)){
+                flag = true
+            }
+        })
+        if(flag){
+            alert("非法字符")
+        }
+    }
+    // 需求2 :在网页当中有一个搜索框, 用户可以输入内容 有一个搜索按钮    --------按钮
+    // 在数组中["华为手机met60","苹果手机11","华为电脑","苹果15"]
+    // 如果用户输入的华为 , 在界面要战术华为手机, 如果输入的是苹果展示的是苹果相关产品
+    function fun1(){
+        var products = ["华为手机meta60","苹果手机11","华为电脑","苹果15"]
+        var arr = [] ;
+        // 1 获取输入的内容
+        var name = document.getElementById("name").value;
+        // 2 遍历数组
+        products.forEach(function (item,index) {
+            // 3 拿到数组当中每一个元素
+            // 4 判断元素当中是否包含name
+            if(item.includes(name)){
+                // 5 如果包含放到新的数组中
+                arr.push(item);
+            }
+        })
+        document.getElementById("div").innerText = arr
+    }
+    // 需求3: 现在有一个字符串
+    // 我-爱+你=中·国
+    // 要求把 我 爱 你 中 国
+    // 从字符串提取出来展示在界面中
+    function fun3(){
+        var st = "我-爱+你=中·国"
+        var arr = st.split("-")
+        var w  = arr[0]  //我
+        console.log(w)
+
+        var st1 = arr[1]  // 爱+你=中·国"
+        var a = st1.split("+")[0]; //爱
+        var st2 = st1.split("+")[1]  //你=中·国
+
+        var n = st2.split("=")[0]  //你
+        var st3 = st2.split("=")[1] //中·国
+
+        var z = st3.split("·")[0]
+        var g = st3.split("·")[1]
+
+        console.log(w,a,n,z,g)
+    }
+    fun3()
+</script>
+</html>