自顶向下Web开发-1 前端部分-2 JavaScript
  • JavaScript(JS)是一门跨平台、面向对象的脚本语言。

1 引入方式

引入方式即指js代码与html页面代码的结合方式。(2种)

内部脚本

内部脚本:将JS代码定义在HTML页面中:

  • JS代码必须放在<script></script>标签之间
  • 在HTML文档中,可以放在任意地方,放置任意数量的<script>
  • 一般把脚本置于<body>元素的底部,可改善显示速度

例:

<script>
        alert("Hello JS!");
</script>

外部脚本

外部脚本:将代码定义在外部JS文件中,然后引入到html页面

  • 外部JS文件中,只包含JS代码,不带<script>标签
  • <script>标签不能自闭(<script></script>要都写)

例:

<script src="xxx/xxx.js"></script>

2 基础语法

2.1基本书写语法

  • 区分大小写
  • 每行结尾分号可有可无(建议写)
  • 注释:
    • 单行注释:// xxx
    • 多行注释:/* xxx */
  • 大括号表示代码块

2.2输出语句

  • 使用window.alert()写入警告框;
  • 使用document.write()写入HTML输出;
  • 使用console.log()写入浏览器控制台;

例:

  • window.alert()
  • document.write()
  • console.log()

2.3 变量

JS是一门弱类型语言,变量可以存放不同类型的值

~使用var关键字来声明变量~ (被弃用)

  • 使用 let 关键字定义变量,只在所在代码块内有效,不允许重复声明;
  • const定义只读的常量,不能改变;
let a = 10;
a="Hello JS!";

2.4 数据类型

分为 原始类型引用类型

原始类型:

  • number:整数、小数、NaN
  • string:字符串
  • boolean:布尔,true false
  • null:对象为空
  • undefined:声明变量未初始化的默认值;

使用typeof运算符可以获取数据类型;

例:

<script>
        alert(typeof(3));//number
        alert(typeof 1.14);//number
        
        alert(typeof "A");//string
        alert(typeof 'abcd');//string

        alert(typeof true);//boolean

        alert(typeof null);//object

        let a;
        alert(typeof a);//undefined
        alert(a);//undefined

</script>

2.5 运算符

与java基本一样。除了

==与===

==会进行类型转换,===不会进行类型转换

2.6 类型转换:

  • 字符串类型转数字:parseInt()
parseInt("123");//123
parseInt("12A3");//12
parseInt("A123");//NaN

将字符串字面值转数字。如果字面值不是数字,则转为NaN。

  • 其他类型转为boolean:
    • number:0和NaN转false,其他为true;
    • string:空字符串为false,其他为true;
    • Null 和 undefined:false

2.7 流程控制:

同一般语言一样

3 函数

定义:

JS函数通过 function 关键字进行定义;

  • 定义方式一:
function functionname(参数1,参数2...)
{
    //...
}
  • 定义方式二:
var functionname= function(参数1,参数2...)
{
    //...
}

注意:

  • 弱类型语言:形参不需要类型;
  • 返回值也不需要类型,直接return;

调用:函数名称(实际参数表)

例:

        //定义一
        function f1(a,b)
        {
            return a+b;
        }

        //定义二
        let f2=function(a,b)
        {
            return a+b;
        }

        //调用
        alert(f1(10,20));
        alert(f2(20,60));

4 对象

JS中主要有三种对象:JS自身提供的基础对象BOM(浏览器对象模型)、DOM(文档对象模型);

4.1 Array数组对象

JS中Array对象用于定义数组。

定义:

  • 方式一:

let 变量名= new Array(元素列表);

  • 方式二:

let 变量名 = [元素列表];//注意是方括号而非花括号

访问:

通过索引访问

arr[索引]=值;

注意:

JS中数组长度可变

可以直接访问数组名来显示整个数组,如alert(arr);

属性:

  • length : 设置或返回数组中元素的个数。

方法:

  • forEach( ) : 遍历数组中每个有值的元素,并调用一次传入的函数。(可使用 => 简化函数定义语法。(参数表)=>{函数体})
  • push( ): 将新元素添加到数组的末尾,并返回新的长度。
  • splice( ):从数组中删除元素

4.2 String 对象

定义:

  1. let 变量名 = new String("...");
  2. let 变量名 =”…”;

属性:

  • length : 字符串的长度

方法:

  • charAt( ) : 返回在指定位置的字符;
  • indexOf( ):检索字符串,返回索引;
  • trim( ) : 去除字符串两边的空格;
  • substring():提取字符串中两个指定索引号之间的字符(含头不含尾)

4.3 JSON对象

4.3.1自定义对象

4.3.2 JSON对象

全称JavaScript对象标记法。

