JS学习笔记(一): 基础_var username=prompt((请输入用户名)-CSDN博客

本文链接：https://blog.csdn.net/Marco___/article/details/100364440

一. 什么是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>
        <!-- js代码一般位于head标签中 -->
       	<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()调用法