初识JavaScript

概述

JavaScript是一门世界上最流行的脚本语言

ECMAScript它可以理解为是javaScript的一个标准

而且现在最新的版本已经到es6版本

但是大部分浏览器还是只停留在支持es5代码上

快速入门

引入JavaScript

1、内部引入

<script>

      //需要写的js代码

<script>

2、外部引入

abs.js

//js代码

test.html

<script src="abs.js"><script>

测试代码

<html>

<head>

      <meta charset="UTF-8">

      <title>Title</title>

</head>

<body>

<!--内部引入-->

<script></script>

<!--外部引入-->

<script scr="js/xxx.js"></script>

</body>

</html>

基本语法入门

<!--JavaScript严格区分大小写-->

<script>

//1.定义变量      变量类型      变量名 = 变量值；

var  score = 88;

//alert(score);

//2.条件控制

if(score>60&&score<70){

      alert("60-70")

}else if(score>70&&score<80){

      alert("70-80");

}else{

      alert("other");

}

//console.log(score) 在浏览器的控制台打印变量！        System.out.println();

</script>

数据类型

数值，文本，图形，音频，视频...

变量

var 英雄联盟 = "最强王者"

number

js不区分小数和整数，Number

123      //整数123

123.1      //浮点数123.1

1.23e3      //科学计数法

-99      //复数

NaN      //not a number

Infinity      //表示无限大

字符串

"str"'str'

布尔值

true,false

逻辑运算

&&      //两个都为真，结果为真

||      //一个为真，结果为真

!      //真即假，假即真

比较运算符

=      //赋值

==      //等于(类型不一样，值一样，也会判断为true)

===      //绝对等于(类型一样，值一样，结果为true)

这是js的缺陷，坚持不要使用 == 比较

须知：

NaN===NaN ，这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.00000001

null和undefined

null 空
undefined 未定义

数组

java的数值必须是相同类型的对象，JS中不需要这样！

//保证代码的可读性，尽量使用[]

var arr = [1,2,3,4,'hello',null,true];

new Array(1,2,3,4,'hello');

取数组下标了，如果越界了，就会

undefined

对象

对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个不需要添加

//Person person = new  Person(1,2,3,4,5);

var person = {

      name:"zhangsan",

      age:15,

      tags:['js','java','html','...']

}

取对象的值

person.name

"zhangsan"

person.age

15

严格检查模式

<!--

前提：IDEA需要设置支持ES6语法

'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题

必须写在JavaScript的第一行！

局部变量建议都使用let 去定义！

-->

<script>

      'use strict'

      //全局变量

      let i = 1 ;

      //Es6  let

</script>

数据类型

字符串

1、正常字符串我们使用单引号，或者双引号包裹

2、注意转义字符****

\'

\n

\t

\u4e2d      \u####   Unicode字符

\x41      Ascll字符

3、多行字符串编写

var msg =

      'hello

world

你好ya

你好'

4、模板字符串

let name= "zhangsan";

let age = 15;

let msg = '你好呀，${name}'

5、字符串长度

str.length

6、字符串的可变性，不可变

console.log(stu[0])

//s

stu[0]=1

//1

console.log(stu)

//stu

7、大小写转换

//注意，这里是方法，不是属性

stu.toUpperCase()

stu.toLowerCase()

8、stu.indexOf("t");

9、substring

[)

stu.substring(1)      //从第一个字符串截取到最后一个字符串

stu.substring(1,3)      //[1,3)包含第一个但不包含第三个

数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6]

arr[0]

arr[0] = 1

1、长度

arr.length

注意：加入给arr.length赋值,数组大小就会发生变化，如果赋值过小，元素就会丢失

2、indexOf，通过元素获得下标索引

arr.indexOf(2)

1

字符串的“1”和数字1是不同的

3、slice（）截取Array的一部分，返回一个新数组，类似于String中的substring

4、push（）,pop（）尾部

push:压入到尾部

pop:弹出尾部的一个元素

5、unshift(),shift()头部

unshift:压入到头部

shift：弹出头部的一个元素

6、排序sort()

(3)['b','c','a']

arr.sort()

(3)['a','b','c']

7、元素反转reverse()

(3)['c','b','a']

arr.reverse()

(3)['a','b','c']

8、concat()

(3)['c','b','a']

arr.concat([1,2,3])

(6)['c','b','a',1,2,3]

arr

(3)['c','b','a']

注意：concat()并没有修改数组，只是会返回一个新的数组

9、连接符join

打印拼接数组，使用特定的字符串链接

(3)['c','b','a']

arr.join('-')

"c-b-a"

10、多维数组

arr = [[1,2][3,4]['5','6']];

arr[1][1]

//4

