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的介绍
- 作用域:全局变量
- 变量可以重复定义
在控制台可以查看错误,按键盘上的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}$/;