Javascript学习笔记

w3school
runoob

定义

简称js,是一种脚本语言,只能在浏览器中执行。是一种弱类型的语言。是一门基于对象和事件驱动的脚本语言,通常用来提高网页与用户的交互性
名词解释
基于对象:它不仅可以创建对象,也能使用现有的对象。JS没有类的概念,也没有编译的过程。是一边解释一边执行。

事件驱动:在JS中,大部分情况下都是通过事件触发驱动函数执行的,从而实现特定的功能。(比如点击div将内容替换为时间、当鼠标滑过元素,元素就有翻转的动态。)

脚本语言:在网络前端开发环境下,用于嵌入在客户端浏览器中的一段小程序。

特点和优势

特点:

(1)JS是一门直译式的语言,直接执行的就是源代码.

是一边解释一边执行,没有编译的过程(不像Java需要提前编译为class文件再运行).

(2)JS是一门弱类型的语言,没有严格的数据类型.

优势:

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)

只要有浏览器的地方都能执行JS

HTML中引入.js文件

  • 通过script标签引入JS代码
<head>
	<meta charset="utf-8"/>
	<script>/* JS代码 */
		function fn(){
			alert("JS的第1种引入方式");
		}
	</script>
</head>
<body>
	<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>

  • 通过script标签引入外部的JS文件
// 另存为一个1.js的文件 
function fn(){
	alert("JS的第2种引入方式");
}

// 然后在html文件里面引入
<head>
	<meta charset="utf-8"/>
	<script src="1.js"> </script>
</head>
<body>
	<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>

数据类型

  • 数字number
    在JS中,数值类型只有一种,就是浮点型。
    在JS中,需要时会自动的进行数据类型的转换,比如:在显示和处理的时候,浮点型和整型会自动的转换。

  • 字符串类型-string
    在JS中,字符串是基本数据类型。
    在JS中,字符串直接量是通过单引号或者双引号引起来。

  • 布尔类型-boolean
    值为true或者是false;

  • undefined
    值只有一个就是undefined。表示变量没有初始化值

  • null
    值也只有一个,就是null。表示空值或者不存在的对象。

  • 复杂数据类型
    函数、数组、对象(自定义对象、内置对象、DOM对象、BOM对象…)

a=[1,2,10,20];
a.sort();//返回 [1, 10, 2, 20]
a.sort((a,b)=>{return a-b;});//传一个比较函数就可以变成正常顺序了
  • 数组的遍历
let arr = ['a', 'b', 'c'];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

//这种形式,不光会把length以内的索引遍历出来。而且如果arr同时绑定了其他的属性,比如arr.name='zhangsan',那么 forin这种形式会把name也遍历出来,所以也可以使用arr[i]打印出来
for (var i in arr) {
	console.log(arr[i]);
}
//下面这个说是ES6引进的
for (var i of arr) {
    console.log(i);
}

JS的变量

js是弱类型语言,所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
javascript没有类似采用静态语言类型,如java的变量类型是编译期就确定的;而它采用了动态类型,也就是说在编译期类型不确定,运行时会动态根据变量的赋值来决定它的类型,这点比较灵活。这也是双刃剑,编译期就难以检查出其赋值的错误。

assignment

const: immutable,尽可能的使用该种方式声明变量
let:block scope,如果确定该变量的值在稍后会发生改变,才使用这种方式
var:function scope,尽量不要用该种方式

运算

运算符的运算方式与Java里面大致相同。

operators
+= -= *= /= ++ --assignment
+ - * / **
> < >= <=comparison

优先级

参考MDN

==比较的是两者的值,忽略类型,类似java里面的重写后的equals
===全等,值和类型都要一致才返回 true

1==1 //true
1=="1" //true
1===1 //true
1==="1" //false
5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1" 
"5" - 1     // 返回 4         "5" 转换为 5

模板字符串

`反引号包裹的内容 ${这里可以直接写变量名} ${也可以写javascript表达式}`
`I'm ${firstName}, a ${year - birthYear} year old ${job}!`

流程控制

与java一 样有 if、while、for、switch用法 也基本一致,switch中是区分数值类型的1和字符串类型的"1"的,这两个值在switch里面是不相等的。

var a = prompt("请输入");
			toWeek(a);

			function toWeek(a) {
				if (typeof a != 'number') {
					console.log(typeof a + ":" + a)
					a = parseInt(a);
				}
				switch (a) {
					case 1:
						console.log("周一")
						break
					case 2:
						console.log("周二")
						break;
					case 3:
						console.log("周三")
						break;
					case 4:
						console.log("周四")
						break;
					case 5:
						console.log("周五")
						break;
					case 6:
						console.log("周六")
						break;
					case 7:
						console.log("周天")
						break;

					case true:
						console.log(true);
						break;
				}
			}

类定义方式详解

DOM树结构

提供给js用来操作html元素的一套W3C的标准

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

水晶心泉

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

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

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

打赏作者

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

抵扣说明:

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

余额充值