javascript快速入门 javascript入门基础

转载

mob6454cc70a873 2023-08-16 10:43:22

文章标签 javascript快速入门 javascript js 脚本语言 java 文章分类 Python 后端开发

JavaScript入门基础语法学习和使用

1. JS 概述
2. JS 输出
3. JS 基础语法

3.1 js 使用
3.2 js 注释
3.3 js 类型
3.4 js 变量
3.5 js 运算符
3.6 js 函数

4. JS 引用类型

4.1 String 字符串对象 & 使用
4.2 Array 数组对象 & 使用
4.3 Date 日期对象 & 使用
4.4 RegExp 正则对象 & 使用
4.6 Functions 全局函数 & 使用

5. JS 事件

JS学习资料来源：W3school-JavaScript + Runoob-JavaScript

1. JS 概述

JavaScript，简称JS，一门客户端脚本语言。

作用：
可以用来增强用户和 html 页面的交过过程，可以控制 html 元素，让页面有一些动态的效果，增强用户体验。
发展：
1992，Nombase开发，用于表单校验，ScriptEase
1995，Netscape(网景)开发LiveScript，SUN公司更名JavaScript
1997，ECMA协会制定标准ECMAScript，统一了所有客户端脚本语言的编码方式

总结：JavaScript = ECMAScript + BOM + DOM(xml Dom + html Dom)

2. JS 输出

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
使用 console.log() 方法在浏览器中显示 JavaScript 值。
F12 启用调试模式，在调试窗口中点击 “Console” 菜单，可看到其输出。

console.log()的用处：
主要是方便你调式 javascript 用的, 你可以看到你在页面中输出的内容。
相比 alert 他的优点是：他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用 alert 弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。

3. JS 基础语法

3.1 js 使用

① 内部 JS：
定义<script>标签，标签内就是js代码
② 外部 JS：
定义<script>通过src属性引入外部的js文件

<script src="${pageContext.request.contextPath}/xxx.js">
    /*外部结合方式后，script 标签内js代码无效*/
</script>

a. <script>可以定义在页面的任何地方，位置会决定执行顺序 b. <script>可以定义多个

3.2 js 注释

单行 // 注释内容
多行 /* 注释内容 */

3.3 js 类型

基本数据类型：
number：数字，整数/小数/NaN(一个不是数字的数字类型)
string：字符串，“hello” ‘abc’
boolean：true 和 false
null：一个对象为空的占位符
undefined：未定义，变量没有初始化时的初始值
引用数据类型：
基本对象：Array / Boolean / Date / Number / String / RegExp / Functions(全局函数对象) / Math / Events
Function对象：~~var 方法名 = new Function(“形式参数列表”, “方法体”);~~

3.4 js 变量

Java是强类型语言，JavaScript是弱类型脚本语言。
语法：
var 变量名 = 初始化值; 获取变量类型：

<script>
    console.log(typeof 123); // number
    console.log(typeof "abc"); // string
    console.log(typeof true); // boolean
    console.log(typeof null); // object
    console.log(typeof NaN); // number
    console.log(typeof num); // undefined
    console.log(typeof [1,2,3]);// object
    console.log(typeof {"name":"Jerry", "age":20}); // object
</script>

3.5 js 运算符

一元 ： ++  --
算术 ： +  -  *  /  %
赋值 ： =  +=  -=
比较 ： >  <  >=  <=  ==  ===(全等于)
逻辑 ： &&  ||  !
三元 ： 表达式 ? 值1 : 值2
流程 ： if-else  switch-case  while  do-while  for  try-catch

● 注意事项

number：0或者NaN为 false，其他为 true
string：除了空字符串""为 false，其他为 true
null 和 undefined：都是 false 对象：所有对象都是 true

比较方式：

类型相同：直接比较，字符串按照字典顺序比较；
类型不同：先进行类型转换，再比较；（=== 全等于，类型和值都比较，先判断类型，类型不同，直接返回false）

switch分支：

Java中 switch 可接收的数据类型：byte int short char 枚举(jdk1.5) String(jdk1.7);
JS中 switch 可接收的数据类型：任意JS中的基本数据类型

