Javascript初学基础(二)

最新推荐文章于 2024-02-29 21:26:51 发布

糖送圆茗亲

最新推荐文章于 2024-02-29 21:26:51 发布

阅读量75

点赞数

分类专栏：学习 javascript 文章标签： javascript 初学者

本文链接：https://blog.csdn.net/wangyc1234/article/details/100099526

版权

学习同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

javascript

8 篇文章 0 订阅

订阅专栏

Javascript初学基础(二)

javascript事件

事件是可以被javascript侦测到的行为
html事件是发生在html元素上的事情

HTML事件

html事件可以是浏览器行为，也可以是用户行为
html网页中每个元素都可以产生某些触发javascript函数的事件
- html加载完成时
- html input字段改变时
- html按钮被点击时

例如，当button被点击时，将自身的内容改变：

<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <button onclick = "this.innerHTML = Date();">显示时间</button>
    </body>
</html>

常见html事件

事件	描述
onclick	html元素被点击
onmouseover	在html元素上移动鼠标
onmouseout	鼠标从html元素上移开
onkeydown	按下键盘按键
onload	浏览器完成页面加载
onchange	html元素改变

更多事件参考

javascript字符串

js字符串用于存储和处理文本

字符串可存储一系列字符，字母、数字、符号等

//可使用单引号、双引号
var myName = "Abc Def";
var myName = 'Abc Def';

//若要在字符串中存储引号，一般要存储的引号与字符串引号不同
var word = "I like 'ghost'.";
var word = 'I like "ghost".'

//若要在双引号字符串中存储双引号，可使用转义字符"\"，单引号亦然
var word = "I like \"ghost\".";
var word = 'I like \'ghost\'.';

可以使用位置索引来访问字符串中的字符

var myName = "Abc Def";
var char = myName[2];	//char = 'c';
//索引从0开始，即第一个字符为[0]，第二个为[1]...

可使用length来计算字符串长度

var strLength = myName.length;

转义字符的使用和大多语言一样

代码	输出符号
\’	单引号 ’
\"	双引号 "
\\	反斜杠 \
\n	换行符
\t	tab制表符
\r	回车
\b	退格符
\f	换页符

字符串可以是对象

通常字符串是原始值，可直接创建：var str 1= “Hello world”;

也可以使用new关键字将字符串定义为一个对象：var str2 = new String(“Hello world”);

var str1 = "Hello world";
var str2 = new String("Hello world");
typeof str1;	//返回String
typeof str2;	//返回Object

一般不创建字符串对象，会拖慢执行速度，也可能会产生其他副作用

javascript运算符

javascript中的算术运算符(+, -, *, /, %, +=, -=, *=, /=, %=)、逻辑运算符(&& || !)、关系运算符(< > != <= >=)、自增自减运算符(++ --)、位运算符，和java也几乎相同

javascript语句

js中的语句和java及其相似，if…else, switch, for循环, while循环, break和continue, 语法几乎一致，因为之前学过java，这里就不作过多介绍了

//示例：if...else
var a = 3.333;
var b = 4.444;
if(a > b){
    c = a;
}
else if(a < b){
    c = b;
}
else{
    c = 0;
}

//示例：switch
var day = new Date().getDay();
switch(day){
    case 0:
        document.write("周日");
        break;
    case 6:
        document.write("周六"):
        break;
    default:
        document.write("工作日");
}

//示例：for循环，第n行输出1~n
var i, j;
for (i = 1; i < 10; i++) {
	for (j = 1; j < 10; j++) {
		if (j <= i) {
			document.write(j);
		}
	}
}

//示例：while循环，输出10次
var a = 1;
while(a <= 10){
    document.write("第" + a + "次输出");
    a++;
}

//示例：break用于跳出循环，continue用于跳过循环中的一个迭代
for (i = 0; i < 10; i++){
	if (i == 3){
		break;		//当i=3时，结束循环
	}
	document.write(x + "The number is " + i + "<br>");
}

for (i = 0; i <= 10; i++){
	if (i == 3){
        continue;	//跳过i=3的循环
    }
	document.write(x + "The number is " + i + "<br>");
}

javascript类型转换

javascript可通过一些内置方法将数据类型转换，Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值

