JavaWeb-JS基础

4.JS基础

（1）JS的引入方式

HTML内部引入

• 将JS代码放在“< script >< /script >”标签之间
• 在HTML文档中，可以在任意地方放置任意数量的< script >
• 一般将其放在 body 元素的底部，改善显示速度

<script>
    alert("WY")       //JS代码
</script>

外部.js文件引入

在外部单独编写js脚本，在HTML中写入以下代码引入JS脚本

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

（2）JS书写语法规则

• JS区分大小写
• 每行的分号可有可无
• 注释：单行// 多行/* */
• 大括号{}表示代码块

（3）JS的三种输出语法

alert()

• Window.alert()写入警告框

        window.alert("警告")       //打开网页后浏览器弹出警告框

write()

• 写入HTML页面中

        document.write("Hi")     //直接写入HTML网页中

log()

写入浏览器控制台

控制台打开方式：右建-检查-console 或者 F12

        console.log("Bye")       //写入浏览器控制台

（4）变量

变量名的规则

• 组成字符为任何字母，数字，下划线_ 美元符号$
• 数字不能开头
• 使用驼峰命名

变量的声明

• JS语言是弱类型语言，可以存放不同类型的值
• var定义的变量作用域大，属于全局变量
• var定义的变量可以再次重复定义

var a = 20;
a = "张三";

新增变量定义关键字

• let关键字定义的变量只在所在的代码块内有效，且不允许重复声明
• const关键字用来声明一个只读的常量，一旦声明，常量的值不能改变。

（5）数据类型&运算符

• JS的数据类型分为：原始类型 和 引用数据类型
• typeof可以获取数据类型

原始类型

number:数字
string:字符串，单双引号都可以
boolean:布尔。true,flase
null:对象为空
undefined:当声明的变量未初始化时，该变量的默认值为undefined

运算符

在JS语言中，运算符与Java语言中的运算符基本相同，但比Java语言多了一个"==="全等运算符

• ==符号会自动进行类型转换
• ===不会自动进行类型转换

var a = 10;
alert(a == "10");     //true
alert(a === "10");    //flase
alert(a === 10);      //true

（6）常用类型转换

• 字符串类型转数字：将字符串字面值转为数字，如果字面值不是数字，则转为NaN。

• 其他类型转为boolean:

  • Number:0和Nan为flase,其他为true。转换语句parseInt() 。
  • String:空字符串为flase,其他为true
  • Null和undefined:均转为flase

//字符串转数字示例
parseInt("12");      //12
parseInt("12A45");   //12      将最前面的数字转换后，不是数字的部分被舍弃
parseInt("A45");     //NaN

（7）函数

• 函数是被设计为执行特定任务的代码块

函数的定义

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

//定义方式2
var add = function(a,b){
    return a+b;
}
//调用
var result = add(10,20);
var result2 = add(10,20,30,40);        //与上一条调用语句的结果相同，只会传递10，20两个实际参数

• 形式参数不需要类型，因为JS语言是弱语言类型
• 返回值不需要定义类型，可以直接return
• 调用： 函数名(实参列表)
• 实际传递的参数可以比形参列表多，传递进去的参数会是最前面的几个

（8）对象-Array数组

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

定义

//方式1
var 变量名 = new Array(元素列表);
var arr = new Array(1,2,3,4);

//方式2
var 变量名 = [元素列表];
var arr = [1,2,3,4];

调用

arr[索引] = 值;
arr[10] = "hello";

• Array数组的特点：
  • 长度可变(可以直接追加长度)，类型可变(一个数组里面可以存储多种类型的数据)

//长度可变测试
var arr = [1,2,3,4];
arr[10] = 50;

console.log(arr[10]);   //50
console.log(arr[9]);    //undefined

//类型可变测试
arr[9] = "A";
arr[8] = true;

Array的属性

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

int len = arr.length;

方法

• forEach(函数):遍历数组中的每个有值的元素，并调用一次传入的函数
• push():将新元素添加到数组的末尾，并返回新的长度
• splice(索引位置，删除个数):从数组中删除元素。
• push(e1,e2,e3...):追加元素到数组末尾