<script>
	// 一元运算符
	var num1 = 1;
	var num2 = num1++;
	console.log(num1); // 2
	console.log(num2); // 1
	// 算术运算符：字符串自动转数字
	console.log(10 / "2"); // 5
	// 赋值运算符
	var num3 = 10;
	var num4 = 20;
	num3 += num4;
	console.log(num3);
	// 比较运算符
	console.log(10 != "10"); // false
	console.log(10 == "10"); // true(自动转数字)
	console.log(10 === "10"); // false(类型和值均相同)
	// 逻辑运算符
	console.log(!true); // false
	console.log(!0); // true
	console.log(!NaN); // true
	console.log(!""); // true
	console.log(!null); // true
	console.log(!undefined); // true
	// 三元运算符
	console.log(10 < 20 ? "结果正确" : "结果不正确");
	// switch
	switch (true) {
	  case true:
	    console.log("是true");
	    break;
	  case false:
	    console.log("是false");
	    break;
	}
	// for
	for (var i = 0; i < 10; i++) {
	  console.log("i="+i);
	}
</script>

3.6 js 函数

函数三种写法 + JavaScript 闭包 + 回调 + 系统函数：

<script>
// 函数定义方式 1 - 普通函数
function 方法名(形参列表) {
	方法体;
}

// 函数定义方式 2 - 匿名函数
var 方法名 = function(形参列表){
    方法体;
}

// 函数定义方式 3 - Function 不常用
var 方法体 = new Function("形参列表","方法体");

/* JavaScript 闭包：能够访问父作用域中的变量，提高了局部变量的生命周期。*/
var add = (function () { //自执行的匿名函数
    var count = 0; // 局部变量
    return function () { // 内部函数, 把方法返回，赋值给了变量result
        return count += 1; // 访问外部自执行函数的局部变量
    }
})();
console.log(result()); // 1
console.log(result()); // 2
console.log(result()); // 3

// JavaScript 函数回调
function operation(a, b, callback) {
    console.log("计算两个值: " + a + ", " + b);
    callback(a, b);
}
function add(x, y) {
    console.log("求和：" + (x + y));
}
function mul(x, y) {
    console.log("求积：" + (x * y));
}
operation(10, 20, add); //30 函数名是个对象引用，传参回调执行
operation(10, 20, mul); //200 函数名是个对象引用，传参回调执行

/* 系统函数 */
// 提示框 alert(); 仅提醒无返回值
alert("hello, 这是个弹窗");
// 确定/取消 confirm(); 有boolean返回值的选择提示框
var result = confirm("确定删除吗？");
console.log(result); // 确定 true；取消 false
// 输入提示框 prpmpt()
var input = prompt("请输入您的内容：");
console.log(input); // input为弹窗中输入的内容
// 转换类型系统函数 parseInt(str); parseFloat(); isNaN();
console.log( parseInt(input) );
console.log( parseFloat(input) );
console.log( isNaN(input) ); // true，判断一个内容是不是 不是一个数字
</script>

在方法中，有一个内置对象 arguments，包含所有的实际参数。

示例：

<script>
// 方式 1 示例
function method01(msg1, msg2, msg3) {
    // console.log(msg1 + " , " + msg2 + " , " + msg3);
    //arguments:属于方法的内置对象,包含是实际参数
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    return "hello js function1";
}

// 方式 2 示例
var method02 = function (msg1, msg2, msg3) {
    // console.log(msg1 + " , " + msg2 + " , " + msg3);
    //arguments:属于方法的内置对象,包含是实际参数
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    return "hello js function2";
}
</script>

4. JS 引用类型

4.1 String 字符串对象 & 使用

方法	描述
anchor()	创建 HTML 锚。
big()	用大号字体显示字符串。
blink()	显示闪动字符串。
bold()	使用粗体显示字符串。
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接字符串。
fixed()	以打字机文本显示字符串。
fontcolor()	使用指定的颜色来显示字符串。
fontsize()	使用指定的尺寸来显示字符串。
fromCharCode()	从字符编码创建一个字符串。
indexOf()	检索字符串。
italics()	使用斜体显示字符串。
lastIndexOf()	从后向前搜索字符串。
link()	将字符串显示为链接。
localeCompare()	用本地特定的顺序来比较两个字符串。
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
small()	使用小字号来显示字符串。
split()	把字符串分割为字符串数组。
strike()	使用删除线来显示字符串。
sub()	把字符串显示为下标。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
sup()	把字符串显示为上标。
toLocaleLowerCase()	把字符串转换为小写。
toLocaleUpperCase()	把字符串转换为大写。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toSource()	代表对象的源代码。
toString()	返回字符串。
valueOf()	返回某个字符串对象的原始值。

<script>
	var str = "hello, javascript";
	console.log(str.toUpperCase()); // HELLO, JAVASCRIPT
</script>

4.2 Array 数组对象 & 使用

方法	描述
concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