数组：存储数据(如何存，如何取，方法都可以自己实现！)

对象

若干个键值对

var 对象名 = {

      属性名： 属性值，

      属性名： 属性值，

      属性名： 属性值

}

//定义了一个person对象，它有四个属性

var person = {

      name: "zhangsan",

      age: 15,

      email:"123456798@qq.com",

      score:100

}

js对象中，{....}表示一个对象，键值对描述属性xxxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

JavaScript中的所有键都是字符串，值是任意对象！

1、对象赋值

person.name = "limeng"

//"limeng"

person.name

//"limeng"

2、使用一个不存在的对象属性，不会报错！undefined

person.heihei

//undefined

3、动态的删减属性，通过delete删除对象的属性

delete person.name

true

//person

4、动态的添加，直接给新的属性添加值即可

person.hh = "haha"

//"haha"

person

5、判断属性值是否在这个对象中！ xxxinxxx!

'age' in person

//true

//继承关系

'tostring' in person

true

6、判断一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty('tostring')

//false

person.hasOwnProperty('age')

//true

流程控制

if判断

var age = 3;

if(age>3){

      alert("haha");

}else{

      alert("heihei");

}

while循环，避免程序死循环

while(age<100){

      age=age+1;

      console.log(age)

}

do{

      age=age+1;

      console.log(age)

}while(age<100)

for循环

for(var i =0;i<100;i++){

      console.log(i);

}

forEach循环

5.1引入

var age =[123,2,32,42,32,14,141,5,22];

//函数

age.forEach(function(value)){

      console.log(value)

}）

for..in

//for(var index in object){}

for(var num in age){

      if(age.hasOwnProperty(num)){

            console.log("存在")

            console.log(age[num])

      }

}

Map和Set

ES6新特性

Map：

var map = new Map([['Tom',100],['jack',90],['rose',88]]);

var name = map.get('Tom');      //通过key获得value

map.set('admin',99);      //新增或修改

map.delete('Tom');      //删除

Set：无序不重复的集合

set.add(2);      //添加

set.delete(1);      //删除

console.log(set.has(3));      //是否包含这个元素

iterator

遍历数组

//可以通过for of / for in 下标

var arr = [1,2,3]

for(var x of arr){

      console.log(x)

}

遍历map

var map = new Map([['jack',100],['tom',80],['lucy',85]]);

for(let x of map){

      console.log(x)

}

遍历set

var set = new Set([2,3,4]);

for(let x of set){

      console.log(x)

}

函数

定义函数

定义方式一

绝对值函数

function abs(x){

      if(x>=0){

            return x;

      }else{

            return -x;

      }

}

一旦执行return代表函数结束，返回结果。

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs = function(x){

      if(x>=0){

            return x;

      }else{

            return -x;

      }

}

function(x){....}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数

方式一和方式二等价！

调用函数

abs(10)      //10

abs(-10)      //10

参数问题：javaScript可以传任意个参数，也可以不传参数

参数进来是否存在问题？

假设不存在参数，如何规避？

var sbs = function(x){

      //手动抛出异常来判断

      if(typeof x!== 'number'){

            throw 'Not a Number';

      }

      if(x>=0){

            return x;

      }eles{

            return -x;

      }

}

argumens

argumens是一个js免费赠送的关键字；

代表，传进来的所有参数，是一个数组~

var abs = function(x){

      console.log("x>=" + x);

      for(var i = 0; i<arguments.length;i++){

            console.log(arguments[i])

      }

      if(x>=0){

            return x;

      }eles{

            return -x;

      }

}

问题：argguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数

rest

以前：

if(arguments.length>2){

      for(var i =2 ; i<arguments.length;i++){

            //....

      }

}

ES6引入新特性，获取除了已经定义的参数之外的所有参数..

      funtion x(a,b,...rest){

            console.log("a=>"+ a);

            console.log("a=>"+ a);

            console.log(rest);

}

rest参数只能写在最后面，必须用...标识。

变量的作用域

在JavaScript中，var定义变量实际是有作用域的

假设在函数体中声明，则在函数体外不可以使用（如果想实现的话，后面可以研究闭包）

function run(){

      var x =1;

      x =x + 1;

}

x = x + 2;      //Uncaught ReferenceError : x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function run(){

      var x =1;

      x =x + 1;

}

function run2(){

      var x = "ss";

      x =x + 1;

}

注意：内部函数可以访问外部函数的成员，反之则不行（可参考java内部类）

假设内部函数变量和外部函数的变量重名的情况下

在JavaScript中，函数查找变量从自身开始，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

需要养成规范，所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

function run(){

      var x = 1,

          y = x + 1,

            z,i,b;      //undefined

      //之后随时用

}

