《JavaWeb开发-javascript基础》

文章目录

《JavaWeb开发-javascript基础》
- 1.javascript 引入方式
- 2.JS-基础语法-书写语法
- - 2.1 书写语法
  - 2.2 输出语句
- 3.JS-基础语法-变量
- 4.JS-基础语法-数据类型&运算符
- - 4.1 数据类型
  - 4.2 运算符
  - 4.3 数据类型转换
- 5. JS-函数
- 6. JS-对象-Array数组
- 7. JS-对象-String字符串
- 8. JS-对象-JSON
- 9. JS-对象-BOM
- 10. JS-对象-DOM
- 11. JS-对象-DOM-案例
- 12. JS-事件-事件绑定&常见事件
- 13. JS-事件-案例

《JavaWeb开发-javascript基础》

1.javascript 引入方式

内部脚本:将JS代码定义在HTML页面中。
- JavaScript代码必须位于标签之间。
- 在HTML文档中，可以在任意地方，放置任意数量的<script>。
- 一般会把脚本置于元素的底部，可改善显示速度。
```
<script>
	alert("Hello javaScript")
</script>
```
外部脚本:将JS代码定义在外部JS文件中，然后引入到 HTML页面中。
- 外部JS文件中，只包含JS代码，不包含<script>标签。
  <script>标签不能自闭合。
```
<script src="is/demo.js"></script>
```
```
alert("Hello JavaScript")  //保存为demo.js文件
```

2.JS-基础语法-书写语法

2.1 书写语法

区分大小写:与Java 一样，变量名、函数名以及其他一切东西都是区分大小写的。
每行结尾的分号可有可无。
注释:
- 单行注释: // 注释内容
- 多行注释: /* 注释内容 */

大括号表示代码块。

//判断
if(count == 3){
	alert(count);
}

2.2 输出语句

使用 window.alert()写入警告框
使用 document.write()写入 HTML输出

使用 console.log()写入浏览器控制台

<script>
window.alert("Hello JavaScript");//浏览器弹出警告框
document.write("Hello JavaScript");//写入HTML,在浏览器展示
console.log("Hello Javascript");//写入浏览器控制台
</script>

3.JS-基础语法-变量

JavaScript 中用 var 关键字(variable 的缩写)来声明变量。
JavaScript 是一门弱类型语言，变量可以存放不同类型的值。
```
var a= 20;
a="张三";
```
变量名需要遵循如下规则:
- 组成字符可以是任何字母、数字、下划线()或美元符号(S)
- 数字不能开头
- 建议使用驼峰命名
- 注意事项
  - ECMAScript6 新增了let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
  - ECMAScript6 新增了 const 键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

4.JS-基础语法-数据类型&运算符

4.1 数据类型

JavaScript中分为:原始类型和引用类型
原始类型：
- number:数字(整数、小数、NaN(Not aNumber))
- string:字符串，单双引皆可
- boolean:布尔。true，false
- null:对象为空
- undefined:当声明的变量未初始化时，该变量的默认值是 undefined
- 使用 typeof 运算符可以获取数据类型
```
var a=20;
alert(typeof a);
```

4.2 运算符

算术运算符：+，-,*,/,%，++，--赋值运算符:=，+=，-=，*=，/=，%=
比较运算符：>，<，>=，<=，!=，== , ===
逻辑运算符：&&，|| , !
三元运算符：条供表达式 ? true value : false value

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

var a =10:
alert(a == "10"); //true
alert(a ==="10");//false
alert(a === 10);//true

4.3 数据类型转换

字符串类型转为数字
- 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。
其他类型转为boolean:
- Number:0和NaN为false，其他均转为true。
- String:空字符串为false，其他均转为true。
- Null和 undefined:均转为false。

5. JS-函数

介绍：函数(方法)是被设计为执行特定任务的代码块。
定义：avaScript 函数通过 function 关键字进行定义，

语法为:

function functionName(参数1,参数2..){
//要执行的代码}

定义(举例)：
```
function add(a,b){
	return a+b;
}
```
注意
- 形式参数不需要类型。因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用:函数名称(实际参数列表）
```
var result=add(10,20);
alert(result);
```
定义方法二：var functionName =function(参数1,参数2..){//要执行的代码}
```
var add = function(a,b){
   return a+b;
}
```

6. JS-对象-Array数组

javascript中Array对象用于定义数组
定义
- 定义方式一：var 变量名 = new Array(数组列表)； var arr = new Array(1,2,3,4);
- 定义方法二：var 变量名 = [元素列表]; arr list = [1,2,3,4];
调用：arr[索引] = 值； arr[10] = Hello;
注意事项
JavaScript 中的数组相当于Java 中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据。

属性

length：设置或返回数组中元素的数量。

    <script>
        var arr = new Array(1,2,3,4,5,6);
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
    </script>

方法

forEach()：遍历数组中的每个有值的元素，并调用一次传入的函数

<script>
    var arr = new Array(1,2,3,4,5,6);

    arr[10] = 50;
    // for循环可以遍历数组中的每一个元素
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }

    console.log("====================");
    
    //forEach循环只遍历数组有值的元素
    arr.forEach(function (e) {
        console.log(e); 
    })

    // 使用“箭头函数”可以对forEach中的函数进行优化
    arr.forEach((e) => {
        console.log(e);
        
    })
</script>

push()：将新元素添加到数组的末尾，并返回新的长度。

splice()：从数组中删除元素。

    <script>
        var arr = new Array(1,2,3,4,5,6);
        arr[10] = 50;
        
        // 在数组的尾部添加元素
        arr.push(7,8,9);
        console.log(arr);// [1, 2, 3, 4, 5, 6, empty × 4, 50, 7, 8, 9]

        //从数组中删除元素
        arr.splice(2,2);
        console.log(arr);//[1, 2, 5, 6, empty × 4, 50, 7, 8, 9]
    </script>

7. JS-对象-String字符串

String字符串对象创建方式有两种:
var 变量名 = new String("..”); //方式一 var str = new String("Hello String");
var 变量名 = "…"; //方式二 var str = "Hello String" 或 var str = ‘Hello String’;
属性
- length：字符串的长度。

方法:

charAt()：返回在指定位置的字符，
indexof()：检索字符串。
trim()：去除字符串两边的空格
substring()：提取字符串中两个指定的索引号之间的字符;

    <script>
        // 创建字符串对象
        // var str = new String("Hello String"); //方式一
        var str = "Hello String"; //方式二
        console.log(str);

        //length 属性
        console.log(str.length);  //12
        
        //charAt()方法
        console.log(str.charAt(4)); //o
        
        //indexOf()方法
        console.log(str.indexOf("t")); //7
    
        //trim()方法
        console.log(str.trim());//去除字符串两边的空格
        
        //substring()方法
        console.log(str.substring(0,5)); //hello
    </script>

8. JS-对象-JSON

JavaScript自定义对象

定义格式:
var 对象名 = {
	属性名1:属性值1，
	属性名2:属性值2，
	属性名3:属性值3，
	函数名称:function(形参列表){}
	};

调用格式:
- 对象名.属性名; console.log(user.name);
- 对象名.函数名(); user.eat();

自定义对象中的函数写法可以进行简化

定义格式:
var 对象名 = {
	属性名1:属性值1，
	属性名2:属性值2，
	属性名3:属性值3，
	函数名称(形参列表){}  //简化后
	};

    <script>
        // JavaScript自定义对象的定义
        // var user = {
        //     name:"Tom",
        //     age:18,
        //     gender:"male",
        //     eat: function(){
        //         alert("吃饭");
        //     }
        // };

        // 对函数写法简化后代码
        var user = {
            name:"Tom",
            age:18,
            gender:"male",
            eat(){
                alert("吃饭");
            }
        };
        //JavaScript自定义对象的调用
        alert(user.name);
        user.eat();
    </script>

JSON-介绍
- JSON概念：JavaScript Object Notation，javaScript对象标记法。
- JSON 是通过JavaScript 对象标记法书写的文本。
- 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
- JavaScript 对象写法
```
{
	name:"Tom"
	age:20,
	gender:"male"
}；
```
- JOSN文本写法
```
{
	"name":"Tom"
	"age":20,
	"gender" :"male"
```
  }

JSON基础语法

定义：var 变量名={"key1":value1，"key2":value2}
value 的数据类型为:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在方括号中)
- 对象(在花括号中)
- nul
示例：var userstr ='{"name":"Jerry","age":18,"addr":["北京”,"上海","西安"]}';
JSON字符串转为JS对象
var jsobject = JSON.parse(userstr);

JS对象转为JSON字符串
var jsonStr =JSON.stringify(jsobject);

    <script>
        //定义一个JSON字符串
        var userstr = '{"name":"Jerry","age":18,"add":["北京","上海","西安"]}';
        alert(userstr.name);
        //JSON字符串转为JS对象
        var jsObject = JSON.parse(userstr);
        alert(jsObject.name);
        // JS对象转为JSON字符串
        var jsonStr = JSON.stringify(jsObject);
        alert(jsonStr);
    </script>

9. JS-对象-BOM

概念：Browser 0bject Model 浏览器对象模型，允许|avaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。
组成:
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史记录对象
- Location:地址栏对象
Window:浏览器窗口对象
- 介绍:浏览器窗口对象。
- 获取:直接使用window，其中 window.可以省略。
  - window.alert("Hello Window");
  - alert("Hello window");
属性
- history:对 History 对象的只读引用。请参阅 History 对象。
- location:用于窗口或框架的 Location 对象。请参阅 Location 对象。
- navigator:对 Navigator 对象的只读引用。请参阅Navigator 对象。

方法

alert():显示带有一段消息和一个确认按钮的警告框。
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout():在指定的毫秒数后调用函数或计算表达式。

    <script>

        // 1.方法alert():显示带有一段消息和一个确认按钮的警告框。
        window.alert("警告框");//可以省略window

        //2.方法confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
       var flag = window.confirm("确认要删除这条记录吗？");
       console.log(flag);

       //3.方法setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
        var count = 0;
        window.setInterval(function(){
            count++;
            console.log("定时器执行了" + count + "次");
        },2000);

        //4.方法setTimeout():在指定的毫秒数后调用函数或计算表达式。
        window.setTimeout(function () {
            alert("JS")
        },3000)
    </script>

Location:地址栏对象
- 介绍:地址栏对象。
- 获取:使用 window.location 获取，其中 window.可以省略,
  - window.location.属性;
  - location.属性;

属性:

href:设置或返回完整的URL。
location.href="https://www.itcast.cn";

    <script>
        //获取当前浏览器的地址
        alert(location.href);

        //设置地址栏的url
        location.href = "https://www.itcast.cn";
    </script>

10. JS-对象-DOM

DOM概念:Document Object Model，文档对象模型
将标记语言的各个组成部分封装为对应的对象
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
JavaScript 通过DOM，就能够对HTML进行操作
- 改变 HTML 元素的内容
- 改变 HTML元素的样式(CSS)
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
DOM是 W3C(万维网联盟)的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分
1. Core DOM-所有文档类型的标准模型
  - Document:整个文档对象
  - Element:元素对象
  - Attribute:属性对象
  - Text:文本对象
  - Comment:注释对象
2. XML DOM-XML 文档的标准模型
3. HTMLDOM-HTML文档的标准模型
  - Image: <img>
  - Rutton : <input type='button'>
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

Document对象中提供了以下获取Element元素对象的函数:

根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');
根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');
根据class属性值获取，返回Element对象数组4
var clss= document.getElementsByClassName('cls');

    <script>
        //1 获取Element元素
        //1.2 获取元素-根据ID获取
        var img = document.getElementById('h1');
        alert(img);

        //1.2获取元素-根据标签获取
        var divs = document.getElementsByTagName('div');
        for (let i = 0; i< divs.length; i++) {
          alert(divs[i]);
           
        }

        //1.3获取元素-根据name属性获取
        var inputs = document.getElementsByName('hobby');
        for (let i = 0; i < inputs.length; i++) {
            alert(inputs[i]);            
        }

        //1.4获取元素-根据class属性获取
        var inputs1 = document.getElementsByClassName('cls');
        for (let i = 0; i < inputs1.length; i++) {
            alert(inputs1[i]);
        }
    </script>

11. JS-对象-DOM-案例

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM</title>
</head>
<body>
    <img id="h1" src="../html/尤雨溪照片.webp" >

    <div class="cls">传智教育</div>  <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏

    <script>
        //1.改变img便签中src的属性（更换图片）
        var img = document.getElementById('h1');
        alert(img);
        img.src = "../html/秋收.webp";
        
        // 2.将所有div标签的内容后面加上：very good（红色字体）
        var divs = document.getElementsByTagName('div');
        for (let i = 0; i < divs.length; i++) {
            const div = divs[i];
            div.innerHTML = div.innerHTML + "<font color='red'>very good</font>";             
        }

        // 3.使所有的复选框都呈现出被选中状态
        var inputs = document.getElementsByName('hobby');
        for (let i = 0; i < inputs.length; i++) {
            const input = inputs[i];
            input.checked = true;
        }
    </script>
</body>

12. JS-事件-事件绑定&常见事件

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

事件绑定

方式一：通过 HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
<script>
	function on(){alert('我被点击了!'};
</script>

方式二:通过 DOM 元素属性绑定

<input type="button" id="btn" value="按钮2">
<script>
	document.getElementById('btn').onclick=function(){
	alert('我被点击了!);
	}
</script>

在这里插入图片描述

常见事件

onclick：鼠标单击事件
onblur：元素失去焦点
onfocus：元素获得焦点
onload：某个页面或图像被完成加载
onsubmit：当表单提交时触发该事件
onkeydown：某个键盘的键被按下
onmouseover：鼠标被移到某元素之上

onmouseout：鼠标从某元素移开
在这里插入图片描述

<body onload="load()">
    <form action="" style="text-align: center;" onsubmit="subfn()">
        
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        
        <input id="b1" type="submit" value="提交" >

        <input id="b2" type="button" value="单击事件" onclick="fnl()">
    </form>

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()" >
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>95</td>
            <td>很优秀</td>
        </tr>
    </table>

    <script>
        //onload:页面、元素加载完成后触发
        function load() {
            console.log("页面加载完成...");
        }
        //onclick：鼠标点击事件
        function fnl() {
            console.log("单击事件被点击了...");
        }
        // onblur：失去焦点事件
        function bfn() {
            console.log("失去焦点...");
        }
        // onfocus：获得焦点
        function ffn() {
            console.log("获得焦点...");
        }
        //onkeydown:某个键盘的按键被按下
        function kfn() {
            console.log("键盘被按下了...");
        }
        //onmouseover:鼠标被移动到某元素之上
        function over() {
            console.log("鼠标移入了...");
        }
        //onmouseout:鼠标被移动到某元素之上
        function out() {
            console.log("鼠标移出了...");
        }
        //submit:当表单提交时触发该事件
        function subfn() {
            alert("表单被提交了...");
        }
    </script>
</body>