day09-JavaScript基础

2020-03-31 本文已影响0人建国同学

一、JavaScript入门

1.JavaScript简介

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
JavaScript的标准是ECMAScrip
JS是弱类型的语言

2.JavaScript组成部分

JavaScript 的内容，包含以下三部分：

ECMAScript（核心）：
JavaScript 语言基础(规定了 JavaScript 脚本的核心语法，如数据类型、
关键字、保留字、运算符、对象和语句等，它不属于任何浏览器；

DOM（文档对象模型）：
规定了访问 HTML 和 XML 的接口（提供了访问 HTML 文档（如
body、form、div、textarea 等）的途径以及操作方法）；Node：Document、Element、
Attr、Text

BOM（浏览器对象模型）：
提供了独立于内容而在浏览器窗口之间进行交互的对象和方法(提供了
访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）。

2.JavaScript的特点

1）. 是一种解释性脚本语言（代码不进行预编译）； html中的所有代码都是顺序执行
2）. 主要用来向 HTML（标准通用标记语言下的一个应用）页面添加交互行为；
3）. 可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。

3.JS代码编写的位置

1. 直接编写在html的script标签中

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS可编写的位置</title>
<script type="text/javascript">
    alert("Hello JavaScript!");
</script>
</head>

1. 编写在JS文件中

注意：script标签不能同时引入js文件和编写其他js代码

index.js: 编写JS代码
window.onload = function(){
//这里只能编写JS代码
alert("Hello JavaScript")
...
}

index.html: 引入JS文件
<script type="text/javascript" src="index.js"></script>

4.基本语法

标识符可以由任意顺序的大小写字
母、数字、下划线(_)和美元符号($)组成，标识符不能以数字开头，不能是 JavaScript 中的保留字
或关键字。
JavaScript 严格区分大小写 username 和 userName 是两个完全不同的符号
注释：
//单行注释
/**/文档注释
JS中的关键字和保留字

JS中的关键字和保留字

5.变量

变量的声明：var 变量名 -----》若变量没有初始化，默认是 undefined
打印变量：
方式 1：alert(变量名); 直接在浏览器中弹出对话框
方式 2(推荐)：console.log(变量名); （info、log、debug、warn、error）:在浏览器控制台打印
内容

6.数据类型

简单类型: String，Number，Boolean，Null，undefined
对象类型: Object, Array, Function
typeof 方法获取变量的数据类型。
num=18;
console.log(typeof num );//number

7.运算符

1. 比较运算符 = 和 == 以及 === 之间的区别:
  = 赋值
  == 比较两个数据的值是否相等，不会去判断类型
  === 先判断数据类型是否相等，然后在去判断值是否相等
1. 逻辑运算符
  在逻辑运算中 0、""、false、NaN、undefined、null 表示为 false，其他类型数据都表示 true。
  比较中先转换为 Boolean 类型，在执行逻辑与或

&& 和 || 运算符的区别:
&& 操作：从左往右依次判断，如果结果为false, 返回第一个为 false 的值，反之,返回最后一个为true值；
|| 操作：从左往右依次判断，返回第一个为 true 的值，否则返回最后一个值。

console.log("---    && 双与");
    console.log(true && true);      // true
    console.log(1 && true);         // true
    console.log(1 && 2);            // 2
    console.log("A" && 2);          // 2
    console.log("" && 2);           // 空字符串
    console.log(null && "B");       // null
    console.log("A" && "B");        // B
    console.log(1 && 2 && 3);       // 3
    console.log(1 && null && 3);    // null
    console.log("" && null && 0);   // 空字符串
    console.log(NaN && null);       // NaN

    console.log("---    || 双或");
    console.log(true || true);        // true
    console.log(1 || true);           // 1
    console.log(1 || 2);              // 1
    console.log("A" || 2);            // A
    console.log("" || 2);             // 2
    console.log(null || "B");         // B
    console.log("A" || "B");          // A
    console.log(1 || 2 || 3);         // 1
    console.log(1 || null || 3);      // 1
    console.log("" || null || 0);     // 0
    console.log(NaN || null);         // null

二、函数的定义与调用

1. 普通函数：

JS中不用指定函数的返回值类型(无论怎样都有返回,JS是弱类型语言)
var 函数类型变量 = function 函数名([参数名称1, 参数名称2, ..., 参数名称N]){
//程序代码
 [return 值;]
}
默认返回可写为 undefined

调用：
直接使用   函数类型变量(参数名称1, 参数名称2...)

1. 定义匿名函数

var add = function(x, y){
    return x+y;
 }
调用：
add(x,y);

三、面向对象

Javascript提供了一个构造函数模式：
其实就是一个普通函数，内部使用了this指向变量和方法,它们都会绑定在实例对象上，这个函数自动返回
这个新创建的对象

//如何使用JS来定义一个类(构造函数)
function Person(name, age){
//添加属性
this.name = name;
this.age = age;
//添加方法
this.sleep = function(){
console.log("困了,睡一觉");
}
}
//使用构造函数来创建对象
var p = new Person("Neld", 10);
console.log(p);
//访问对象中的成员
console.log(p.name);
console.log(p.age);
p.sleep();
//JS中,可以单独为某一个对象添加成员
p.xxx = "ooo";
console.log(p);
var p2 = new Person("xxx",10);
console.log(p2);

构造函数首字母大写，这是规范，官方都遵循这一个规范，如Number() Array()。

四、内置对象

1.Date

Date() 返回当前日期和事件
getFullYear() 获取Date对象中四位数字的年份
getMonth() 获取Date对象中的月份(0~11)
getDate() 获取Date对象中的天(1~31)
getHours() 获取Date对象中的小时
getMinutes() 获取Date对象中的分钟
getSeconds() 获取Date对象中的秒

2.String

属性:
length 字符个数
方法:
charAt(index) 返回指定位置的字符
concat(string1,string2,string3,....) 拼接字符串
fromCharCode(num) 可接受一个指定的 Unicode 值，然后返回一个字符串
subString(start,stop) 提取字符串中两个指定的索引号之间的字符。

console.log("-------3.内置对象(Date, String) ------");
    console.log("---3.1 Date()返回当前时间");
    var dateTime = new Date();
    console.log(dateTime);
    console.log("---3.2 getFullYear() 获取年份");
    var year = dateTime.getFullYear();
    console.log("---3.3 getMonth() 获取月份");
    var month = dateTime.getMonth()+1;
    console.log("---3.4 getDate() 获取日");
    var date = dateTime.getDate();
    console.log("---3.5 getHours() 获取小时");
    var hour = dateTime.getHours();
    console.log("---3.6 getMinutes() 获取分钟");
    var minute = dateTime.getMinutes();
    console.log("---3.7 getSeconds()  获取秒");
    var second = dateTime.getSeconds();
    console.log(year + "-" + month  + "-" + date + "  " + hour + ":" + minute + ":" + second);

    console.log("---3.8 length 获取字符长度");
    var str3 = "saw the child born：我看见孩童降生";    
    var str4 = "into the sun：隐入太阳"; 
    console.log(str3);
    console.log(str3.length);
    console.log("---3.9 charAt(index) 返回指定位置的字符");
    console.log(str3.charAt(1));
    console.log("---3.10 concat(str1,st2...) 拼接字符串");
    console.log(str3.concat(str4));
    console.log("---3.11 fromCharCode(n1,n2...)以指定的 Unicode值返回一个字符串 ");
    console.log(String.fromCharCode(72,69,76,76,79));
    console.log("---3.12 substring(start,stop) 返回指定位置之间的字符串");
    console.log(str4.substring(0,5));

五、数组

1.数组定义

创建数组对象 var arr = new Array();
类似数组中的静态初始化 var arr2 = new Array("西施","王昭君","貂蝉","杨贵妃"); var arr2 = newArray(1, 2, 3, 4);
类似数组的动态初始化 var arr3 = new Array(4);//这里的4是数组的长度,而不是元素
简写：
var arr4 = ["西施", "王昭君", "貂蝉", "杨贵妃"];

注意：对于 js 中的数组不会出现数组越界的异常，也不是定长的

2.数组中的常用属性和方法

1. 属性 length 属性，获取数组长度。

方法 :

concat(array1, array2, ......, arrayX)：连接两个或更多的数组，并返回结果。

join(separator)：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

reverse()：颠倒数组中元素的顺序（该方法会改变原来的数组，而不会创建新的数组）。

slice(start[, end])：从某个已有的数组返回选定的元素（返回的是一个新数组）。

pop()：删除并返回数组的最后一个元素。 shift()：删除并返回数组的第一个元素。

push(newelement1, newelement2, ...., newelementX)：向数组的末尾添加一个或更多元素，并返回新的长度。

unshift(newelement1, newelement2, ...., newelementX)：向数组的开头添加一个或更多元素，并返回新的长度。

splice(index, howmany, element1, ....., elementX)：用于插入、删除或替换数组的元素。

console.log("-------2.数组常用的方法------");
    console.log("---2.1 concat(str1,st2...) 字符串拼接");
    var str1 = "你好呀，你好，你";
    var str2 = "你，好呀，你好呀";
    console.log(str1.concat(str2));
    
    var arr2 = [ 'a', 'b', 'c' ];
    var arr3 = [ 'd', 'e', 'f' ];
    console.log("---2.2 concat(arr1,arr2...)数组拼接");
    console.log(arr2);
    console.log(arr3);
    console.log(arr2.concat(arr3));
    console.log("---2.3 join(separator)数组分隔");
    console.log(arr2.join(","));
    console.log("---2.4 reverse()数组倒序");
    console.log(arr2.reverse());
    console.log("---2.5 slice(start,end)截取返回新数组");
    var newArr = arr3.slice(1, 3);
    console.log("newArr:"+newArr);
    console.log("---2.6 pop()删除数组最后一个元素并返回");
    console.log(arr2.pop());
    console.log(arr2);
    console.log("---2.7 pop()删除数组第一个元素并返回");
    console.log(arr2.shift());
    console.log(arr2);
    console.log("---2.7 push(ele1,ele2..)向数组的末尾添加元素(返回当前长度)");
    console.log(arr2);
    console.log(arr2.push("aa","bb","cc"));
    console.log(arr2);
    console.log("---2.8 unshift(ele1,ele2..)向数组的前添加元素(返回当前长度)");
    console.log(arr3);
    console.log(arr3.unshift("dd","ee","ff"));
    console.log(arr3);
    console.log("---2.9 splice(index, howmany,ele1,ele2...)插入、删除或替换数组元素 ");
    console.log(arr3);
    
    arr3.splice(0, 0, "wow");// 插入
    console.log(arr3);
    
    arr3.splice(0, 1, null);// 删除
    console.log(arr3);
    
    arr3.splice(0, 3, "repalce");// 替换
    console.log(arr3);

3.数组的遍历方式

1. for 最简单的一种循环遍历方法，也是使用频率最高的一种

var arr = ["A","B","C","D"];
for(var i = 0; i< arr.length; i++){
  console.log(arr[i]);
}

1. forEach

性能仍然比普通循环略低

var arr = ["A","B","C","D"];
arr.forEach(function(item,index,array){
  console.log(item);
});

1. map

遍历数组中的每个元素,将回调函数中的返回值存到一个新的数组中,并返回

var arr = ["A","B","C","D"];
var newArr = arr.map(function(item,index,array){
  return item+index;
});
//newArr中的数据:["A1","B2","C3","D4"]

4、for-in

可以遍历数组（获取的索引）；也可以遍历对象（获取对象的属性名）。

//如果是遍历数组,i对应的是数组的索引
var arr = ["A","B","C","D"];
for(var i in arr){
  console.log(i);//索引
  console.log(arr[i]);//元素
}
//如果是遍历对象,name对应的是属性名
var obj = new Object();
for(var name in obj){
  console.log(name);//属性名
  console.log(obj[name]);
}

day09-JavaScript基础

一、JavaScript入门

1.JavaScript简介

2.JavaScript组成部分

2.JavaScript的特点

3.JS代码编写的位置

4.基本语法

5.变量

6.数据类型

7.运算符

二、函数的定义与调用

三、面向对象

四、内置对象

1.Date

2.String

五、数组

1.数组定义

2.数组中的常用属性和方法

3.数组的遍历方式

猜你喜欢

热点阅读

day09-JavaScript基础

一、JavaScript入门

1.JavaScript简介

2.JavaScript组成部分

2.JavaScript的特点

3.JS代码编写的位置

4.基本语法

5.变量

6.数据类型

7.运算符

二、 函数的定义与调用

三、 面向对象

四、 内置对象

1.Date

2.String

五、 数组

1.数组定义

2.数组中的常用属性和方法

3.数组的遍历方式

猜你喜欢

热点阅读

二、函数的定义与调用

三、面向对象

四、内置对象

五、数组