JavaScript

JavaScript

JS的定义

  • 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JS文件的引入

  • js的组成

  • 组成部分 作用
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uQxpRO8I-1592820940354)(F:\MarkDownOnte\学习笔记\JavaWeb\assets\1592635171072.png)]

  • 第一种方式:

    • 放置在HTML文件中,用于某一个HTML文档

      <script>
          alert("有点意思")
      script>
      
  • 第二种方式:

    • js代码存储在单个的js文件中

      // 外部的js文件
      alert("外部引入")
      
      
      <script src="jsfile/test.js">
      script>
      

js的日常使用

  • 嵌入动态文本于HTML页面
  • 对浏览器事件做出响应
  • 读写[HTML元素]
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息
  • 控制cookies,包括创建和修改等
  • 基于Node.js技术进行服务器端编程

基本输入输出语句

  • 输入框
    • prompt 输入提示框
  • 弹出框
    • alert
  • 控制台输出
    • console.log
  • 向页面输出
    • document.write

定义变量

  • 定义变量
    • 定义局部变量 :let 变量名=值
    • 定义全局变量 :直接变量名=值 或者用var修饰
    • 定义常量: const 变量名=值

原始数据类型

  • 布尔类型 boolean
  • 数值类型数包括整数与小数 number
  • 字符串类型数据 string
  • 对象类型 object
  • 未定义类型 undfinde
  • 判断数据类型方法
    • typeof 变量名

运算符

  • 比较运算符

    == 判断值是否相等

    === 判断数据类型与值同时相等才返回true

  • 三元运算符

    • 比较表达式? 值一:值二;
  • 字符串类型的数据在参与运算的时候会自动转换数据类型

断点调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFGW59hC-1592820940356)(F:\MarkDownOnte\学习笔记\JavaWeb\assets\1592641098898.png)]

循环分支语句

  • switch case
  • if else else if
  • for循环

定义数组

  • 数组的定义与高级操作

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>定义数组title>
    head>
    <body>
        <script>
     // 定义数组[]
     let aa=[1,2,3,4,5,6,"woqu","有点意思"];
        for(let i=0;i<aa.length;i++ ){
                document.write(aa[i]+"
    "
    ) }
    script> <script> // 数组高级操作 // 符号... let a=[1,2,3,4,5,6]; let b=[...a]; document.write("复制数组"+"
    "
    ) for(let j=0;j<b.length;j++){ document.write(b[j]) } // 合并数组 let c=[...a,...b]; c.forEach(element => { document.write(":"+element+":") }); // 把字符串转换为数组 let d=[..."把字符串转换为数组"] d.forEach(element => { document.write(element+"
    "
    ) });
    script> body> html>

js中的函数

 <script>
        //定义无参无返回值的方法
        function a(){
            document.write("无参无返回值")
        }
        // 调用函数
        a();
        // 有参有返回值
        function b(a,b){
            let c=a+b;
            return c;
        }
        // 调用函数
        let d=b(10,20);
        document.write(d);
        // 可变参函数
        function c(...params){
            // 传递的参数是一个可变的数组
            let d=0;
            params.forEach(element => {
                d+=element;
            });
            return d;
        }
        document.write("换行"+"
"
) let f=c(1,2,3,4,5,6,7,8,9,10,11); document.write(f) // 匿名函数 let niminghanshu=function(){ document.write("匿名函数") } // 调用匿名函数 niminghanshu(); // 一个函数的参数是一个函数 function rfun(fun){ // 调用传递进来的函数 let a=20; let b=30; return fun(a,b); } let mm= rfun(b); document.write("
"
+mm)
script>

JavaScript DOM介绍

  • html文件在文档对象中的解析形式

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lc2yg2xN-1592820940359)(F:\MarkDownOnte\学习笔记\JavaWeb\assets\1592788454098.png)]

    DOM中不同类型的节点在js中的对应类型:

    • Document: 文档对象
    • Element: 元素对象
      • Element:子元素
      • Attribute:对应的属性
      • Text:元素中的文本
    • Attribute: 属性对象
    • Text: 是文本对象