<script>
        // 创建数组对象
        var arr = new Array("a", "b", "c");
        console.log(arr); // (3)["a", "b", "c"]
        arr = [1, 2, 3, 4, 5];
        console.log(arr); // (5)[1, 2, 3, 4, 5]
        // .length 获取数组长度
        console.log(arr.length); // 5
        // .join() 连接为字符串
        var str = arr.join("");
        console.log(str); // 12345
        // .pop() 取出并删除最后1个元素
        var lastElem = arr.pop();
        console.log(lastElem); // 5
        console.log(arr); // [1, 2, 3, 4]
        // .push() 往数组存入新的元素
        var length = arr.push("aa", "bb");
        console.log(length); // 6
        console.log(arr); // (6) [1, 2, 3, 4, "aa", "bb"]
    </script>

4.3 Date 日期对象 & 使用

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	请使用 toUTCString() 方法代替。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

<script>
        // 获取当前时间
        var date = new Date();
        console.log(date.toLocaleString());
        var year = date.getFullYear();
        var month = date.getMonth()+1; // 0~11
        var day = date.getDate(); // getDate() 1~31
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();

        // 时间格式处理
        var timeStr = year+"/"+month+"/"+day+" "+hour+":"+minute+':'+second;
        console.log(timeStr);
        timeStr = [year, month, day].join("/")+" "+[hour,minute,second].join(":");
        console.log(timeStr);

        // 获取到当前时间毫秒值 1970/01/01 00:00:00 (中国 GMT+0800)
        console.log(date.getTime());
    </script>

4.4 RegExp 正则对象 & 使用

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

<script>
        /*  /^正则表达式$/  */
        var reg1 = /^[a]{3}$/; // 用 / 标记开始或结束
        // 正则匹配
        console.log(reg1.test("1aaa")); // true
    </script>

JS中正则表达式格式：/^正则表达式$/

4.6 Functions 全局函数 & 使用

函数	描述
decodeURI()	解码某个编码的 URI。
decodeURIComponent()	解码一个编码的 URI 组件。
encodeURI()	把字符串编码为 URI。
encodeURIComponent()	把字符串编码为 URI 组件。
escape()	对字符串进行编码。
eval（)	计算 JavaScript 字符串，并把它作为脚本代码来执行。
getClass()	返回一个 JavaObject 的 JavaClass。
isFinite()	检查某个值是否为有穷大的数。
isNaN()	检查某个值是否是数字。
Number()	把对象的值转换为数字。
parseFloat()	解析一个字符串并返回一个浮点数。
parseInt()	解析一个字符串并返回一个整数。
String()	把对象的值转换为字符串。
unescape()	对由 escape() 编码的字符串进行解码。

<script>
        // parseInt()
        var num1 = 10;
        var num2 = "20";
        console.log(num1 + parseInt(num2)); // + 号默认拼接
        // isNaN() 判断一个变量是否是 NaN
        var num3 = NaN;
        console.log(num3 == NaN); // false
        console.log(num3 === NaN); // false
        console.log(isNaN(num3)); // true
        // eval（) 更多的用于 json 字符串返回 js 对象
        var jsonStr = '{"username":"root", "password":"1234"}';
        var obj = eval（"(" + jsonStr + ")"); // 固定语法，将json字符串转换成js对象
        console.log(obj.username + "," + obj.password);
    </script>

5. JS 事件

JavaScript 允许在事件被侦测到时执行代码。
事件源：html标签
监听器：js方法
绑定/注册：标签中的属性赋值
事件：具体的操作

<%--事件源 + 绑定方式①--%>
// 监听器
function fn1() {
    console.log("按钮1点击了...");
}
...
<button onclick="fn1()">事件按钮1</button>


<%--事件源 + 绑定方式②--%>
// 获取 id 为 btn 的标签对象
var ele = document.getElementById("btn");
// fn2 使用方式 ① -- 最佳
ele.onclick = function () {
    console.log("按钮2点击了...");
}
...
<button id="btn">事件按钮2</button>

属性	此事件发生在何时...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

详细事件表：https://www.w3school.com.cn/jsref/dom_obj_event.asp

JS 事件示例：

<script>
function fn1() { console.log(event.keyCode + " 键盘按下 "); }
function fn2() { console.log(event.keyCode + " 键盘松开 "); }
</script>
<input type="text" onkeydown="fn1()" onkeyup="fn2()">

<script>
function fn1() {
    console.log("表单提交了..."); 
    if (条件) {
    	return true; // 不拦截表单
    } else {
    	return false; // 拦截表单提交
    }
}
</script>
<%-- return fn1() --%>
<form action="index.jsp" onsubmit="return fn1()">
消息：<input type="text" name="message"> <br>
<button type="submit">发送</button>
</form>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：python脚本main python脚本怎么写

下一篇：java只执行一次的定时器然后自动关闭 java定时器暂停

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