桐——前端006（JS基础，语法，事件，函数）

非为鱼

于 2022-05-12 20:11:56 发布

阅读量186

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_69015874/article/details/124545198

版权

JS基础

javascript是一门高级编程语言
浏览器分成两部分：渲染引擎，js引擎。
JS由三部分组成：ECMAScript(JavaScript语法)，DOM（页面文档对象），BOM（浏览器对象模型）
JS有三种书写方式：行内<input type="button" value="唐伯虎" onlick="alert('秋香')">，内嵌<head><script>alert('沙漠骆驼')</script></head>，外部<head><script src="my.js"></script></head>
在JS中我们使用单引号’’
JS输入输出语句

方法	说明
alert(msg)	浏览器弹出警示框
console.log(msg)	浏览器控制台打印输出消息
prompt(info)	浏览器弹出输入框，用户可以输入

<script>
	//这是一个输入框
	prompt('请输入您的年龄');
	//alert 弹出警示框 输出的 展示给用户的
	alert('计算的结果是');
	//console 控制台输出 给程序员测试用的
	console.log('我是程序员能看到的');
</script>

变量

是申请了一块内存的空间，用来储存数据。
变量使用：声明变量（var），赋值
- 声明变量：var bianliangming;
- 赋值：bianliangming=18;
变量初始化var bianliangming=18;

//用户输入姓名  储存到一个myname的变量里边
 var myname=prompt('请输入你的名字');
//输出这个姓名
 alert(myname);

数据类型

var number;不确定数据类型，需要在运行中，根据‘=’后面的值来确定。
数据类型很自由，可以在程序中变化，JS是动态语言。
简单数据类型：
- number数字型（数字前加0，八进制。数字前加0X，十六进制。）（infinity无穷大，-infinity无穷小，NaN代表一个非数值。）
  - isNaN(x),x是数字返回true,不是则返回false。
- string 字符串
  - 字符串变量必须使用引号括起来，引号可以是单引号，也可以是双引号。
  - ’ '/" "引用。
  - 外单内双’…“…”…‘，或者外双内单"…’…‘…"，不可以混合使用’…'…“…”。
  - 检测并获取字符串长度string.lenth();
  - 字符串拼接

console.log('沙漠'+'骆驼');//沙漠骆驼
console.log('pink老师'+18);//pink老师18
console.log('沙漠'+true);//沙漠true
console.log('14'+12)；//1412
console.log(14+12)；//26

在这里插入图片描述

boolean布尔型
- 布尔型有两个值true,false
- 布尔型和数值型相加时，true时1，false是2
undefined
- 未定义的数据类型
- var zhi=undefined;
- undefined加上什么（除了字符串），等于NaN。
null
- 空值
- var zhi=null;
- null加上什么，结果还是什么

基础语法

if语句

if(){...}
if(){...}else{...}
if(){...}else if(){...}else if(){...}else{...}

switch语句

语法：

switch (expression)
{
    case condition 1: statemnt
	 break;
    case condition 2: statemnt
	 break;
    default: statemnt
}
先执行expression表达式，然后依次匹配条件condition1，condition2，
遇到了匹配的条件就执行相应的代码，如果前面的条件都没有正常匹配，则
执行default后的执行体。

注意两点：
- 1）JavaScript的switch语句可以省略case块后面的break；如果省略了，那么就会一直执行case之后的代码，直到遇见break语句为止
- 2）switch语句的条件变量不仅可以是数值类型也可以是字符串类型。

循环语句

在这里插入图片描述

for(语句1，语句2，语句3){
	要执行的代码块（循环体）;
}
说明：
- 语句1在循环体开始之前执行
- 语句2定义运行循环的条件
- 语句3会在循环每次执行之后执行

例如：
在这里插入图片描述

do while

do 
{
  statement
} 
while (expression)

for in
- for in循环的本质是一种foreach循环，它主要有两个作用：
  - 1）遍历数组里的所有数组元素
  - 2）遍历JavaScript对象的所有属性

for (index in object)
{
    statement
}

在这里插入图片描述

for of
while循环

while(条件){
	要执行的代码块（循环体）;
}

实例：

while(i<10){
	text+="数字是"+i;
	i++;
}

break终止循环

在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环
比如：我要吃五个包子，吃到三个的时候，不能在吃了，我就停止吃包子这个事情
要终止循环，就可以直接使用 break 关键字
只能终止当前循环
如果当有循环嵌套的时候，想要跳出外层循环，那么就给循环添加一个标识符，然后 break outer

continue结束本次循环

在循环中，把循环的本次跳过去，继续执行后续的循环
比如：吃五个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个
跳过本次循环，就可以使用 continue 关键字

数组

定义数组的方法

var a = [3,5,20];//初始化数组
var b = [];//定义一个空数组
var c = new Array();//创建一个空数组

简单使用

var a = [3, 5, 20]; // 定义的时候初始化数组
var b = []; // 创建一个空数组
var c = new Array(); // 创建一个空数组
 
b[0] = "你好";
b[1] = 100;
b[2] = true;
 
c[3] = true;
 
console.log(a + "\n" + b + "\n" + c);

