Java学习篇——JavaWeb：JavaScript

作用：负责给页面做动态效果。    有什么用

————语言特点：弱类型。let name=“ss” let age=15  name可以等于16不报错。

————脚本语言：不需要编译解析直接执行。

————基于面向对象开发。

————只能访问浏览器的网站：安全性强。

————交互性强：直接嵌入html页面中。

怎么用：如何在html中使用js语言

内联：在标签事件属性后面的，事件触发时执行。      在标签上添加//

内部：用 script标签

外部：新建javaScript 文件。

javaScript  的语法：

变量声明

使用let声明变量；和java作用域相同。     没有编译所以不报错 ，所以访问不到。      

使用var声明变量；for（var i=1；i<5；i++）{

    var y=i+1；

}

var z=y+i     可以大括号外部作用，但是容易更改值，不推荐

数据类型：

只有引用类型
 

常见类型：

number 数值类型；所有数值类型总和

String 字符串；    单引号双引号修饰。

boolean值；     ture  flase。

undefined:未定义     变量声明为赋值时。

获取变量的类型  ：typeof

运算符：

算数运算符——js除法根据结果保留小数。

逻辑运算符——&& || ！

关系运算符——><>=<===!= ===先比较类型，类型相同再比较值。

各种语句：

——if else

——while

——do while

——switch case

——for

方法

方法：

function 方法名 （参数）{}

常见四种方法声明

<script>
    /*注释
    *
    * 1、无参无返回值*/
    function f1() {
        console.log('f1方法')
    }
    f1();
    /*
    * 2、有参无返回值*/
    function f2(name,age) {
        console.log(name+'已经'+age);
    }
    f2('张飞',3)
    /*
    * 3、无参有返回值*/
    function f3() {
        console.log('f3')
            return'我是无参有返回值'

    }
    f3();
    /*
    * 4、有参有返回值*/
    function f4(name,palce) {
        console.log('f4')
        return name+palce;

    }
    f4('张三丰',103);
    /**
     * 5、全新声明方式
     * */
    let f5=function (name,age) {
        return name+'已经'+age;
    }
    f5('张飞',45)
    let F5=f5('李四',85)
    console.log(F5)//打印
    /***
     * 6、像new 对象新建方法  注意Function  F大写
     */
    let f6=new Function('name','age','console.log(name+"已经"+age)')
    let f6方法=f6('飞飞',153)
    console.log(f6方法)

</script>

页面相关方法：  获取对象  调用方法。

/*1、通过id获取元素对象*/   
<script>
let d=document.getElementById('d1')

</script>
/*
  2、通过选择器找到元素对象。
 */

<input type="text" value="xxxx">
<script>
    let e=document.querySelector('input');
    e.value='改掉了文本的内容'
</script>

/*
3、点击调用 方法
*/
<input type="button" value="按钮" onclick="f1()">
<script>
    function f1() {
        let d=document.getElementById('d1')
//获取和修改元素内容
        console.log(d.innerText)
        d.innerText='已二次修该元素内容'
        let e=document.querySelector('input');
        e.value='改掉了文本的内容xxx'
    }
</script>

---

---

---

javascript对象分类。

内置对象：number  string  boolean

BOM浏览器对象模型（后续添加）
包含和浏览器相关内容
window对象: 该对象的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.
DOM: Document Object Model 文档对象模型, 文档指html标签, 包含和页面相关内容

BOM
window对象中常见的方法
alert(“xxx”) 弹出提示框
confirm(“xxxx”) 弹出确认框
prompt(“xxx”) 弹出文本框
parseInt() 将字符串或小数转成整数
parseFloat() 将字符串转成整数或小数
isNaN() 判断变量是否是NaN
console.log() 浏览器控制台输出
let timer = setInterval(方法,时间间隔) 定时器
clearInterval(timer) 停止定时器
setTimeout(方法,时间间隔) 只执行一次的定时器
Window对象中常见的属性
location 位置        页面位置
location.href 获取或修改浏览器的请求地址
location.reload() 刷新页面
location.search 获取浏览器地址栏中的参数
history 历史(指当前浏览器页卡的历史, 关闭后则清除)
history.length 历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
history.go(n) n是正值前进 负值后退 0代表刷新

DOM 文档对象模型
和页面相关内容
通过元素的id获取元素对象
let 元素对象 = document.getElementById(“元素id”);
通过CSS中接触到的选择器获取元素对象
let 元素对象 = document.querySelector(“选择器”);
获取和修改元素的文本内容
元素对象.innerText; //获取
元素对象.innerText=“xxx”; //修改
获取和修改表单中的控件的值
控件.value //获取
控件.value=“xxx” //修改
创建元素对象
let 元素对象 = document.createElement(“标签名”);
添加元素对象
document.body.appendChild(元素对象);
给元素的属性赋值
元素对象.src = “…/b.jpg”;
元素对象.属性=“值”;

---

---

---

 JavaScript中自定义对象

 //定义一个空的Person对象
  function Person() {}
  //实例化一个Person对象
  let p1 = new Person();
  //动态添加属性
  p1.name = "张三";
  p1.age = 18;
  //动态添加方法
  p1.run = function () {
    console.log("我叫"+this.name+"今年"+this.age);
  }
  //调用方法
  p1.run();
  //不需要定义,直接实例化对象
  let p2 = {};
  p2.name = "李白";
  p2.age = 20;
  p2.run = function () {
      console.log("李白的方法执行了!");
  }
  p2.run();
  //实例化自带属性和方法的对象
  let p3 = {
      name:"刘备",
      age:30,
      run:function () {
          alert(this.name+":"+this.age);
      }
  }
  p3.run();
  // 通过自定义对象封装数据
    let arr = [{name:"小米手机",price:"3000",count:500},
        {name:"小米电视",price:"3000",count:500},
        {name:"华为手机",price:"3000",count:500},
        {name:"华为电视",price:"3000",count:500}]

 for (let item of arr) {
      let tr = document.createElement("tr");
      let nameTd = document.createElement("td");
      let priceTd = document.createElement("td");
      let countTd = document.createElement("td");
      nameTd.innerText = item.name;
      priceTd.innerText = item.price;
      countTd.innerText = item.count;
      tr.append(nameTd,priceTd,countTd);
      let table = document.querySelector("table");
      table.append(tr);
</script>
</body>
</html>