JavaWeb笔记-JavaScript基础

概述

• JavaScript(简称：JS)是一门跨平台、面向对象的脚本语言，是用来控制网页行为，实现页面的交互效果。JavaScript和Java是完全不同的语言，但基本语法类似
• 组成
  • ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
  • BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
  • DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。

基础语法

书写语法

• 区分大小写,与Java一样
• 结尾分号可有可无
• 注释:
  • 单行注释: //注释内容
  • 多行注释: /注释内容/
• 大括号为代码块

引入方式

JS有两种引入方式，分为内部脚本和外部脚本

内部脚本

将JS代码定义在HTML页面中(一般放在< body > 元素的底部)

外部脚本

在一个单独的js文件中编写JavaScript，然后再HTML文件中使用script标签引用​
hello.html

    <script src="hello.js">script>

hello.js

    alert("hello,world");

输出语句

	//写入警告框
	window.alert("hello");     //浏览器弹出警告框
	//写入HTML输出
	document.write("hello");   //在浏览器展示
	//写入浏览器控制台
	console.log("hello");

变量

• js是弱类型语言，变量可以存储不同类型值
• 变量名遵循以下规则
  • 字符可以是字母、数字、下划线、美元符合
  • 数字不能开头
  • 推荐驼峰命名法
• var 关键字(varable缩写) 声明变量
  • 全局变量，可重复定义
• let 关键字 定义变量
  • 局部变量，不可重复定义
• const关键字 定义常量
  • 常量的值不可改

函数

函数(方法)是被设计为执行特定任务的代码块

//第一种
function functionName(参数1，参数2...){
	//代码
}
//第二种
var functionName=function(参数1，参数2...){
	//代码
}

​

对象

在本章节，介绍Array数组，String字符串，JSON,BOM,DOM几个对象

Array 数组对象

JavaScript中Array对象用于定义数组

• 特点
  • 长度可变
  • 类型可变
• 定义方法

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

• 访问方法

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

• 常用方法

//forEach:遍历数组每个有值元素
arr.forEach(function(e){
	console.log(e);
})
//ES6 箭头函数 (...) => (...) 简化函数定义
arr.forEach((e)=>{
	console.log(e);
})
//push 添加元素到数组末尾
arr.push(7,8);
//splice:删除元素
//从第二个索引开始删，删除两个元素
arr.splice(2,2)

拓展: 箭头函数(ES6):用于简化函数定义语法，类似于lambda表达式。

String 字符串对象

• 定义方法

//方式一
var 变量名 = new String("...");
var str = new String("hello");
//方式二
var 变量名 = "...";
var str = "hello";

• 常用方法

//charAt() 返回在指定位置的字符
console.log(str.charAt(3));   //获取str第四个字符
//indexOf() 检索字符串
console.log(str.indexOf("lo")) //获取到lo所在的位置
//trim() 去除字符串两边的空格
var arr = str.trim();   //用变量接收去除两边空格的arr
//substring(start,end) 提取字符串中两个指定索引号之间的字符(含头不含尾)
console.log(str.substing(0,3));   

方法	描述
charAt( )	返回在指定位置的字符
indexOf( )	检索字符串
trim( )	去除字符串两边的空格
substring( )	提取字符串中两个指定的索引号之间的字符

JavaScript自定义对象

• 格式

//定义方法
var 对象名 = {
	属性值1:属性值1，
	属性名2:属性值2，
	属性名3:属性值3，
	函数名:function(形参列表){}
};
//调用方法
对象名.属性名；
对象名.函数名();

//实例
var user ={
	name:"Tom",
	age:20,
	gender:"male",
	eat:function(){
	alert("吃饭")
	}
}
console.log(user.name);
user.eat();

JSON对象

JSON 是通过 JavaScript 对象标记法书写的文本。
由于其语法简单，层次结构鲜明，现多用于作数据载体，在网络中进行数据传输

• 定义方法

//定义方法
var 变量名 = '{"key1":value1,"key2:value2"}'
//示例
var userStr='{"name":"Jerry","age":18,"addr":["北京","伤害"]}';

• value的数据类型

数据类型	存储方式
数字	整数或浮点数
字符串	在双引号中
逻辑值	true或false
数组	在方括号中
对象	在花括号中
null

• 转换方法

//JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
//JS对象转换为JSON字符串
var jsonStr =JSON.stringify(jsObject);

BOM对象

• BOM(Browser Object Model) 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器组成部分封装为对象
• 由Window，Navigator，Screen，History，Location五个部分组成,此处介绍Window和Location

Window

浏览器窗口对象

//获取方法：直接使用window，其中window.可以省略
window.alert('hello,window');

//常用方法
//confirm 显示带有确认按钮和取消按钮的对话框
confirm("可以选择确定和选择的对话框");

//setInterval() 周期执行某个函数
//每两秒执行一次
setInterval(function(){
    console.loog("执行了一次");
},2000);

//setTimeout()  在指定时间后执行一次
setTimeout(function(){
    console.loog("只执行了一次");
},2000);

Location

• 地址栏对象

//获取方法(二者皆可)
window.location.属性;
location.属性

//设置或返回完整的URL
location.href = "地址"

DOM对象

• DOM(Document Object Model)文档对象模型
• 将标记语言的各个组成部分封装为Document、Element、Attribute、Text、Comment五个对象
• 作用
  • 改变HTML元素的内容
  • 改变HTML元素的样式
  • 对HTML DOM事件做出翻译
  • 添加和删除HTML元素

//通过id属性值获取,返回Element对象
var h1 = document.getElementByIdJ('h');
//根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
//通过name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');
//通过class属性值获取，返回Element对象数组
var class = document.getElementsByClassName('cls');

注:此对象数组返回的是对象，不是真的数组，不能用forEach，可以用for循环

//将name属性值为hobby的按钮改为选中
const b1= document.getElementsByName("hobby");
        for(let i=0;i<b1.length;i++){
            b1[i].checked=true;
        }

事件绑定

• 事件：HTML事件是发生在HTML元素上的“事情”，如点击按钮、鼠标移动到元素上、按下键盘等
• 事件监听：JavaScript可以在事件被侦测到时执行代码
• 事件绑定可以通过HTML标签中事件属性绑定，也可以通过DOM元素属性绑定

	此处写的onclick代表绑定on()函数,为常见事件
    
    

    

• 常见事件

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