JavaScript基础
JavaScript 是一个解析型、弱类型语言:解释器逐行解释运行、变量数据类型由赋的值决定
JavaScript 是一种轻量级的编程语言
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行
JavaScript 很容易学习
JavaScript的引入方式
-
通过script来将JavaScript代码直接写入到head或者body中
<script> JavaScript代码 </script>
-
通过script标签引入外部JavaScript文件
<script src="../js/xxx.js"></script>
-
在标签中写入JavaScript属性:
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
JavaScript数据类型
在Js中,创建变量统一使用**var
**关键字,其变量的数据类型取决于赋值的数据类型
变量的数据类型可以使用 typeof() 方法来查看
基本数据类型
因为Js是弱类型的语言,定义的变量类型取决于赋值的类型,在Js中,有四中基本类型
- Number:数字类型:整数,浮点数和科学计数法(通常用来写极大或者极小的数字)
- String:字符串类型,可以用单引号或者双引号
- Boolean:布尔类型
- Undefined:未定义类型,如果变量定义了没赋值就是这种类型
- Null:空类型,和未定义类型差不多,所以暂且归为一类
引用数据类型
1.JavaScript 对象:
由花括号分隔,在括号内部,对象的成员变量以名称和值对的形式 (name : value) 来定义。成员变量之间由逗号分隔:
var person={firstname:"John", lastname:"Doe", id:5566};
空格和折行无关紧要。声明可横跨多行:
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
如果想要调用person对象中的成员变量,那么有两种方式:
var name = person.lastname;//推荐使用第一种
var name = person["lastname"];
2.数组:new Array()
常用方法有:
方法名称 | 效果 |
---|---|
length | 返回数组长度 |
join() | 传入一个分隔符,将数组中所有元素用分隔符连接起来成一个字符串 |
push() | 添加一个元素进入数组 |
sort() | 排序,字典序 |
3.函数:
格式:不用特别说明返回值类型,但可以有返回值,直接return;
function 函数名称 (参数列表){
方法体
}
实例:
function caculate() {
var num1 = parseFloat(prompt("请输入第一个数字"));
var num2 = parseFloat(prompt("请输入第二个数字"));
var char = prompt("请输入运算符号");
switch (char) {
case '+':
document.getElementById("answer").innerHTML = num1 + char + num2 + " = " + (num1 + num2);
break;
case '-':
document.getElementById("answer").innerHTML = num1 + char + num2 + " = " + (num1 - num2);
break;
case '*':
document.getElementById("answer").innerHTML = num1 + char + num2 + " = " + (num1 * num2);
break;
case '/':
document.getElementById("answer").innerHTML = num1 + char + num2 + " = " + (num1 / num2);
break;
}
}
函数调用:在事件中调用函数即可
实例:在按钮的点击事件中调用函数caculate
<p>运算结果:</p>
<p id="answer"></p>
<button onclick="caculate()">运算按钮</button>
特殊数据类型
- 正则表达式 (RegExp)
- 日期(Date)
JavaScript的变量和常量
在 2015 年以前,我们使用 var 关键字来声明 JavaScript 变量。
在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字 来定义一个常量,使用 let 关键字定义的限定范围内作用域的变量。
JavaScript字面量
在编程语言中,一般固定值称为字面量,如 3.14。
数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。
- 3.14
- 1001
- 123e5
字符串(String)字面量 可以使用单引号或双引号:
- “John Doe”
- ‘John Doe’
表达式字面量 用于计算:
- 5 + 6
- 5 * 10
数组(Array)字面量 定义一个数组:
- [40, 100, 1, 5, 25, 10]
对象(Object)字面量 定义一个对象:
- {firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
函数(Function)字面量 定义一个函数:
- function myFunction(a, b) { return a * b;}
JavaScript常用方法
方法名称 | 效果 |
---|---|
isNaN() | 判断其参数是否为非数字,如果是字符串也会判断其含义是否为数字 |
parseInt() | 将参数转化为Number |
parseFloat() | 将参数转化为浮点数 |
prompt | 提示用户输入信息,返回的是字符串类型变量 |
alert() | 在当前页面弹出信息框,并显示内容 |
document.write() | 在html中打印信息 |
document.getElementById(元素id).innerHTML = “内容” | 首先根据元素id获取元素,然后将内容写入到元素中 |
console.log() | 向控制台打印信息 |
JavaScript常用事件
事件名称 | 含义 |
---|---|
onclick | 鼠标点击事件 |
ondbclick | 鼠标双击事件 |
onmouseover | 鼠标悬停事件 |
onmouseout | 鼠标移出事件 |
onmousmove | 鼠标移动事件 |
onkeydown | 键盘按下某个键时的事件 |
onkeyup | 键盘按键弹起时的事件 |
onkeypress | 就按盘按下时产生有效字符时的事件 |
onload | 加载事件:可以在body标签中调用 |
onresize | 窗体大小改变时的事件 |
onfocus | 文本框获得焦点事件 |
onblur | 文本框失去焦点事件 |
onchange | 文本框内容改变时的事件,下拉列表或单选按钮、复选框选择改变事件 |
onsubmit | 表单提交时的事件 |
onscroll | 滚动条滚动时的事件 |
JavaScript输出方式
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
JavaScript字符集
Unicode