变量-事件

变量

变量的定义:

变量就是存储值的一个容器

变量的命名规则:

变量名必须是字母、下划线、$开头

变量名必须是字母、下划线、$、数字组成

遵循驼峰命名法

要有语义化

不能使用关键字个保留字

var a = 10 
var _a = 20
var $a = 30 
var num2 = 90
console.log(a, _a, $a);

// 驼峰命名 -- 变量名由两个单词或者两个以上的单词构成,从第二个单词开始,首字母要大写
// 语义化
var userName = 'zahngsan'
var passWord = '123456'; 
console.log(userName, passWord);

// 不能使用关键字和保留字(现在不是关键字 将来会成为关键字的字)
var var = 90  // 错误 
var id = 80 // id是关键字 
var class = 100 // class是保留字

变量使用的注意事项:

1、变量声明必须使用var关键字

没有使用var关键字,是一个全局变量(在任何位置都可以使用)

注意:虽然是可以使用的,但是是不符合程序的设计标注的

不管这个变量参不参与计算,都会占用内存,会造成内存浪费,严重的会造成内存溢出

a = 10;

console.log(a);

2、变量必须先声明后使用

console.log(a * 2); // undefined 没有值 --- NaN

var a = 10;

3.变量名不能重复

后面的会覆盖前面的,导致值丢失

var a = 10;

var a = 20;

console.log(a); // 20

4、变量的声明方式

一次性声明一个变量并赋值

一次性声明多个变量,并同时赋值,每个变量之间使用逗号隔开一次性声明多个变量,并分开赋值

// - 一次性声明一个变量并赋值
var a = 10;
// - 一次性声明多个变量,并同时赋值,每个变量之间使用逗号隔开
var a = 10, b = 20, c= 30;
// - 一次性声明多个变量,并分开赋值
var num1, num2,num3;
num1 = 90
num2 = 100;
num3 = 200

事件

js是我们有能力创建动态得内容,但是,事件是可以被js侦测到得行为

简单理解:鼠标点击 -- 触发事件得相应机制

事件三要素:

1.事件源(哪个元素)-- 发生事件得元素 ---- 程序员人为定义得

2.事件类型(什么事件)-- 比如鼠标单击事件

3.事件得处理程序(绑定事件得元素做了什么事) -- 也就是事件被出发后,元素发生得行为

// 元素:html标签
// onclick:鼠标得左键 单击事件
// function(){}: 元素被单击,事件被触发后得执行动作的函数
元素.onclick = function(){
// 元素的动作代码
}
<body>
<button>按钮</button>
<script>
/*  需求:页面中有一个按钮,点击这个按钮,打印出:被刺了
1、页面  -- html
2、添加按钮 -- button
3、给按钮添加一个事件 -- 元素.onclick = function(){}
4、确定是单击事件 -- 事件名称 (onclick)
5、打印 -- console.log('被刺了 ') */

//  获取元素
var btn = document.querySelector('button')
// 添加事件
btn.onclick = function (){
// 做什么事
console.log('背刺了');
}
</script>
</body>

其他事件

onclick 点击事件
onmouseover 鼠标的经过(支持冒泡)
onmouseout 鼠标离开(支持冒泡)
onmouseenter 鼠标的经过(不支持冒泡)
onmouseleave 鼠标离开(不支持冒泡)

onmousedown 鼠标的按下
onmouseup 鼠标的抬起
onmousemove 鼠标的移动

oncontextmenu 右键 

window.onload

问题:

代码的加载顺序是从上到下,从左到右的,当吧js代码放在标签之前,js中的元素是获取不到的 (这个时候,标签并没有加载,所以是获取不到的)

解决:

window.onload的作用是:当读取到window.onload的时候,浏览器会把js代码存放到临时的内存空间中,等到页面中的所有资源(标签,样式,视频,图片等等)加载完成后,最后在加载js

注意:一个页面中,只能存在一个window.onload

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花殇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值