JS学习笔记(一): 基础
一. 什么是JavaScript
JavaScript是一种描述语言，==基于对象和事件驱动==的脚本语言
JavaScript特点
- 脚本语言（一种轻量级的编程语言）
- 一种解释性语言（无需预编译）
- 被设计为向HTML页面添加交互行为
- 运行于客户端
JavaScript组成
DOM(Document Object Model文档对象模型):
- HTML和XML的应用程序接口（API）
- 把整个页面规划为层级式的节点结构
BOM(Browser Object Model浏览器对象模型):
可对浏览器窗口进行访问和操作
包括
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口及调节浏览器窗口大小
- 获取用户屏幕分辨率的屏幕对象
- WEB浏览器详细的定位对象
对象举例
- Window对象
- Navigator对象
- Screen对象
- History对象
- Location对象
关于ECMAScript
ECMAScript定义了脚本语言的所有属性、方法和对象包括语法、类型、关键字、保留字、运算符、对象等除了JavaScript外，同时也是Nombas的ScriptEase和Flash脚本ActionScript的基础
二. js在html中的声明
<html>
<head>
<title>JS学习title>
<script type="text/javascript">
// js中的注释,与java相同
script>
head>
<body>
body>
html>
三. 弹出框
1. alert(警告框)
如果要确保信息传递给用户，通常会使用警告框。
当警告框弹出时，用户将需要单击“确定”来继续。
alert("我是警告框");
注意:
- 浏览器自上而下解析html,当解析到弹出框时,浏览器处于阻塞状态,代码在这一行停止解析,浏览器处于等待状态,只有当用户响应了弹出框后,浏览器才会继续往下解析
- alert弹出框没有返回值
2. prompt(提示框)
如果希望用户在进入页面前输入值，通常会使用提示框。
当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。(阻塞)
如果用户单击“确定”，该框返回输入值(字符串类型)。如果用户单击“取消”，该框返回 NULL。
// 只有一个参数: 消息提示串
var userName = prompt("请输入你的用户名:");
// 两个参数:1. 消息提示符, 2.输入框中的默认字符串
var userName = prompt("请输入你的用户名:", "刘德华");
// 没有参数:消息提示符和输入框都为空
var userName = prompt();
3.confirm(确认框)
如果您希望用户验证或接受某个东西，则通常使用“确认”框。
当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
var flag = confirm("你确定要退出吗?");
四. 变量的声明与使用
JS的变量声明，是通过 var 语句来声明的，无需指定数据类型
var num = 10;
var str = "JavaScript";
// 省略var语句,直接变量声明
x = 17; // 相当于window.x = 17; (不推荐,这样做直接将变量提示为了全局变量)
五. 数据类型
| 类型 | 描述 |
|---|---|
| Undefined | 1.Undefined 类型只有一个值,即undefined 2.未定义或定义未赋值 |
| Null | 表示尚不存在的对象, 与undefined值相等 |
| Number | 整数型和浮点型都是Number |
| Boolean | 只有 true 和 false |
| String | 一组被引号(单引号或者双引号)括起来的文本 |
六. 运算符
JS中的算术运算符, 赋值运算符, 比较运算符, 逻辑运算符,位运算符与Java相似
比较特殊的有:
==等值运算符:
-
先判断类型,类型一致则直接比较值
-
类型不一致,则使用Number()进行强转后再进行比较;
alert(1 == "1"); //true alert(1 == true); //true alert(1 == "true"); //false alert("1" == true); //true alert("1" == "true"); //false alert(true == "true"); //false
===运算符:
-
先判断类型,类型一致则再比较内容,内容一致则返回true
-
类型不一致直接返回false
alert(1 === "1"); //false
typeof运算符:
返回变量的类型。返回的为字符串类型
alert(typeof "10"); // string
注意:
- 在算数运算中如果两边的数据类型不是number,会自动使用Number()强转后进行运算,字符串的加法会作为字符连接
- 在字符串中, +代表的一定是字符串连接符, 不参与运算
七. 条件和循环语句
JS中的条件和循环语句与Java相同, 略微有差别的是foreach语句
Java中的foreach语句对应JS中的for…in语句
for(变量a in 对象obj){
...
}
八. 函数
1. 常用系统函数
| 函数名称 | 描述 |
|---|---|
| parseInt() | 解析一个字符串并返回一个整数 |
| parseFloat() | 字符串转换为浮点数 |
| toString() | 返回字符串 |
| isNaN() | 检查某个值是否是数字,如果不是数字,则返回true,反之,返回false |
| eval() | 将字符串作为JS代码,并执行 |
| Boolean() | 转化为逻辑值 |
| Number() | 对象转化为数字 |
| String() | 对象转化为字符串 |
示例:
alert(parseInt("123"); //123
alert(parseInt("12aa3"); //12
alert(isNaN("abc")); //true
alert(isNaN("123")); //false
eval("alert(123);"); //123
2. 自定义函数
/* 自定义函数方式一 */
function 函数名(参数1,参数2,...){
// 函数代码块
}
/* 自定义函数方式二 */
var 函数名 = function(参数1,参数2,...){
// 函数代码块
}
区别:
- 第一种方式，会将函数的声明和定义一起提升到作用域的最顶上去。
- 第二种方式，如果方法的调用在方法的声明定义之前, 将得到函数未声明的错误
3. 调用
<script type="text/javascript">
function func(){}
/* 调用方式一 */
func();
script>
<input type="button" onclick="func()"/>
<input type="button" onclick="javascript:alert('直接声明')"/>
注意:
- 函数在调用时,形参可以不赋值,也可以不全部赋值 , js参数不赋值默认为undefined
九. 事件
JavaScript侦测到的行为
事件举例：
-
鼠标点击
-
页面或图像载入
-
鼠标悬浮于页面的某个热点之上
-
在表单中选取输入框
-
表单提交
-
键盘按键
页面中常用的事件:
| 事件名称 | 描述 |
|---|---|
| onload 和 onunload | 当用户进入或离开页面时就会触发onload和onunload事件 |
| onfocus , onblur 和 onchange | 主要与form表单里的文本域或下拉框配合使用 |
| onsubmit | form表单提交时发生 |
| onmouseover 和 onmouseout | 鼠标移至对象上和离开时发生 |
| onclick 和 ondbclick | 对象被点击/双击时发生 |
示例:
<script type="text/javascript">
function func(){
alert("我是按钮");
}
script>
<input type="button" onclick="func()" />
十. 程序调试方法
- alert()调试法
- document.write()调试法
- console.log()调用法