JavaScript入门

JavaScript入门

概念：跨平台、面向对象的脚本语言，来控制网页行为，能使网页可交互
JavaScript和Java是完全不同的语言，但是基础语法类似

W3C标准：网页主要由3部分组成
结构：HTML
表现：CSS
行为：JavaScript

JavaScript能做什么

开关灯时换src属性值

JavaScript引入方式

1.内部JS

例：

打开浏览器后将会弹出

在HTML文档中可以在任意位置（要符合语法），放置任意数量的 < script >

一般把脚本置于< body >元素底部，可改善显示速度，因为脚本执行会拖慢显示

2.外部JS

例：

*标签不可自闭合

JavaScript基础语法

书写语法：

博主喜欢加上分号，加分号是一种好习惯，看起来会更加工整
JavaScript除了分号可有可无以外，其他与Java基本一致

输出语句

window.alert("hello js~");//弹出警告框

document.write("hello js~");//写入HTML

console.log("hello js~")//写入控制台

变量

JavaScript中用var关键字（variable的缩写）来声明变量

var test=20;
test="张三";

驼峰命名讲解 https://blog.csdn.net/nipirennipi136/article/details/107338510?
版权所属 CSDN博主 你皮任你皮136

var的介绍

1. 作用域：全局变量
2. 变量可以重复定义

在控制台可以查看错误，按键盘上的F12
在开发者工具里有Console

let定义只在当前大括号有效

IDEA中会提示此为只读值

数据类型

例：

运算符

===为全等于

var age1=20;
var age2="20";

alert(age1==age2);  //结果为true 
//JavaScript == 会首先进行类型转换再进行比较

var age1=20;
var age2="20";

alert(age1===age2); //结果为false
//=== 判断类型是否一样，如果不一样，直接返回false

类型转换：

例：

//字符串转数字
var str="20";
alert(parseInt(str)+1);

显示结果：

重点：

流程控制语句

函数

定义时不需要写数据类型

JavaScript对象

Array

数组定义第二种更常用

特点：JavaScript数组相当于Java中集合，变长变类型

//变长
var arr3 =[1,2,3];
arr3[10]=10;
alert(arr3[10]);

alert(arr3[9]);//arr3[9]未赋值，结果为undifined

//变类型
arr3[5]="hello";
//alert(arr3[5]);
alert(arr3);

//遍历数组
var arr4=[1,2,3];
for (let i=0; i<arr4.length; i++){
	alert(arr4[i]);
}

//方法（常用）
//push：添加方法
var arr5=[1,2,3];
arr5.push(10);
alert(arr5);
//splice：删除元素
arr5.splice(0,1); //第一个参数为删除起始位置，第二个参数为删除个数
alert(arr5);

String

//属性
//lengrh
alter(str3.length);

常用方法trim：

//trim():去除字符串前后两端空白字符（在浏览器中常用）
var str4='   abc   ';
alert(1+  str4.trim() +  1);

自定义对象

效果：

BOM

可通过此地址查询
https://www.w3school.com.cn/

Window

History

Location

alert();
location.href="https://www.csdn.net/";

//3秒跳转到首页...
document.write("3秒跳转到首页...");
setTimeout(function(){
	location.href="https://www.csdn.net/"
},3000);

DOM

XML DOM 与核心DOM 比较类似

获取 Element对象

常见HTML Element对象的使用： 查阅文档
可通过此地址查询
https://www.w3school.com.cn/

事件监听

事件绑定

//方式1
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我"  id="btn"

function on(){
	alert("我被点了")；
}

//方式2（推荐）
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我"  id="btn"

document.getElementById("btn").onclick = function() {
	alert("我被点了");
}

常见事件

可通过此地址查询
https://www.w3school.com.cn/

onsubmit 可用作表单验证

返回true，则表单被提交
返回false，则不被提交

正则表达式

//判断手机号是否符合规则：长度11，数字组成，第一位是1
var reg=/^[1]\d{10}$/;