JavaWeb笔记-JavaScript基础-优快云博客

本文链接：https://blog.youkuaiyun.com/Chase_______/article/details/146912158

概述

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

基础语法

书写语法

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

引入方式

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

内部脚本

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

<script>
	//打印Hello，World
	alert('Hello,World');
</script>

外部脚本

在一个单独的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()函数,为常见事件
    <input type="button" onclick="on()" value="按钮一号">
    <input type="button" id="btn" value="按钮二号" >

    <script>
	    //方式一:通过HTML标签中的事件属性绑定
        function on(){
            alert('被点击');
        }
        //方式二:通过DOM元素属性绑定
        document.getElementsById("btn").onclick=function(){
            alert('被点击');
        }
    </script>

常见事件

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