全局函数

//全局变量

x = 1;

function run(){

      console.log(x);

}

run();

console.log(x);

全局对象window

var x = 'xxx'

alert(x);

alert(window.x);      //默认所有的全局变量，都会自动绑定在window对象下；

alert()这个函数本身也是一个window变量。

JavaScript实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用

范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突--->如果能够减少冲突？

//唯一全局变量

var ChenApppp = {};

//定义全局变量

ChenApp.name = "zhangsan";

ChenApp.add = function(a,b){

      return a + b ;

}

可以吧自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。

局部作用域let

ES6 let关键字，解决局部作用域冲突问题！

function run(){

      for(let  i = 0;i<100;i++){

            console.log(i)

      }

      console.log(i+1)      //Uncaught ReferenceError : i  is not  defined

}

常量const

在ES6引入了常量关键字const

const PI = '3.14';      //只读变量

console.log(PI);

PI = '123';

方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var zhangsan = {

      name :"张三"，

      birth:1999,

      //方法

      age：function（）{

      //今年-出生的年

      var now = new Date().getFullyear();

      return now - this.birth;

      }

}

//属性

zhangsan.name

//方法，一定得带()

zhangsan.age()

this是无法指向的，是默认指向调用它的那个对象；

apply

在js中可以控制this指向！

function gatAge(){

      var now = new Date().getFullyear();

      return now - this.birth;

}

var = zhangsan = {

      name :"张三",

      bitrh:1999,

      age : getAge

};

getAge.apply(zhangsan.[]); this. 指向了 zhangsan. 参数为空

内部对象

Date

基本使用

var now =  new Date();      //星期  月  几号  多少年   时间  GMT+0800(中国标准时间)

      now.getFullyear();      //年

      now.getMouth();      //月

      now.getDate();      //日

      now.getDay();      //星期几

      now.getHours();      //时

      now.getMinutes();      //分

      now.getSecounds();      //秒

      now.getTime();      //时间戳 全世界统一 1970 1. 1 0:00:00 毫秒数

      console.log()new Date(1578106175991);      //时间戳转为时间

JSON

json 是什么

早期，所有数据传输习惯使用XML文件

-JSON（JavaScript Object Notation,JS对象简谱）是一种轻量级的数据交换格式。

-简洁和清晰的层次结构使得JSON成为理想的数据交换语言。

-易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在Javascript一切皆为对象，任何js支持的类型都可以使用JSON来表示；

格式：

-对象都用（）

-数组都用 []

-所有键值对都是用key ： value

var user = {

      name : "zhangsan",

      age : 15,

      gender:"男"

}

//对象转化为json字符串{"name":"zhangsan","age":"15","gender":"男"}

var jsonUser = JSON.stringify(user);

//json 字符串转化为对象 参数为json字符串

var obj = JSON.parse('{"name":"zhangsan","age":"15","gender":"男"}')

很多人搞不清JSON和js对象的区别

var obj ={a:'hello',b:'hellob'};

var json = '{"a":"hello","b":"hellob"}';

面向对象编程

什么是面向对象

javascript、Java、c#... 面向对象：JavaScript有区别！

类：模板

对象：具体的实例

class继承

class关键字，实在ES6引入的

1、定义了一个类，属性，方法

//定义一个学生的类

class Student{

      constructor(name){

          this.name = name;

      }

      hello(){

            alert("nihao!")

      }

}

var xiaoming = new Student("xiaoming");

var xiaopeng = new Student("xiaopeng");

xiaoming.hello();

2、继承

<script>

class Student{

      constructor(name){

          this.name = name;

      }

      hello(){

            alert("nihao!")

      }

}

class XiaoStudent extends Student(){

      constructor(name,grade){

            super(name);

            this.grade = grade;

      }

      myGrade(){

            alert("我是小学生");

      }

}

var xiaoming = new Student("xiaoming");

var xiaopeng = new Student("xiaopeng");

xiaoming.hello();

</scrpit>

本质：原型链点我查看

JavaScript，你好！的更多相关文章

