JavaScript入门

最新推荐文章于 2024-09-17 21:49:02 发布

敲代码的锤石

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量97

点赞数

分类专栏： JavaScript 文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_62024906/article/details/128734304

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了网页开发的三大核心技术，W3C标准中的HTML负责结构，CSS负责表现，JavaScript负责行为。讲解了JavaScript的基础语法，包括变量、数据类型、运算符、流程控制语句以及函数的定义与调用。此外，还涉及了BOM（浏览器对象模型）中的Window、Location对象，DOM操作如获取Element对象和事件监听，以及正则表达式的基本概念和使用。

摘要由CSDN通过智能技术生成

简介

W3C标准: 网页由三部分组成

结构：HTML

表现：CSS

行为：JavaScript

引入方式

内部脚本：

在 html 页面中引入** ... **，一般情况下置于部分的底部

外部脚本

基础语法

书写语法

区分大小写

每行结尾的分号可有可无

注释：

单行注释： // 注释内容

多行注释： /* 注释内容 */

输出语句

使用 window.alert() 写入警告框

使用 document.write() 写入HTML页面

使用 console.log() 写入浏览器的控制台

变量

JavaScript 中使用 var关键字来声明变量，变量可以存放不同类型的值

var age = 20;
var name = "张三";
/*
	1.作用域: 全局变量
	2.变量可重复定义
	3.变量名规则，不能数字开头，组成字符可以是任意字母，数字，下划线或美元符号

*/

let 关键字声明的变量用法类似于 var，但是所声明的变量只在 let 关键字所在代码块内有效，且不允许重复声明

{
	let age = 20;
}
alert(age); //报错

const关键字用来声明一个只读的常量，不能改变值

数据类型

5种原始类型：

number: 数字
string: 字符串("str",'str')
boolean: 布尔值(true,false)
null: 空对象
undefined: 声明的变量未初始化时
typeof(): 返回变量类型

运算符

==: 先类型转换，再比较值

===: 先比较类型，再比较值


其他类型转为number:
1.string: 按照字符串的字面值转换为数字,如果字面值不是数字，则转为NaN,一般使用parseInt
2.boolean: true: 1,false: 0

其他类型转为boolean
1. number: 0和Nan转为false，其他转为true
2. string: 空字符串转换为false
3. null: false
4. undefined: false

流程控制语句

switch

while

do while

函数

定义： JavaScript函数通过function关键字进行定义：

语法

/*
	参数不需要类型
*/
function name(参数1,参数2...){
	函数体
}
//定义方式1
function add(a,b){
    return a+b;
}
//定义方式2:
var add = function(a,b){
    return a+b;
}
//调用时，函数参数可以不限个数
var res = add(1,2,3); //res = 6

常用对象

Array:

定义：

var arr = new Array(1,2,3);
var arr1 = [1,2,3]
//访问
arr1[2] = 10; //arr1 = [1,2,10]
//特点:相当于python的列表,java中的集合
var arr2 = [1,2,3];
//变长
arr2[10] = 10; 
alert(arr2);
//变类型
arr2[5] = 'hello';
alert(arr2);
//属性: length: 数组中元素的个数
/*
	方法：
	1. push() 添加到数组
	2. splice(i,n) 删除从i开始的n个元素
*/

访问

String

定义

var str = new String("hello")
var str1 = 'hello'
//length 属性
/*
	方法:
	1. trim() 去除字符串两端的空白字符
	2. chatAt() 取出指定位置的字符
*/

自定义对象

格式

var person = {
	name : "xxx",
	age : 20,
	eat: function(){
		alert("吃饭");
	}
}

BOM

window 浏览器窗口对象 https://www.w3school.com.cn/jsref/obj_window.asp

Navigator 浏览器对象

Screen 屏幕对象

History 历史记录对象

Location 地址栏对象

Window

属性：获取其他BOM对象

方法

示例：

//前面的window. 可省略
alert("弹框");
confirm("确认删除")

//定时器

//在一定时间间隔后执行，只执行一次
setTimeout(function(){
   alert("hehe");
}, 2000);

//在一定时间间隔后执行，循环执行
setInterval(function(){
    alert("hello");
},2000);

Location

方法：

示例：

document.write("3秒跳转到百度...");
setTimeout(function(){
    location.href = "http://www.baidu.com";
},3000)

DOM

Document Object Model 文档对象模型

获取Element对象

1. getElementById: 根据id属性获取一个Element对象
2. getElementsbyTagName: 根据标签名获得对象，返回Element数组
3. getElementsByName: 根据name属性值获取，返回Element数组
4. getElementsByClassName: 根据class属性获取，返回Element数组

事件监听

事件：

按钮点击

鼠标移动

按下键盘

常见事件：

事件绑定：

//方式一:通过HTML标签中的事件属性进行绑定
<input type="button" onclick='on()'>
function on(){
    alert("点击...");
}

//方式二: 通过DOM元素属性绑定
<input type="button" id="btn">
document.getElementById("btn").onclick = function(){
    alert("点击...");
};

正则表达式

概念：定义了字符串的组成规则

定义：

//1.直接量
var reg = /^\w{6,12}$/;
//2.创建RegExp对象
var r = new RegExp("^\w{6,12}$");

/*
	^: 表示开始
	$: 表示结束
	[]: 代表某个范围的单个字符
	.: 代表任意单个字符，除了换行和行结束符
	\w: 代表单词字符: 字母，数字，下划线，相当于[A-Za-z0-9]
	\d: 代表数字字符[0-9]
	量词:
	+: 至少一个
	*: 零个或多个
	?: 零个或一个
	{x}: x个
	{m,}: 最少m个
	{m,n}: 最多n个
*/