标签：console 入门对象函数 JavaScript let 属性快速 log

JavaScript

1.引入方式

1.1内部脚本,将JS代码定义在HTML页面种

JS代码必须在<script>标签之中
可以在HTML文件任意位置
一般放在<body>体标签底部,改善运行速度

1.2外部脚本,将JS代码定义在外部JS文件中,在引入HTML页面

利用带 src属性的 <script>标签引入JS文件
<script>标签必须要有尾标签

2.基础语法

2.1书写语法

区分大小写
三种输出语句

window.alert()警告弹窗(可以省略window)
document.write()在HTML上输出内容
console.log() 写入浏览器控制台

2.2变量

2.2.1变量名

可以是任何字母,数字,下划线,美元符号
不能是数字开头
建议使用驼峰命名

2.2.2三种声明方式

var(可以重复定义,在大括号外有效)

{ var name="cs" var name="ab" } console.log(name);

let(不可以重复定义,在大括号外无效)更安全

{ let age=18; // let age=22; } // console.log(age);

const(常量,不可更改)

const gender="男"; console.log(gender); // gender="女"

2.2.3数据类型

分为原始类型和引用类型

原始类型:

number整数(整数,小数,NaN)NaN表示非数字
string字符串(单双引号包裹)
boolean布尔(true,false)
undefined(变量未初始化时的默认值)
null(对象为空)

引用类型:

对象

2.2.4运算符

大多数和java保持一致

==和===的区别

==只要值相等就返回true,底层自动类型转换

===要类型和值都相等才返回true

注意

流程控制语句if，switch，for等和java保持一致

在js中，0,null,undefined,"",NaN理解成false,反之理解成true

3JS函数

3.1函数的定义

普通函数

利用 function关键字变量名(参数...){

}

匿名函数

类似于java中使用匿名内部类

let 变量名=function(参数...){

}

箭头函数

类似于java中的lambda表达式

let 变量名= (参数...)=>{

}

注意

函数类似于Java中的方法
调用函数时可以传递多个参数,但只会接收定义函数时参数的个数

4.JS对象

4.1Array

4.1.1数组定义方式

let arr= new Array();
let arr=[1,2,3,4,]

4.1.2数组特点

在JS中Array类似于java中的集合;

1.Array长度是可变的

2.JS是弱类型语言,可以在一个数组中有任意类型数据

4.1.3数组属性和方法

1种属性3种函数

length属性(长度)

push()函数可以将一个数据添加到数组末尾

splice()函数可以删除数组元素

forEach()函数用来遍历数组

4.1.4三种遍历方式

普通for遍历数组

for (let i = 0; i < number.length; i++) { console.log(number[i]); }

forEach+箭头函数

number.forEach(element => { console.log(element); });

forof遍历

for (let i = 0; i < number.length; i++) { console.log(number[i]); }

4.1.5函数遍历的区别

forEach()函数只能遍历有值的元素,undefined不能遍历,普通for和forof可以

4.2String

4.2.1创建的创建的三种方式

let str=new String();
let str="...."(单双引号都可以)
let str=`...`(模板字符串)

4.2.2普通字符串和模板字符串的区别

模板字符串使用变量可以利用${表达式}

// 需求：使用普通字符串和模板字符串分别按照"xxxx年xx月xx日"格式打印当前日期。 //1 获取当前年月日 let date=new Date(); let year=date.getFullYear(); //年 let month=date.getMonth()+1; //月，月份从0开始 let day=date.getDate(); //日
//2 定义普通字符串和目标字符串并打印 let str1=year+"年"+(month+1)+"月"+day+"日"; let str2=`${year}年${month+1}月${day}日` console.log(str1); console.log(str2);

4.2.3String的属性和常用方法

1个属性4个方法

length属性(长度)

charAt()函数获取指定位置字符

indexOf()检索字符并返回字符位置

trim()去除字符串两侧空白

subString(start,end)输出指定索引之间的子字符串

4.3自定义对象

4.3.1自定义对象格式

let 对象名 = {
            属性名1: 属性值1,
            属性名2: 属性值2,
            属性名3: 属性值3,
            函数名称: function(形参列表){},
            函数名称 (形参列表){}
        };

4.3.2调用属性和函数

调用格式：
对象名.属性名;
对象名.方法(参数值...);

4.3.3特点

如果调用没有这个属性,则会动态添加该属性并赋值

console.log(person.address="北京");

4.4JSON对象

4.4.1什么是JSON?

JSON是对象标记法,语法简单结构层次鲜明,常用于数据载体,用于网络数据传输.

4.4.2JSON对象定义格式

let js={ "name":"cs", "age":18, "gender":'男', "date":{Date}, "arr":[1,2,3] }

JSON对象定义类似于key:值得行式

key要用双引号包裹

4.4.3利用JSON标记实现字符串和对象属性之间的转换

JSON.stringify() js对象属性转字符串

let src =JSON.stringify(js); console.log(src);

JSON.parse(字符串)字符串转换成js对象属性

let json=JSON.parse(src);

4.4BOM对象

4.4.1什么是BOM

BOM是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。

4.4.2BOM对象

window浏览器窗口对象
Navigator浏览器对象
Screen屏幕对象
History历史记录对象
location 地址栏对象

4.4.3window属性和常用方法

属性:

history获取History对象
location获取Location对象
Navigator获取Navigator对象

方法:

alert()弹窗

confirm对话框确认返回true,取消返回false

setInterval(fun,毫秒值)定时器,以指定毫秒值为周期调用函数

let add= function(a,b) { return alert(a+b); } setInterval(add(1,2),2000);

setTimeout(fun,毫秒值)定时器,在指定毫秒值后调用函数(只能匿名函数和箭头函数形式)

setInterval(function() { return alert(谢谢) }

,2000);

4.4.4Location常用方法

local.herf="url"实现页面跳转

4.5DOM对象

4.5.1什么是DOM?

文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

4.5.2常见对象

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

4.5.3获取DOM对象

document.getElementById()根据id属性值获取，返回单个Element对象

document.getElementsByTagName()根据标签名称获取，返回Element对象数组

document.getElementsByName()根据name属性值获取，返回Element对象数组

document.getElementsByClassName()根据class属性值获取，返回Element对象数组

document.querySelector("css选择器")根据css选择器获取一个Element对象

document.querySelectorAll("css选择器")根据css选择器获取一个Element对象数组

4.6事件绑定

4.6.1事件绑定的方式

通过HTML种的事件属性进行绑定

1.在标签上添加事件属性,属性值是要执行的函数

2.定义绑定的函数

<input type="button" id="btn1" value="事件绑定1" onclick="on()"> function on(){ alert("按钮1被点击了...") }

通过DOM属性进行绑定

1.获得元素对象给其绑定匿名函数

2.定义匿名函数

<input type="button" id="btn2" value="事件绑定2" > document.querySelector("#btn2").onclick=function () { console.log("按钮二被点击了"); }

标签：console,入门,对象,函数,JavaScript,let,属性,快速,log
From： https://www.cnblogs.com/zlsame/p/17267039.html

JavaScript快速入门