系列文章目录
第一章 JAVA集中学习第一周学习记录(一)
第二章 JAVA集中学习第一周项目实践
第三章 JAVA集中学习第一周学习记录(二)
第四章 JAVA集中学习第一周课后习题
第五章 JAVA集中学习第二周学习记录(一)
第六章 JAVA集中学习第二周项目实践
第七章 JAVA集中学习第二周学习记录(二)
第八章 JAVA集中学习第二周课后习题
第九章 JAVA集中学习第二周学习记录(三)
第十章 JAVA集中学习第二周学习记录(四)
第十一章 JAVA集中学习第三周学习记录(一)
第十二章 JAVA集中学习第三周小组项目开发
第十三章 JAVA集中学习第四周学习记录(一)
第十四章 JAVA集中学习第四周学习记录(二)
第十五章 JAVA集中学习第四周学习记录(三)
第十六章 JAVA集中学习第四周学习记录(四)
文章目录
- 系列文章目录
- 前言
- 一、JavaScript介绍
- 1. 为何会用JavaScript
- 2. JavaScript的组成部分
- 3. JavaScript的特性
- 4. ECMAScript语法
- 4.1 输出
- 4.1.1 alert()弹框输出
- 4.1.2 confirm()判断输出
- 4.1.3 log()控制台输出
- 4.2 输入
- 4.3 变量
- 4.4 赋值
- 4.5 变量类型
- 4.6 运算符
- 4.7 选择
- 4.8 循环
- 4.9 方法
- 4.9.1 声明式创造方法
- 4.9.2 赋值式创造方法
- 4.9.3 new对象方式
- 4.10 数组
- 4.11 常用类
- 5. BOM浏览器对象模型
- 5.1 浏览器对象——window
- 5.2 window有哪些常见属性
- 5.3 window有哪些常见方法
- 总结
前言
本文简单介绍JavaScript语言:包括JavaScript特殊在哪里,能做什么,在输入输出、变量、赋值、变量类型、运算符、选择、循环、方法、数组方面与Java的异同。特别指出,因为简单介绍,所以不会涉及太深,只是对每个知识点进行了解,并进行代码测试。在下攸攸太上,我其实在我们星球也是宅男,但在我们星球,宅男力越高,属性越强,就这样我从出生开始就是ൠ♄§之王,无敌很寂寞的…
顺便提一嘴:地球人甄别计划已经到80%了,呼呼哗哗哗哗哗哗哗!!!
一、JavaScript介绍
JavaScript——简称js
1. 为何会用JavaScript
历史:之前的html不支持判断,每次都需要去后端数据库里读取数据进行校验,而且数据传输也慢,所以很麻烦。
有人开发了一种叫LiveScript的语言,改善了当时的用户体验,当时用Java写出来的网页很火很好,所以为了抱Java大腿,所以改名为JavaScript。
JavaScript可以通过页面的一个变化,来回应用户的动作
2. JavaScript的组成部分
ECMAScript(语法)+
DOM(文档对象模型)+
BOM(浏览器对象模型)
3. JavaScript的特性
2、JavaScript基于对象的和事件驱动的编程语言
3、JavaScript是阻断式解释执行语言;Java是半编译半解释(上面代码不执行完,下面代码不执行)
4、JavaScript是弱类型语言;Java是强类型语言(声明变量时,有没有指定变量类型)
5、JavaScript是动态语言(因为),Java是准静态语言(反射:能把方法看作变量,可以破泛型,泛型只在编译期起作用)
4. ECMAScript语法
4.1 输出
4.1.1 alert()弹框输出
alert("欢迎来到甘霖凉");
4.1.2 confirm()判断输出
返回值为boolean
var i = confirm("确认嘛");
if(i){
alert("删!扇他娘的");
}else alert("不删?我扇你娘的!");
window.console.log("我是变量i=", i);
4.1.3 log()控制台输出
window.console.log("我是变量i=", i);
4.2 输入
弹出弹框获取文本
var name1 = window.prompt("你**谁啊?!这么跟*子说话?");
4.3 变量
var:成员变量 (方法外)
let:局部变量(方法里)
const:常量
如果一个变量没用var或let声明,一旦它被调用过一回,就会变成成员变量(所有方法都能用)
可以使用未声明的变量,因为他有预加载,变量值是undefined不要故意去这样用
JavaScript中单引号、双引号都表示字符串
预加载只加载到等号左面
4.4 赋值
同Java
4.5 变量类型
声明变量时没有,赋值后就有变量类型了
整数&小数:number
字符&字符串:string
布尔:boolean
null:object
变量只声明没赋值就使用:undefined(只有val声明的变量,const声明的不会出现这种情况)不要故意去这样用
变量类型转换
function demo8(){
let n1 = 1;
let n2 = '1';//1,1,1,不是数字转成NaN
let n3 = "1";//1,1,1,不是数字转成NaN
let n4 = false;//0,NaN,NaN(Not a Number)
let n5 = true;//1,NaN,NaN
let n6 = 1.1;//1.1,1,1.1
let n7 = 1.0;//1,1,1
let n8 = '1.1.1';//NaN,1,1.1
//NaN类型是number类型,相当于类型转了,值变无效了
console.log(Number(n2) + "," + parseInt(n2) + "," + parseFloat(n2));
console.log(Number(n3) + "," + parseInt(n3) + "," + parseFloat(n3));
console.log(Number(n4) + "," + parseInt(n4) + "," + parseFloat(n4));
console.log(Number(n5) + "," + parseInt(n5) + "," + parseFloat(n5));
console.log(Number(n6) + "," + parseInt(n6) + "," + parseFloat(n6));
console.log(Number(n7) + "," + parseInt(n7) + "," + parseFloat(n7));
console.log(Number(n8) + "," + parseInt(n8) + "," + parseFloat(n8));
}
number()可以把true转成数字1,false转成数字0
parseInt()、praseFloat()转换汉字结果是NaN
4.6 运算符
同Java
==双等
===三等
function demo9(){
let boo = true;
let a = 1;
let b = '1';
let c = 1;
alert(boo==a);//boo/b true
alert(boo===a);//boo/b false
alert(a==c);//true
alert(a===c);//true
}
==在比较前先进行类型转换,将转换后的值进行比较。值相等返回true,值不等返回false
===在比较值前先比较类型,类型相等了比较值。类型不等为false。不做转换。
4.7 选择
同Java
4.8 循环
同Java,代码举例:
var i = 1;
var j = 1;
for (i = 1; i < 10; i++) {
for (j = 1; j <= i; j++) {
document.write(i + "*" + j + "=" + (i * j) + " ");
}
document.writeln("<br />");
}
4.9 方法
先定义再调用
Java中有返回值有修饰符,除了构造方法没有返回值
JavaScript中没有返回值不用写,修饰符只有function
三种构造方法形式
4.9.1 声明式创造方法
function 方法名(参数列表){}
function demo10(a, b, c){
alert("我是demo10" + a + "," + b + "," + c);
return true;
}
function demo11(){
alert(demo10(1,2,3,4))
if(demo10(1, 2, 3)){
alert("是真的");
}
}
参数列表只有名字没有类型,实参的个数可以和形参的个数不相等
4.9.2 赋值式创造方法
var demo12 = function(){}
预加载时会认为他是变量,同名的话会被覆盖【没有重载】,不推荐使用
4.9.3 new对象方式
var demo13 = new Function("alert('我是new对象创建一个方法');");
不能实现复杂函数,不推荐使用
4.10 数组
数组长度可变:
function demo16(){
var arr = new Array(5);
alert(arr.length);
arr[5] = 10;
alert(arr.length);
var arr2 = new Array('a', 'b', 'c');
alert(arr2);
var arr3 = new Array();
//可简写
var arr4 = [];
arr4[0] = "张三";
arr4[1] = {name:"lulu", age :34, sex:"nsadufj"};
arr4[2] = {name:"luxi", age :134, sex:"sdf2"};
alert(arr4);
alert(arr4[1].age);
arr3 = [{name:"lulu", age :34, sex:"nsadufj"}, {name:"luxi", age :134, sex:"sdf2"}]
alert(arr3[1].age);
}
4.11 常用类
object类:依然是所有类
第一种输入数据方式:
function demo14(){
let obj1 = new Object();
obj1.name = "露露";
obj1.age = 123;
obj1.sex = "Ohnnsid";
alert(obj1.name + "+" + obj1.age + "+" + obj1.sex);
}
另一种输入数据方式:
function demo14(){
//标准的json格式
let obj2 = {"name":"baba","age":"12","sex":"wee2"};
let obj1 = {name:"lulu", age :34, sex:"nsadufj"};//{}是new Object()的简写
alert(obj1.name + "+" + obj1.age + "+" + obj1.sex);
alert(obj2.name + "+" + obj2.age + "+" + obj2.sex);
}
剧透的输入数据方式,运行试试哇:
function demo15(){
var obj1="{'name':'零零','age':'12','sex':'3ewqas'}";
eval("var obj2=" + obj1);
//eval()将string类型的参数,转成解释后的js代码
alert(obj2.name + "+" + obj2.age + "+" + obj2.sex);
alert([] == []);
alert({} == {});
}
5. BOM浏览器对象模型
5.1 浏览器对象——window
js只有一个全局作用区
5.2 window有哪些常见属性
历史记录栏:
function test1(){
window.history.go(1);
//整数表示前进,负数表示后退
}
正数表示前进,负数表示后退
地址栏:
function test2(){
window.location.href = "https://www.so.com/s";
//正数表示前进,负数表示后退
}
5.3 window有哪些常见方法
弹框方法alert(),confirm(),prompt(),
打开关闭方法、定时器方法、清除定时器方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var num = 10;
var obj1;
function tesee(){
obj1=window.setInterval(function(){
if(num-- == 0)
window.close();
else
document.getElementById("divd").innerText = "last" + num + "sec";
}, 1000);
}
function clearr(){
window.clearInterval(obj1);
}
</script>
</head>
<body>
<input type="button" value="close" onclick="tesee()" />
<div id="divd"></div>
<input type="button" value="stop" onclick="clearr()" />
</body>
</html>
总结
本文介绍了JavaScript特殊在哪里,能做什么,在输入输出、变量、赋值、变量类型、运算符、选择、循环、方法、数组方面与Java的异同。没错,从上面前言直接复制的,本文详细介绍了ECMAScript语法,以及对BOM浏览器对象模型开了个头,下文将继续价绍JavaScript。在下攸攸,呃,怎么感觉好晕,啊,我睡。。。。。。
咦?我在哪里?这是谁的身体?喔喔喔喔喔啊!这股强大的力量!这具身体具有的力量足以毁灭这个星球!不知道这是谁的身体,我谢谢你,我将以你的身体成为“新世界的神”!!!
呼呼,其实我没被夺舍,骗你的,这种烂梗也就能玩一次了…