首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript笔记(三)

JavaScript笔记(三)

作者头像
木尤
发布2020-07-14 15:31:38
9590
发布2020-07-14 15:31:38
举报
文章被收录于专栏:我的csdn我的csdn

JavaScript笔记(三)

事件

HTML 事件可以是浏览器行为,也可以是用户行为。

以下是 HTML 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

JavaScript 可以触发 HTML 页面中的这些事件

onchange

HTML 元素改变

onclick

用户点击 HTML 元素

onmouseover

用户在一个HTML元素上移动鼠标

onmouseout

用户从一个HTML元素上移开鼠标

onkeydown

用户按下键盘按键

onload

浏览器已完成页面的加载

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo">123</p>
// 点击按钮,‘123’会变为现在的时间
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
//点击按钮,按钮上面的文字会变为现在的时间
//使用 this.innerHTML 修改自身元素的内容

运算符

+

-

*

/

%

++

加法

减法

乘法

除法

取模(余数)

自增

自减

运算符

例子

等同于

+=

x+=y

x=x+y

-=

x-=y

x=x-y

*=

x*=y

x=x*y

/=

x/=y

x=x/y

%=

x%=y

x=x%y

对字符串和数字进行加法运算

两个数字相加,返回数字相加的和;两个字符串相加,变量会连接成一个字符串;如果数字与字符串相加,返回字符串。

button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x=5+5;
	var y="5"+5;
	var z="Hello"+5;
	test1="hello w";
	test2="orld day";
	test3=test1+test2;
	var demoP=document.getElementById("demo");
	demoP.innerHTML=x + "<br>" + y + "<br>" + z + "<br>" + test3 ;
}
</script>

比较与逻辑运算符

比较

运算符

描述

==

等于(值相等就行)

===

绝对等于(值和类型均相等)

!=

不等于

!==

不绝对等于(值和类型有一个不相等,或两个都不相等)

>

大于

<

小于

>=

大于或等于

<=

小于或等于

逻辑

&&

and

||

or

!

not

条件语句

if语句
if (condition)
{
  当条件为 true 时执行的代码
}
if…else 语句
if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}
if…else if…else 语句
if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch 语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:                  //用 default 关键词来规定匹配不存在时做的事情
        与 case 1 和 case 2 不同时执行的代码
}

循环

For 循环
for (语句 1; 语句 2; 语句 3)             
{                                    //语句 1 (代码块)开始前执行
    被执行的代码块                     //语句 2 定义运行循环(代码块)的条件
}                                    //语句 3 在循环(代码块)已被执行之后执行 
for/in 语句循环遍历对象的属性
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var y="";
	var person={fname:"Yao",lname:"Ge",age:20}; 
	for (x in person){
		y=y + person[x];
	}
	document.getElementById("demo").innerHTML=y;
}
</script>                //输出YaoGe20
while 循环

在指定条件为真(或者伪真)时,会循环执行代码块,不会结束,可能导致浏览器崩溃

while (条件)
{
    需要执行的代码
}
do/while 循环

是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。

do
 {
  需要执行的代码
 }
while (条件);

typeof 操作符

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
	typeof 3.14 + " " +
	typeof false + " " +
	typeof {name:'john', age:34};
</script>
//输出number boolean object
//数组是一种特殊的对象类型

null

typeof null 返回 object

null是一个只有一个值的特殊类型。表示一个空对象引用

undefined

typeof undefined 返回 undefined

是一个没有设置值的变量

类型转换

在 JavaScript 中有 6 种不同的数据类型:

  • string
  • number
  • boolean
  • object
  • function
  • symbol

3 种对象类型:

  • Object
  • Date
  • Array

2 个不包含任何值的数据类型:

  • null
  • undefined
将数字转换为字符串

全局方法 String() 可以将数字,字母,变量,表达式转换为字符串。

(toString() 也有相同的效果)

String(x)            // 将变量 x 转换为字符串并返回
String(123)          // 将数字 123 转换为字符串并返回
String(100 + 23)     // 将数字表达式转换为字符串并返回
String(false)        // 返回 "false"
String(true)         // 返回 "true"
String(new Date())   // 返回此刻的日期时间
将字符串转换为数字

全局方法 Number() 可以将字符串、布尔值、日期转换为数字

Number("3.14")    // 返回 3.14 ||字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
Number(" ")       // 返回 0    
Number("")        // 返回 0    ||空字符串转换为 0
Number("99 88")   // 返回 NaN  ||其他的字符串会转换为 NaN (不是个数字)
Number(d = new Date())   //返回此刻的时间戳

原始值

转换为数字

转换为字符串

转换为布尔值

false

0

“false”

false

true

1

“true”

true

0

0

“0”

false

1

1

“1”

true

“0”

0

“0”

true

“000”

0

“000”

true

“1”

1

“1”

true

NaN

NaN

“NaN”

false

Infinity

Infinity

“Infinity”

true

-Infinity

-Infinity

“-Infinity”

true

“”

0

“”

false

“20”

20

“20”

true

“Runoob”

NaN

“Runoob”

true

[ ]

0

“”

true

[20]

20

“20”

true

[10,20]

NaN

“10,20”

true

[“Runoob”]

NaN

“Runoob”

true

[“Runoob”,“Google”]

NaN

“Runoob,Google”

true

function(){}

NaN

“function(){}”

true

{ }

NaN

“[object Object]”

true

null

0

“null”

false

undefined

NaN

“undefined”

false

参考来源https://www.runoob.com/js/js-type-conversion.html

ction(){}" | true | | { } | NaN | “[object Object]” | true | | null | 0 | “null” | false | | undefined | NaN | “undefined” | false |

参考来源https://www.runoob.com/js/js-type-conversion.html

后续参考https://www.runoob.com/js/js-tutorial.html

注:笔记仅供学习交流,请勿用于违法行为,如造成后果,与笔者无关

本人小白一枚,如果各位老哥发现错误,还望指出

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-07-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JavaScript笔记(三)
    • 事件
      • 运算符
        • 比较与逻辑运算符
          • 条件语句
            • switch 语句
              • 循环
                • typeof 操作符
                  • null
                    • undefined
                      • 类型转换
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档