JSON是通过JS对象标记法书写的文本,可以理解为一种文本/数据格式。

多用作为数据载体,在网络中传输。

JSON内都是键值对。

注意要使用双引号。

4.4 BOM

  • 概念:浏览器对象模型,允许JS与浏览器对话,JS将浏览器的各个组成部分封装为对象。
  • 组成:
    • Window:浏览器窗口对象
    • Navigator:浏览器对象
    • Screen:屏幕对象
    • History:历史记录对象
    • Location:地址栏对象

此处只掌握 Window 与 Location 两个对象

Window

Location

4.4 DOM

右下角的结构称为dom树。

对对象的操作(对属性值的更改、调用方法…)直接查询参考书DOM部分对应Element元素对象部分。

示例:

<html>
    <head>
        <title>网页顶部标签页标题</title>
    </head>
    <body>
        <span style="color: red;">666</span> <br>
        
        <img id="img1" src="backimg.jpg" height="540PX"><br>
        

        <div class="cls">BJFU</div> <br>
        <div class="cls">123456</div> <br>

        <input type="checkbox" name="hobby">C
        <input type="checkbox" name="hobby">C++
        <input type="checkbox" name="hobby">JAVA
    </body>
    <script>
        let img = document.getElementById("img1");
        alert(img);

        let divs=document.getElementsByTagName("div");
        for(let i = 0;i<divs.length;i++)
        {
            let t=divs[i];
            t.innerHTML+='<span style="color: red;">666</span>';//注意此处为innerHTML而非innerText
        }

        let checkboxs = document.getElementsByName("hobby");
        for (let i = 0; i< checkboxs.length; i++) {
          const element = checkboxs[i];
          element.checked=true;//使复选框全部选中
           
        }

    </script>
</html>

5 事件监听

  • 事件:HTML事件是发生在HTML元素上的“事情”。比如:
    • 按钮被点击;
    • 鼠标移动到元素上;
    • 按下键盘按键;
  • 事件监听:JS可以在事件被侦测到时执行代码

5.1 事件绑定

在JavaScript中,通过事件绑定可以在特定的事件发生时执行相应的代码。事件绑定可以通过两种方式实现:

  • 通过HTML标签中的事件属性进行绑定:
    <body>
        <input type="button" onclick="on()" value="按钮1">
    </body>
    
    <script>
        function on()
        {
            alert("按钮一被点击了!");
        }
    </script>
  • 通过DOM元素属性绑定:

将函数名传递给DOM元素对象的onclick属性


    <body>
        <input type="button" id="btn2" value="按钮2">
    </body>

    <script>
        function on()
        {
            alert("按钮被点击了!");
        }
        document.getElementById("btn2").onclick=on;
    </script>


    <body>
        <input type="button" id="btn2" value="按钮2">
    </body>

    <script>
        document.getElementById("btn2").onclick=function()
        {
            alert("按钮被点击!");
        }
    </script>

5.2 常见事件

5.3 案例:

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <img id="light" src="lightOff.png" > <br>

        <input type="button" id="btn_on" value="点亮">
        <input type="button" id="btn_off" value="熄灭">
        <br><br>

        <input type="text" id="t" onblur="upper()" onfocus="lower()" value="CMD-137"><br><br>

        <input type="checkbox" name="hobby" >电影 
        <input type="checkbox" name="hobby" >旅游 
        <input type="checkbox" name="hobby" >游戏 <br>
        <input type="button" value="全选"  onclick="allchoose()">
        <input type="button" value="全不选" onclick="allnotchoose()">

    </body>

    <script>
        //1.实现按钮开关灯
       let light=document.getElementById("light");
       document.getElementById("btn_on").onclick=function()
       {
           light.src="lightOn.png";
       }
       document.getElementById("btn_off").onclick=function()
       {
           light.src="lightOff.png";
       }

       //2.输入框鼠标聚焦后,展示小写;离焦后,展示大写;
       function upper()
       {
        document.getElementById("t").value=document.getElementById("t").value.toUpperCase();
    
       }
       
       function lower()
       {
        document.getElementById("t").value=document.getElementById("t").value.toLowerCase();
       }

       //3.点击“全选”使所有复选框被选中,点击“全不选”使所有复选框不选中。
       let checkboxs=document.getElementsByName("hobby");
       function allchoose()
       {
            for (let i = 0; i < checkboxs.length; i++){
                let e = checkboxs[i];
                e.checked=true;
            }
       }

       function allnotchoose()
       {
            for (let i = 0; i < checkboxs.length; i++) {
               let e = checkboxs[i];
                e.checked=false;
            }
       }

    </script>
</html>

注意自命名函数时,尽量使用复杂名称,不要起易于内置关键字冲突的名字,比如本例中的all()~我debug了半天…~

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