执行结果：
3，5，20
你好,100,true
,true

简单归纳数组特征

1. JavaScript数组长度可变，数组长度总等于所有元素索引最大值+1。
2. 同一个数组中的元素类型可以互不相同。
3. 访问数组元素时不会产生数组越界，访问并未赋值的元素时，该元素的值为undefined。

在这里插入图片描述

函数

函数定义语法：

function functionName(param1,param2...){
...
}

简单使用

function judgeAge(age) 
{
if (age > 60) 
{
console.log("老人");
} 
else if (age > 40 ) 
{
console.log("中年人");
} 
else if (age > 15) 
{
console.log("年轻人");
} 
else 
{
console.log("儿童");
}
}
 
judgeAge(26); //年轻人

虽然调用judgeAge(26)程序能够正常运行，但是如果传入的不是数值那么程序就会有问题，所以最好先对参数类型进行判断，判断变量的数据类型可以使用typeof运算符，该函数用于返回变量的数据类型。

function judgeAge(age) 
{
if (typeof age === "number") 
{
if (age > 60) 
{
	console.log("老人");
} 
else if (age > 40 ) 
{
console.log("中年人");
} 
else if (age > 15) 
{
console.log("年轻人");
} 
else 
{
console.log("儿童");
}
} else
{
console.log("must be number")
}
}

运算符

+ - * / %

++自加

- -自减

&：按位与

|：按位或

~：按位非

^：按位异或

<<：左移位运算符

>>：右移位运算符

>, <, >=, <=, ==, !=, === （严格等于）,!= =（严格不等于）

与（ && ）或（ || ）非（ ! ）

typeof和instance运算符
- typeof前面简单了解过，用于判断某个变量的数据类型，它既可以作为函数来使用，例如：typeof(a)，返回变量a的数据类型，也可以作为一个运算符来使用，例如：typeof a 可以返回变量a的数据类型。不同类型参数使用typeof运算符的返回值类型如下：

undefined值：object

null值：object

布尔型值：boolean

数字型值：number

字符串值：string

对象：object

函数：function

与typeof类似的运算符还有instanceof，该运算符用于判断某个变量是否为指定类的实例，如果是，则返回true，否则返回false。

事件

概念：某些组件被执行了某些操作后，触发某些代码的执行。即，事件就是可以被JS侦测到的行为。如，我们点击一个按钮，弹出对话框。
事件：某些操作，如，单击，双击，键盘按下了，鼠标移动了…
事件源：组件。即，谁触发了这个事件。如，按钮，文本输入框…
事件类型：如何触发，什么事件，如，鼠标点击（onclick）,鼠标经过…
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
事件通常与函数配合使用，当事件发生时，函数才会执行。

var btn = document,getElementById("btn");
btn.onclick = function (){  ... }//这就是一个简单的事件。

时间执行的步骤：

1.获取事件源document.getElementById("box");
2.注册事件box.onclick = function(){程序...}
3.添加事件处理程序（一般用function函数）

操作元素
利用JS的dom操作元素改变元素里边的内容，属性等。

1、常用事件

1）点击事件：

onclick：单击事件
ondblclick：双击事件

2）焦点事件

onblur：失去焦点
onfocus:元素获得焦点。

3）加载事件：

onload：一张页面或一幅图像完成加载。

4）鼠标事件：

base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效

onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmousemove 鼠标被移动。
onmouseover鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。

onmousedown->onmouseup->onclick;这三个事件一起使用的触发顺序

给btn按钮添加点击事件，点击弹出 你好！
let btn = document.querySelector("button");
btn.onclick = function(){
	alert("你好！")
}

5）键盘事件：

base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效

onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开，不识别功能键，比如 Ctrl 等。

键盘按键被松开时触发，弹出 你好！
window.onkeyup = function() {
    alert('你好！')
}

6）选择和改变事件

onchange 域的内容被改变。
onselect 文本被选中。

7）表单事件：

onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
onselect文本被选择时。
onchange框内容被改变时。
oninput表单每次输入时触发。

将表单每次输入的内容打印到控制台
let input = document.querySelector('input')
input.oninput = function() {
    console.log(this.value);
}

2、事件的注册

告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
注册事件的两种方式（静态注册事件、动态注册事件）
- 静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
- 动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 =function(){}这种形式赋于事件响应后的代码，叫动态注册。

动态注册基本步骤：

1、获取标签对象

2、标签对象.事件名 =fucntion(){}

通过keydown事件演示回车键，ESC键。

                                                                                                                 ~~删除线格式~~

JS基础具体详细内容接下来会进一步写出（以上内容均为本人学习内容）

非为鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
桐——前端006（JS基础，语法，事件，函数）

JS基础javascript是一门高级编程语言浏览器分成两部分：渲染引擎，js引擎。JS由三部分组成：ECMAScript(JavaScript语法)，DOM（页面文档对象），BOM（浏览器对象模型）JS有三种书写方式：行内<input type="button" value="唐伯虎" onlick="alert('秋香')">，内嵌<head><script>alert('沙漠骆驼')</script></head>，外部<he
复制链接

扫一扫