//forEach(函数)
arr.forEach(function (e){   //打印遍历元素,e代表"element"元素
    console.log(e);
})

//push()函数
arr.push(6,7,8);   //追加元素到数组末尾

//splice(索引位置，删除个数)
arr.splice(2,2);   //表示从第二个索引开始删除2个元素

（9）JS对象-String字符串

定义

//方式1
var 变量名 = new String("...");
var str = new String("Hello String");

//方式2
var 变量名 = "..."
var str = "Hello String";

属性

• length

int len = arr.length;

方法

• charAt(索引):返回在指定位置的字符
• indexOf(”字符串“)：检索字符串
• trim():去除字符串两边的空格
• substring(开始索引，结束索引):提取字符串中两个指定的索引号之间的字符

（10）JS对象-JSON

JS自定义对象

定义

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

var user = {
    name:"Tom",
    age:20,
    gender:"male",
    eat:function(形参列表){
        alert("你好");
    }
};

调用

//对象名.属性名;
user.name;

//对象名.函数名();
user.eat();

JSON

• JSON中对象的定义与JS语言定义对象格式基本相同，其属性名需要用双引号
• JSON常用于作为数据载体，在网络中进行数据传输
• JSON可以理解为一种书写格式

{"name":"Tom","age":20,"gender":"male"}

JSON基础语法

• 定义

var 变量名 = '{"key1":value1,"key2":value2}'

var userStr = '{"name":"Tom","age":20,"gender":"male"}'

• JSON的转换
  • 转换1：将JSON字符串转为JS对象
  • 转换2：将JS对象转为JSON字符串

var jsObject = JSON.parse(userStr);  //转换1
alert(jsObject.name);  //转换之后才能获取属性值


var jsonStr = JSON.stringify(jsObject);  //转换2
alert(jsonStr);  //打印字符串

（11）BOM浏览器对象模型

• BOM是浏览器对象模型，允许JS与浏览器对话，JS将浏览器的各个组成部分封装成为对象

BOM的组成：

• Winodw:浏览器窗口对象

• Navigator:浏览器对象（应用名称，版本，内核)

• Screen:屏幕对象

• History:历史记录对象

• Location:地址栏对象

Window对象方法

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

//confirm():显示一段消息和带一个确认按钮和取消按钮的警告框。带有一个返回值(确认为true，反之flase)
confirm("您确认删除该记录吗？");
var flag = confirm("您确认删除该记录吗？");  //保存返回值

//setInterval(函数,周期时间(单位ms)):周期性地执行传入的函数
setInterval(function(){
    console.log("执行定时器")
},2000)

//setTimeout(函数，延迟时间(ms))    --- 延迟指定时间执行一次
setTimeout(function(){
    alert("执行定时器")
},2000)

Location对象

• 地址栏对象
• 获取：window.location获取，其中window.可以省略

//对象的获取
window.location.属性;
location.属性;

//location的属性
//href:设置或返回完整的URL
alert(location.href);   //打印该网页网址
location.href="https://www.itcast.cn"   //跳转到指定域名

（12）DOM对象

DOM是文档对象模型

将标记语言的各个组成部分封装成对应的对象

• Document:整个文档对象
• Element:元素对象
• Attribute:属性对象
• Text:文本对象
• Comment:注释对象

DOM获取元素对象的函数

//1.根据id属性值获取，返回单个Element对象
var h1 = document.getElementByID('h1');

//2.根据标签名获取，返回Element对象数组
var divs = document.getElementsByTagName('div');

//3.根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');

//4.根据class属性值获取，返回Element对象数组
var class = document.getElementsByClassName('cls');

DOM的使用

• 以下展示常用的函数，更多用法参考手册

//1.获取div的DOM对象
var divs = document.getElementsByTagName('div');

//2.选择要修改的对象
var div1 = divs[0];      //选择第一个div的内容

//3.innerHTML修改div值
div1.innerHTML = "WY";        //修改文本内容

（13）事件监听

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

事件绑定的两种方式

• 方式1:通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1" >

<script>
    function on(){
        alert('已点击');
    }
</script>

• 方式2：通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2" >

<script>
 document.getElementById('btn').onclick=function on(){
        alert('已点击');
    }
</script>

常见元素事件