对每个节点进行操作

  • 节点元素的增删改查

  • 获得元素查询元素

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>
        <div id="div1">div1div>
        <div id="div2">div2div>
        <div class="cls">div3div>
        <div class="cls">div4div>
        <input type="text" name="username"/> 
    body>
    <script>
        // 对html中的标签进行操作
        let did=  document.getElementById("div1");
        alert(did);
        console.log(did)
        // 通过元素名获得元素对象
        let divs= document.getElementsByTagName("div")
        console.log(divs)
       document.write(divs.length);
       // 通过class属性获得元素对象数组
       let cls= document.getElementsByClassName("cls")
       console.log(cls);
       // 获取当前元素的父元素
       let didp=  did.parentElement
       console.log(didp)
    script>
    html>
    
  • 对元素删出修改增加

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>
        <select id="s">
            <option>---请选择---option>
            <option>北京option>
            <option>上海option>id
            <option>广州option>
            <option id="cv" >光头option>
            <option id="ss" >邹杰option>
        select>
    body>
    <script>
        // 创建新元数
        let  option= document.createElement("option");
        // 给新元素的文本赋值
        option.innerText="重庆"
        // 获得要添加元素的父元素
        let pa=document.getElementById("s")
        // 把创建的父元素添加到父元素中
        pa.appendChild(option);
        /*
        删除元素
        */
        //找到要删除的元素
        let rv= document.getElementById("cv")
        // 找到要删除元素的父元素
        let opp= option.parentElement
        opp.removeChild(rv);
        /*
        修改元素rv
        */
        // 用新元素替代老元素
        // 获得要替代的元素对象
        let  ss= document.getElementById("ss");
        // 创建新的元素
        let ns= document.createElement("option")
        ns.innerText="成都"
        // 用父元素去替代 第一个参数是新的元素 第二个参数数被替代的元素对象
        opp.replaceChild(ns,ss)
        
    script>
    html>
    

对每个元素的属性进行增删改查

  • 元素属性的CRUD

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>对属性进行操作title>
    head>
    <style>
    
    style>
    <body>
        <a >可以点a>
    
    body>
    <script>
        // 对a标签的属性进行操作
        //(增) 添加属性
        let aTag= document.getElementsByTagName("a")
        // 获得对应的标签
        let a=aTag[0];
        // 添加属性
        a.setAttribute("href","www.baidu.com")
        a.setAttribute("id","cddss")
        // 获得属性
        let value=a.getAttribute("href");
        alert(value)
        // 删除属性
        a.removeAttribute("id")
        // 对样式进行操作
        a.style.color="red"
        // 添加class熟悉
        a.className="cln"
    script>
    html>
    

对元素中的文本进行操作

  • 添加文本
    • 元数名.innerText=“值”不能对值中的html元素进行解析
  • 添加HTML元素
    • 元素名.innerHTMLl=“值” 可以对值中的标签进行解析

事件介绍

  • 定义:

    • 在某些组件执行了某些操作的时候会触发一些代码的执行
  • 常用事件

  • 事件名 说明
    onchange 用户改变域的内容
    onload 页面或者图像加载完毕
    onsubmite 表单提交
    onclick 鼠标单击
    ondbclick 鼠标双击
    onblur 元素失去焦点
    onfocus 元素的到焦点
  • 点击事件绑定函数

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件title>
    head>
    <body>
        <img id="img" src="img/404.jpg"/>
        <br>
        <button id="next" onclick="next()" >下一张button>
        <button id="previous"  >上一张button>
        <script>
            function next(){
                let img= document.getElementById("img")
               img.setAttribute("src","")
            }
            function tishi(){
                alert("测试")
            }
            let pre= document.getElementById("previous")
            pre.onclick=tishi // 这个地方不加括号相当于 是在pre中由一个onclick属性这个属性的数据类型是一个函数,然后把tishi这个函数传递给onlick这个属性所以不用加上括号
            // 在上面标签的属性中onclick后面的函数要加上括号是因为发声点击事件以后对函数进行调用
        script>
    body>
    html>
    

.getElementById(“img”)
img.setAttribute(“src”,"")
}
function tishi(){
alert(“测试”)
}
let pre= document.getElementById(“previous”)
pre.οnclick=tishi // 这个地方不加括号相当于 是在pre中由一个onclick属性这个属性的数据类型是一个函数,然后把tishi这个函数传递给onlick这个属性所以不用加上括号
// 在上面标签的属性中onclick后面的函数要加上括号是因为发声点击事件以后对函数进行调用

~~~

你可能感兴趣的:(JavaScript)