javascript数据类型

在js中有5中不同的数据类型

string
number
boolean
object
function

3种对象类型

Object
Date
Array

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

null
undefined

typeof操作符

可使用typeof操作符来查看变量的数据类型

document.write(typeof "John");     		// 返回 string 
document.write(typeof 3.14);              // 返回 number
document.write(typeof NaN);               // 返回 number 
document.write(typeof false);             // 返回 boolean
document.write(typeof [ 1,2,3,4]);        // 返回 object
document.write(typeof {name: 'John', age:34});  // 返回 object
document.write(typeof new Date());        // 返回 object
document.write(typeof function () {});    // 返回 function
document.write(typeof myCar);    // 返回 undefined (若myCar未定义) 
document.write(typeof null);     // 返回 object

constructor属性

constructor属性可返回所有变量的构造函数

//返回函数 String()  { [native code] }
document.write("John".constructor);	  

//返回函数 Number()  { [native code] } 
document.write((3.14).constructor);   

//返回函数 Boolean() { [native code] }
document.write(false.constructor);  

//返回函数 Array()   { [native code] }
document.write([1,2, 3,4].constructor);   

//返回函数 Object()  { [native code] }
document.write({name:'John', age:34}.constructor);  

//返回函数 Date()    { [native code] }
document.write(new Date().constructor);  

//返回函数 Function(){ [native code] }
document.write(function() {}.constructor);

JavaScript 类型转换

JavaScript 变量可以转换为新变量或其他数据类型：

通过使用 JavaScript 函数
通过 JavaScript 自身自动转换

数字转字符串

全局方法**String()**可将数字转换成字符串
Number的**toString()**方法也可以

var x = 10.23;
document.write(String(x));	//将x转换为字符串并返回, x = "10.23"
document.write(String(10 + 23)); //将10+23的结果转换为字符串并返回, 字符串为"33"

document.write(x.toString());	//将x转换为字符串并返回, x = "10.23"
document.write((10 + 23).toString());	//将10+23的结果转换为字符串并返回, 字符串为"33"

布尔值转字符串

同样，可通过**String()全局方法和boolean的toString()**方法来转换

document.write(String(true));	//返回"true"
document.write(String(false));	//返回"false"

document.write(true.toString());	//返回"true"
document.write(false.toString());	//返回"false"

日期转字符串

//同样，两种方法将获取到的时间日期转换为字符串
document.write(String(Date()));	//返回当前时间并以字符串输出
document.write(Date().toString());	//返回当前时间并以字符串输出
//实际上以上两种方法输出的内容都相当于：
document.write(Date());

字符串转数字

字符串转数字可使用全局方法Number()
只包含数字的字符串(如"3.14159")转换为3.14159
空字符串转换为数字0
其他字符串会转换为NaN

var x = "0.97";
Number(x);	//返回0.97
Number(""); //返回0
Number("  ");	//返回0
Number("12 3 ts"); //返回NaN
//NaN意为无法表示的数字，它本身不是数字，但它确实是Number类型

布尔值转数字

使用全局方法**Number()**转换

Number(ture);	//返回1
Number(false);	//返回0

日期转数字

使用全局方法**Number()**转换

var d = new Date();
document.write(Number(d));	//返回从1970年1月1日到现在的毫秒数

//Date的方法getTime()，这个方法返回的是从1970年1月1日到现在的毫秒数
d.getTime();	//

自动转换

当javascript操作两个不同类型的数据时，比如一个字符串数字和一个数，会进行自动转换，变成相同的数据类型

document.write(5 + null);	//5，null自动转换为0
document.write("5" + null);	//"5null"，null自动转换为"null"
document.write("5" + 1);	//"51"，1自动转换为"1"
document.write("5" - 1);	//4，"5"自动转换为5

糖送圆茗亲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript初学基础(二)

Javascript初学基础(二)javascript事件事件是可以被javascript侦测到的行为html事件是发生在html元素上的事情HTML事件html事件可以是浏览器行为，也可以是用户行为html网页中每个元素都可以产生某些触发javascript函数的事件html加载完成时html input字段改变时html按钮被点击时例如，当button...
复制链接

扫一扫