JavaScript入门

JavaScript是什么

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

我是图片

JavaScript的引入方式

1
2
3
4
5
6
<!-- 内部引入 -->
<script type="text/javascript">
alert("内部引入");
</script>
<!-- 外部引入 -->
<script src="js/index.js" type="text/javascript"></script>

JavaScript语法基础

数据类型

类型 名称 示例
Number 数字类型 10-十进制、0.5-浮点、 0xf-十六进制
String 字符串类型 ‘string’ “字符串”
Object 对象类型 document window
Boolean 布尔类型 true和false
undefined 未定义类型 undefined
null 空类型 null

变量

变量首先是一个容器,可以用来存放数据,而且存放在这个容器中的数据可以发生变化。

定义变量

1
2
3
//变量 = 值
var a = 10;
//以上代码定义了一个变量 a ,变量里保存的值是数值 10 。

变量的命名规则

  • 字符可以是字母、下划线、美元符号或数字
  • 第一个字符必须是一个字母、下划线(_)或一个美元符号($)
  • 不能以关键字或保留字命名
  • 区分大小写

运算符

算术运算符

运算符 名称 示例
+ a=a+1、a+=2、a=”hello”+” world!”
_ a=a-1、a-=2
* a=a1、a=2
/ a=a/1、a/=2
% 求模运算符(求余) a=a%2、a%=2
++ 递增 a++、++a
递减 a–、–a

关系运算符

运算符 名称 示例
== 等于 1==”1”:true、1==”2”:false、1===”1”:false
!= 不等于 1!=2:true、 1!=1:false
> 大于 2>2:false、2>1:true
>= 大于等于 2>=2:true
< 小于 2<2:false、1<2:true
<= 小于等于 2<=2:true

逻辑运算符

|| - 或
&& - 与
! - 非
1
2
3
4
5
6
7
8
9
10
11
12
//只要其中一个为false就是false
true && false = false
true && true = true
false && true = false
//只要其中一个为true就是true
true || false = true
true || true = true
false || true = true
false || false = false
//非true就是false 非flase就是true
!true = false
!false = true

流程控制语句

if语句

1
2
3
4
5
6
7
if(条件判断语句){
语句1
}else if(条件){
语句2
}else{
语句3
}

for语句

1
2
3
4
5
for(初始值表达式,循环条件表达式,循环后表达式){
语句
//continue:结束本次循环,继续下次循环
//break:退出循环
}

switch语句

1
2
3
4
5
6
switch(条件判断语句){
case value1: 语句1; break;
case value2: 语句2; break;
…………
default:语句1
}

while语句

1
2
3
while(条件判断语句){
语句
}

do..while语句

1
2
3
do{
语句
}while(条件判断语句)

JavaScript基础实例

获取元素对象

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="d1" class="box"></div>
<div id="d2" class="box"></div>
// 根据ID名获取div
var div = document.getElementById('d1');
// 根据标类名获取div
var div = document.getElementsByClassName('box');
// 根据标签名获取div
var div = document.getElementsByTagName('div');
var div = document.querySelector('#d1');
// 根据标类名获取div
var div = document.querySelectorAll('.box');
// 根据标签名获取div
var div = document.querySelectorAll('div');

onclick事件

1
2
3
4
5
6
7
8
9
10
// 根据ID名获取DIV
var div = document.getElementById('d1');
/*
onclick:给DIV设置点击事件
function:函数,是一个方法
*/
div.onclick = function () {
div.style.color = "red";
div.innerHTML = "点击了";
}

onmouseenter/onmouseleave事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 根据ID名获取DIV
var div = document.getElementById('d1');
/*
onclick:给DIV设置点击事件
function:函数,是一个方法
*/
div.onmouseenter = function () {
div.style.color = "red";
div.innerHTML = "进来了";
}
div.onmouseleave = function () {
div.style.color = "blue";
div.innerHTML = "出去了";
}
文章作者: Coio
文章链接: http://yoursite.com/2018/06/13/JavaScript入门/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Coio
打赏
  • 微信
  • 支付寶