JavaScript基础入门
1.js的两种引入方式：
方式一：创建HTML 5 file文件，直接添加<script>标签，把js脚本写入标签里面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert(123)
</script>
</body>
</html>
说明：
1.IntelliJ IDEA工具中通过快捷键ALT+F2调出浏览器执行HTML文件；
2.<script>标签尽量放在body或者body和html标签对中间，尽量放后面，因为需要先成功渲染出来html文件，再识别<script>标签
若放在head标签中，可能还未渲染出界面，不一定能识别到<script>标签。
3.代码运行最终效果时弹框提示：123
4.此时会出现在网页右键检查的Console页签上：
var x=12;
console.log(x);
5.此时会输入到HTML页面中：
document.write("Hello YYY!");
document.write("<h1>Hello YYY!</h1>");
方式二：导入文件：
首选，创建JavaScript file文件，文件内容如下：
alert(666)
然后，在HTML文件中引入此此文件即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
2.JavaScript的注释方式：
方式一：单行注释：
// var x;
方式二：多行注释：
/* var x;
x=6; */
3.JS的基本数据类型：
3.1.typeof函数（区分基本数据类型）说明：
console.log(typeof 3):输出3对应的数据类型为number
console.log(typeof "hello"):输出3对应的数据类型为String
console.log(typeof true):输出3对应的数据类型为boolean
console.log(typeof undefined):输出3对应的数据类型为Undefined
console.log(typeof null):输出3对应的数据类型为Null
数组或者大括号表示的对象都是object，后续会用其他函数来区分：
console.log(typeof [12,3,4]):输出3对应的数据类型为object
console.log(typeof {"name":"123"}):输出3对应的数据类型为object
Null：null--表示引用的对象为空
Undefined:undefined
number:包括int 和 float
String
Boolean
以上皆存储于栈中（栈对应于堆的地址）
object---存储于堆中
3.2.强制类型转换：
强制转换成整型：
parseInt（"123"）----123
parseInt（"123abc"）----123
parseInt（"abc123"）----NAN
parseInt（"hello"）----NAN
说明：只识别前面能识别到的，但是如果开始就识别不到，就会直接返回NAN
补充说明：NAN:not a number---转换数字失败的时候就是这个结果
函数eval：将字符串强制转换为表达式并返回结果 eval("1+1")=2; eval("1<2")=true
4.JS的运算符
4.1.i++\i--\++i\--i
var i=10;
console.log(i++);--输出10
console.log(++i);--输出11
4.2.NaN只要参与比较，布尔值一定是false，除非!=
var n=NaN;
console.log(n>5);--false
console.log(n<5);--false
console.log(n==5);--false
console.log(n==NaN);--false
console.log(n!=NaN);--true
4.3.比较运算符两侧如果一个是数字类型，一个是其他类型，会将其他类型转换成数字类型：
console.log(2=="2");--true
console.log(2==="2");--false,说明：3个等于号表示完全比较
4.4.比较运算符两侧如果都是字符串类型，比较的是最高位的asc码，如果最高位相等，继续取第二位比较；
说明：asc码中是0-9、A-Z、a-z的排序
5.JS的控制语句与循环
5.1.if语句：
if(2>1){
alert("hello")
}else if(5>2){
alert(5)
}else{
alert(4)
}
5.2.switch语句
var week=3;
switch(week){
case "Monday":alert("星期一");break;
case "Tuesday":alert("星期二");break;
case 3:alert("星期三");
case 4:alert("星期四");break;
default:alert("nothing");
}
说明：当case语句后面没有break时，弹框显示星期三，点击确定后，还会弹框显示星期四，遇到break才会跳出当前case；
default只有在case匹配失败的时候才会执行；
5.3.for循环的两种方式：
方式一：
for(var i=0;i<attr.length;i++){
document.write(attr[i]);
}
方式二：
for (var i in attr){
document.write(i);
document.write("<br>");
}
说明：推荐使用第一种方式，因为第二种方式在获取元素标签对象时，不仅会输出下标，还会多出三个没用的东西：length、item、namedItem；
注意：第二种方式在js语言中表示的是数组下标，而非数组中的元素，但是在python和java等语言中表示的都是数组中的元素；
7.通过for和while两种方式求100以内数字的加和
7.1.for循环：
var sum=0;
for (var i=0;i<101;i++){
sum+=i;
}
console.log(sum);
7.2.while循环：
var x=0;
var i=1;
while(i<=100){
x+=i;
i++;
}
console.log(x);
8.异常
try{
console.log(123);
throw Error("define error");
}
catch(e){
console.log(e)
}
finally{
console.log("finally");
}
最终执行结果：
123
define error
finally
说明：finally语句无论try是否抛出异常都会执行；
主动抛出异常 throw Error("xxxx")；
9.JS的字符串对象
9.1.创建字符串对象的两种方式
方式一：
var str1="hello";
console.log(typeof str1);--输出string
方式二：
var str2=new String("hello2");
console.log(typeof str2);--输出object
9.2.字符串的属性
console.log(str1.length);
9.3.字符串的方法
9.3.1.格式编排方法
console.log(str1.italics());//加<i>标签 <i>hello</i>
console.log(str1.bold());//加<b>标签
console.log(str1.anchor());//加<a>标签
9.3.2.取子字符串
console.log(str1.substr(1,3));--表示从第一个字符开始取，一共取3个字符--结果：ell
console.log(str1.substring(1,3));--表示从第一个字符开始取，取到第三个字符（左取右不取）---结果：el
说明：字符串的索引是从0开始的
切片：
console.log(str1.slice(1,4));--结果：ell
console.log(str1.slice(-3,-1));--结果：ll--说明：hello字符串最后一个是-1，然后-3是l，从-3取到-1，最后一个-1不取，左取右不取
9.3.3.大小写转换
var str1="AbcdEfgh"; var str2=str1.toLowerCase(); var str3=str1.toUpperCase(); alert(str2); //结果为"abcdefgh" alert(str3); //结果为"ABCDEFGH"
9.3.4.获取指定字符串
书写格式 x.charAt(index) x.charCodeAt(index) 使用注解 x代表字符串对象 index代表字符位置 index从0开始编号 charAt返回index位置的字符 charCodeAt返回index位置的Unicode编码 ---------------------- var str1="welcome to the world of JS! 苑昊"; var str2=str1.charAt(28); var str3=str1.charCodeAt(28); alert(str2); //结果为"苑" alert(str3); //结果为33489
9.3.5.查询字符串索引
//书写格式
//
//x.indexOf(findstr,index)
//x.lastIndexOf(findstr)
//-------------------------------------
var str1="welcome to the world of JS!";
var str2=str1.indexOf("l");
var str3=str1.lastIndexOf("l");
alert(str2);
//结果为2
alert(str3);
//结果为18
//-------*********************************************************-------
//书写格式
//
//x.match(regexp)
//
//x.search(regexp)
//
//使用注解
//
//x代表字符串对象
//
//regexp代表正则表达式或字符串
//
//match返回匹配字符串的数组，如果没有匹配则返回null
//
//search返回匹配字符串的首字符位置索引
//-------------------------------------
var str1="welcome to the world of JS!";
var str2=str1.match("world");
var str3=str1.search("world");
alert(str2[0]);
//结果为"world"
alert(str3);
//结果为15
9.3.6.子字符串处理
方式一：截取字符串
//截取子字符串 // //书写格式 // //x.substr(start, length) // //x.substring(start, end) // //使用注解 // //x代表字符串对象 // //start表示开始位置 // //length表示截取长度 // //end是结束位置加1 // //第一个字符位置为0 var str1="abcdefgh"; var str2=str1.substr(2,4); var str3=str1.substring(2,4); alert(str2); //结果为"cdef" alert(str3); //结果为"cd" //-------*********************************************************------- //x.slice(start, end) var str1="abcdefgh"; var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); //结果为"cd" alert(str3); //结果为"efgh" alert(str4); //结果为"cdefg" alert(str5); //结果为"fg"
方式二：替换字符串
//x.replace(findstr,tostr)
var str1="abcdefgh";
var str2=str1.replace("cd","aaa");
alert(str2);
//结果为"abaaaefgh"
方式三：分割字符串
var str1="一,二,三,四,五,六,日";
var strArray=str1.split(",");
alert(strArray[1]);
//结果为"二"
方式四：连接字符串
//y=x.concat(addstr)
//
//使用注解
//
//x代表字符串对象
//addstr为添加字符串
//返回x+addstr字符串
var str1="abcd";
var str2=str1.concat("efgh");
alert(str2);
//结果为"abcdefgh"
10.数组
1.创建数组的三种方式
方式一：
var arr1=[1,"hello",[11,2],{"name":"Yuan"}];
方式二：
var arr2=new Array(3);//可以定义数组长度，也可以不定义
方式三：
var arr3=new Array(1,"world",true,[1,2,3]);
2.Array对象的方法
2.1.连接数组-join方法
var arr5=[1,2,3,4,"1234"]
console.log(arr5.join("**"))---结果：1**2**3**4**1234
说明：在js脚本中join是被数组调用的，但是在python中，join是被字符串调用的，如："---".join("hello","world"),注意:python中字符串调用join的参数只能是字符串，不可写整数，因为js语言可自动做类型转换，所以写整数也可以的。
2.2.连接数组-concat方法
var arr5=[1,2,3];
var ret=arr5.concat([5,66]);
console.log(ret); --结果：[1,2,3,5,66]
console.log(typeof ret);--结果：object
2.3.数组排序-reverse sort
//反转：reverse
var arr6=[23,45,37,88];
console.log(arr6.reverse());--结果：[88,37,45,23]
//排序sort--按大小进行排序
var arr7=[10,45,100,88];
console.log(arr7.sort());---结果：[10,100,45,88]
注意：排序是按照最高位进行排序的
实现：让sort可以按照十进制大小比较来排序，可如下操作：
var arr7=[10,45,100,88];
function f(a,b) {
if(a>b){
return 1
}
else if ((a<b){
return -1
}
else {
return 0
}
}
console.log(arr7.sort(f));---结果：[10,45,88,100]
另，函数可简写如下：
function f1(a,b) {
return a-b
}
因为上面返回的不用非要是1，只要是整数即可；
2.4.toString（）
JS的任何数据类型都拥有此方法，调用此函数的最终结果typeof会是string。
2.5.删除子数组
//x. splice(start, deleteCount, value, ...) // //使用注解 // //x代表数组对象 //splice的主要用途是对数组指定位置进行删除和插入 //start表示开始位置索引 //deleteCount删除数组元素的个数 //value表示在删除位置插入的数组元素 //value参数可以省略 var a = [1,2,3,4,5,6,7,8]; a.splice(1,2); //a变为 [1,4,5,6,7,8] alert(a.toString()); a.splice(1,1); //a变为[1,5,6,7,8] alert(a.toString()); a.splice(1,0,2,3); //a变为[1,2,3,5,6,7,8] alert(a.toString());
2.6.数组的进出栈操作(1)---先进后出
var arr7=[1,2,3];
arr7.push([7,8,0]);//说明：此数组作为一个整体插进去的
arr7.push("hello",5);//说明：可用逗号分隔开
console.log(arr7);//[1,2,3,Array[3],"hello",5]
console.log(arr7.length);//6
console.log(arr7.pop());//5
2.7.数组的进出栈操作(2)--先进后出
var arr8=[4,5,6];
arr8.unshift([11,222]);
arr8.unshift(true,"yes");
console.log(arr8);//[true,"yes",Array[2],4,5,6]
console.log(arr8.length)//6
arr8.shift();//true
2.8.JS总结
数组中可以存放任意的数据类型；
11.JS的函数对象
说明：函数定义时若没有return返回值，则默认返回null
11.1.创建函数的两种方式
方式一：
function f(x,y){
alert(123);
return x=y;
}
console.log(f(23,5678));
方式二：---var 函数名 = new Function("参数1","参数n","function_body");
function foo(name){
console.log("hello"+name);
}
foo("shangdi");
等价于：
var obj=new Function("name","console.log(\"hello\"+name)")
obj("武大")
注意：加载顺序：JS在执行代码之前，会把所有的function都加载了，python则时一行行的执行（读一行解释一行），故python的方法调用一定是写在方法定义之后的，但是JS语言则没有此限制；
11.2.Function 对象的 length 属性
console.log(foo.length);//返回函数的参数个数
11.3.函数调用
function add(x,y,z) {
return x=y=z
}
console.log(add(1,2,3,4,5,6));//返回6，多传参数没问题，用多少取多少即可
console.log(add(1,2));//返回NaN，少传的参数用undefined标识,无法成功转换成整型，故最终返回NaN
//面试题
function f(x,y) {
return x+y
}
var f=1;
var b=2;
f(f,b)
结果报错：Uncaught TypeError：f is not a function，因为后续定义f=1。覆盖了f是函数，最后f不是函数的情况下就不能用括号去调用；
11.4.函数的内置对象arguments
function f(a,b) {
console.log(arguments);//[1,2,45,6,7,78]
console.log(arguments[0]); //1
return a+b;
}
f(1,2,45,6,7,78)
实现：求任意个数的整数相加
function ADD() {
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i]
}
return sum
}
console.log(ADD(1,2,34,5,6))//48
11.5.匿名函数
func("hello");
var func = function (arg) {
alert(arg)
}
说明：以上调用会报错，因为匿名函数不是标准函数，不会加载，故把函数写在定义之前，会报错：Uncaught TypeError：f is not a function
。
var func = function (arg) {
alert(arg)
}
func("hello");
等同于：
(function (arg) {
alert(arg)
})("Yuan")
说明：以上写法可弹框正常显示
12.JS的函数作用域
说明：python和JS是一样的，它们的控制语言if、while等没有作用域，定义变量则是全局变量，但是函数、类等有自己的作用域；
12.1.嵌套函数作用域：
var city = 'beijing';
function func(){
var city = 'shanghai';
function inner(){
var city = 'shenzhen';
console.log(city);
}
inner();
}
func();
结果：shenzhen
12.2.嵌套函数作用域
var city = 'beijing';
function Bar(){
console.log(city);
}
function func(){
var city = 'shanghai';
return Bar;//此处相当于返回Bar函数
}
var ret = func();
ret(); //beijing
13.window对象之定时器
13.1.Window 对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
示例：
var ret=window.confirm("Hello");
console.log(ret)
说明：点击确定则返回结果为true，点击取消，则返回结果为false
prompt() 显示可提示用户输入的对话框。输入什么显示什么，什么都不输入则显示null。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 close() 关闭浏览器窗口。 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。
示例：一秒钟就（仅）执行一次
function f() {
console.log("hello....")
}
setTimeout(f,1000)
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
示例：说明：执行结果为空，因为前面的执行后，还在等待一秒后显示的过程中，就被取消了
function f() {
console.log("hello....")
}
var c= setTimeout(f,1000)
clearTimeout(c)
scrollTo() 把内容滚动到指定的坐标。
实现：跑马灯---引用setInterval()、clearInterval()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#id1{
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<input type="text" id="id1" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showTime() {
var current_time=new Date().toLocaleString();
var ele=document.getElementById("id1");
ele.value=current_time;
}
var clock1
function begin() {
if(clock1==undefined){
showTime();
clock1=setInterval(showTime,1000); //说明：此段若没有if判断，则当多次点击时，会生成多个闹钟，且后续闹钟会抢占前面闹钟的变量clock1，但是前面的闹铃没有姓名，但是前面闹钟依然在执行，不能通过end函数停止
}
}
function end() {
clearInterval(clock1);
clock1=undefined;
}
</script>
</body>
</html>
14.history对象
History 对象方法：
back() 加载 history 列表中的前一个 URL。 forward() 加载 history 列表中的下一个 URL。 go() 加载 history 列表中的某个具体页面。//说明：go函数引用的参数为1和-1，貌似2和-2不行---示例：<button onclick="history.go(1)"></button>
说明：相当于浏览器左上角的左右箭头
15.location对象
Location 对象方法：
location.assign(URL) //加载一个新的url
location.reload()//刷新页面
location.replace(newURL)//用一个新的页面替换当前页面-----注意与assign的区别：assign是可以后退的，但是replace是替代当前页面，不是生成新的页面，所以没有后退按钮
浙公网安备 33010602011771号