Javascript—①你好，世界！
新手Perfect教程之Javascript教程①-你好,世界! 前言:不知道Javascript是什么东东的自行度娘或google一下 Javascript在html<head>和< ...
JavaScript 你好！
JavaScript简介开发时间:1995年开发目的:一开始的目的是处理以前由服务器端语言(如perl)负责的一些输入验证操作. 现状:现在的用途不再局限于简单的数据验证,而是具备了与浏览器窗口及 ...
javascript之url转义escape()、encodeURI()和decodeURI()
我们可以知道:escape()除了 ASCII 字母.数字和特定的符号外,对传进来的字符串全部进行转义编码,因此如果想对URL编码,最好不要使用此方法.而encodeURI() 用于编码整个URI,因 ...
javascript之url转义escape()、encodeURI()和decodeURI()，ifram父子传参参数有中文时出现乱码
ifram父子传参参数有中文时出现乱码,可先在父级页面用encodeURI转义,在到子页面用进行decodeURI()解码我们可以知道:escape()除了 ASCII 字母.数字和特定的符号外,对 ...
jQuery 之正则表达式篇
从本文开始,我将陆续的更新关于jQuery源代码的博客.首先,jQuery源代码分析一直是我的一个计划和追求.查看jQuery源代码,探索大牛们深邃的思想,精神的碰撞.Google 搜索不难发现,探索 ...
【转】encodeURI和decodeURI方法
为什么要两次调用encodeURI来解决乱码问题 https://blog.csdn.net/howlaa/article/details/12834595 请注意 encodeURIComponen ...
别了，JavaScript；你好，Blazor
Web开发与JavaScript开发向来是同义词.直到WebAssembly的横空出世,WebAssembly (Wasm)是一种在浏览器中可以执行的二进制指令. WebAssembly 的官方工具 ...
JavaScript，你好！(二)
操作BOM对象浏览器介绍 JavaScript和浏览器的关系? JavaScrpit诞生就是为了能够让它在浏览器中运行! BOM:浏览器对象模型 IE 6~11 Chrome Safari Fire ...
Javascript学习笔记
Javascript 2016年12月19日整理 JS基础 Chapter1 JS是一门运行在浏览器客户端的脚本编程语言,前台语言组成部分 1. ECMAscript JS标准 2. DOM 通过J ...

随机推荐

python编程中的并发------多线程threading模块
任务例子:喝水.吃饭动作需要耗时1S 单任务:(耗时20s) for i in range(10): print('a正在喝水') time.sleep(1) print('a正在吃饭') time. ...
温故知新——Spring AOP（二）
上一篇我们介绍Spring AOP的注解的配置,也叫做Java Config.今天我们看看比较传统的xml的方式如何配置AOP.整体的场景我们还是用原来的,"我穿上跑鞋",&quo ...
Java面试题（MySQL篇）
MySql 164.数据库的三范式是什么? 第一范式:强调的是列的原子性,即数据库表的每一列都是不可分割的原子数据项. 第二范式:要求实体的属性完全依赖于主关键字.所谓完全依赖是指不能存在仅依赖主关键 ...
[NOI2020]美食家题解
题意分析给出一个带权有向图,要求从节点 $1$ 出发,经过恰好 $T$ 的边权和,回到节点 $1$ ,求可经过的最大点权和.特别地,经过的边权和达到部分特殊数时,会有某个点的点权发生改变. 思路分析 ...
Java通过反射加载的类，变量无法注入
//之前都是直接newInstance的到obj,类中的变量无法被注入//Object obj = aClass.newInstance(); //改成如下方式的到bean,变量就能顺利被注入 ,其他 ...
如何利用微博客进行seo赚钱营销
http://www.wocaoseo.com/thread-130-1-1.html 我们知道做SEO就是用人的思维来模仿搜索引擎的习惯,尽量适应seo的规则,并按照搜索引擎的规则和习惯 ...
Vue基础（五）---- 前端路由
基本结构: ◆ 1.路由的基本概念与原理 ◆ 2.vue-router的基本使用 ◆ 3.vue-router嵌套路由 ◆ 4.vue-router动态路由匹配 ◆ 5.vue-router命名路由 ...
ZooKeeper的十二连问，你顶得了嘛？
前言一线大厂ZooKeeper的十二连问,你顶得了嘛? 本文已经收录到github ❝ https://github.com/whx123/JavaHome ❞ 1. 面试官:工作中使用过Zooke ...
Java拷贝——深拷贝与浅拷贝
深拷贝和浅拷贝值类型 vs 引用类型在Java中,像数组.类Class.枚举Enum.Integer包装类等等,就是典型的引用类型,所以操作时一般来说采用的也是引用传递的方式: 但是Java的语言 ...
Webpack 入门指迷
大概算是一份教程吧, 只不过效果肯定不如视频演示之类的好..Webpack 最近在英文社区上经常看到, 留了心, 但进一步了解是通过下边的视频:视频: How Instagram.com Works, ...

JavaScript，你好！

初识JavaScript

概述

快速入门

引入JavaScript

基本语法入门

数据类型

严格检查模式

数据类型

字符串

数组

对象

流程控制

Map和Set

iterator

函数

定义函数

变量的作用域

方法

内部对象

Date

JSON

面向对象编程

什么是面向对象

JavaScript，你好！的更多相关文章

随机推荐

热门专题