您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript基础语法

时间:2020-01-16 11:00:02  来源:  作者:

 

JavaScript基础语法

 

 

一、JAVAScript的诞生

JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言 名字起源: Mocha->LiveScript->JavaScript

二、js用途

它的主要目的是,验证发往服务器端的数据、增加 Web互动、加强用户体验度等。可用于开发网站、游戏、移动端App

三、js语言的组成

javascript = ECMAScript + BOM + DOM

  1. 核心(ECMAScript)
  2. 浏览器对象模型(BOM)
  3. 文档对象模型(DOM)
1、关键字

breakdoinstanceoftypeofcaseelsenewvarcatchfinallyreturnvoidcontinueforswitchwhiledebuggerfunctionthiswithdefaultifthrowdeleteintry

2、保留字

classenumextendssuperconstexportimport

3、术语
  • 返回值:运算后得到的值
  • 程序的三大流程控制我们的计算机在执行一个程序的时候,最基本的方式是一条语句接一条语句的执行。但不可能所有的问题都能用顺序执行方式就能解决,总会有一些跳转。采用结构化的程序设计,可以大大提高开发程序的速度、提高程序的可读性、程序运行的速度和效率顺序:从上朝下执行的代码就是顺序分支(选择):根据不同的情况,执行对应代码循环:重复做一件事情

javascript = ECMAScript + BOM + DOM

  1. 核心(ECMAScript)
  2. 浏览器对象模型(BOM)
  3. 文档对象模型(DOM)

四、js代码的编写位置

  • html属性 <a href="javascript:alert(100)"></a>
  • script标签<script type="text/javascript">
    alert('你好')
    </script>
  • js文件 独立的js文件需要引入页面才能执行 <script type="text/javascript" src="js/common.js"><script> script标签属性type:类型src :js文件路径 带src属性的script标签内不能写js代码

五、JS变量的定义

  • 变量定义(使用var关键字):变量是存储数据的容器 var age; //var 是关键字,age是变量名var obj = / /; 是JavaScript中正则对象的写法
  • 赋值: age = 20;
  • 定义的同时赋值: var age=20;
  • 可以一次定义多个变量: var name="zhangsan", age=18, weight=108;
1、数组Array

一系列数据的集合,每一项可以保存任何类型的数据,称为数组的元素,每个元素之间用逗号隔开

数组格式:[1,2,3]

2、数组创建方式
//1)字面量(推荐)var arr = [1,2,3];​//2)使用构造函数创建var arr = new Array();//创建一个空数组var arr = new Array('王大锤',18 ,'普通青年','广州');//创建数组并同时写入数据
3、数组访问与写入
  • 索引(下标):从0开始var arr = ['html5','css3','javascript'];

    //访问
    arr[0]; //=> 'html5'
    arr[2]; //=> 'javascript'

    //写入
    arr[3] = 'web前端';
  • length:表示数组的长度 arr.length; //=> 3
4、数组遍历
  • for循环格式:for(变量初始化;判断条件;变量更新){执行语句}var arr = ['html5','css3','javascript'];
    for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
    }
5、数组方法
  • push: 往数组尾部添加一个或多个元素,返回数组新的长度
  • pop:删除数组最后一个元素,返回删除的元素
  • unshift:往数组开头添加一个或多个元素,返回数组新的长度
  • shift:删除数组第一个元素,返回删除的元素
  • splice(start,deleteNum,…items):在数组中插入、删除、替换的通用方法start:起始索引位置deleteNum:要删除的数量items:插入的元素(可以是多个)
  • slice(start[,end]):返回数组的片段或子数组,从start开始到end(不包括end所对应的元素)如果省略end参数,则截取到数组的最后一项 支持负数
  • sort:将数组中的元素排序,并返回排序后的数组默认以字符串的排列方式(转换成ASCII码进行对比)
  • reverse:将数组中的元素颠倒顺序,返回逆序后的数组
  • join(separator) 返回字符串值,其中包含了连接到一起的数组的所有元素separator为分隔符,默认为逗号
  • indexOf(keyword)方法返回keyword所在数组中的索引值,如果数组不存在keyword,则返回-1
  • forEach(fn) 遍历方法,for循环没有太大差别,比for循环方便
  • map(fn)返回一个数量相等的数组,内容是什么取决于在fn中返回的值以上方法都对数组中的每一项运行给定函数fn,,函数中有三个形参分别为item:数组中的每一项,index:遍历过程中对应的索引值,array:对数组的引用

 

6、对象Object
  • 字面量(推荐):var obj = {name:'小明',age:18}
  • 构造函数:var obj = new Object();
7、读取属性值

obj.name;//==>小明

如果读取一个不存在的属性,返回undefined

8、添加属性
   obj.sex = '男';   obj.marry = false;   obj['weight'] = 60
9、删除属性
   var obj = {name:'laoxie',age:18,gender:'man'}​   //删除age属性   delete obj.age;
10、遍历对象for…in
  var obj = {    name:'laoxie',    age:18    gender:'男'   }​  //遍历对象  for(var attr in obj){    //遍历过程把每次把对象属性赋值给attr    //所以获取对象属性值为:obj[attr]    document.write(obj[attr]);//分别输出:'laoxie',18,'男'   }
11、数组与对象的组合
    [{        id:'001',        name:'iphone7 plugs',        imgurl:'img/ip7.jpg',        price:5899.00,        sale:5888.00,        color:'土豪金'    },{        id:'002',        name:'Note7',        imgurl:'img/note7.jpg',        price:3899.00,        sale:998.00,        color:'黑色'    },{        id:'003',        name:'荣耀7',        imgurl:'img/honor7.jpg',        price:1999.00,        sale:1899.00,        color:'白色'    }]

 

六、输出

  • alert() 弹窗输出
  • console.log() 输出到控制台
  • innerHTML 输出到双标签元素内容
  • value 输出到表单元素

七、JS代码规范:

  • JS变量的命名规范变量名必须是数字,字母,下划线_和美元符$组成;第一个字符不能为数字不能使用关键字或保留字
  • 代码可读性标识符区分大小写,如:age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。变量命名尽量遵守驼峰原则: myStudentScore变量命名尽量见名知意保持代码缩进JS语句的末尾尽量写上分号;运算符两边都留一个空格, 如 var n = 1 + 2;注释单行注释://注释内容多行注释(和CSS注释一样)/*注释内容*/多行注释不能嵌套

八、JS数据类型

  • 基本数据类型Number:数字NaN:是一个特殊的值,即非数值(Not a Number)。数学运算无法得到数字时,就会返回NaN不代表任何值,也不等于任何值,甚至自己都不等于自己任何数据与它运算都返回NaNisNaN(a):用来判断a到底是不是非数字,返回布尔值String:字符串 用引号(单/双引号)括起来的内容Boolean: 布尔类型 Boolean 类型有两个值:true和false
  • 引用数据类型Array:数组Object:对象
  • 特殊数据类型Null Null 类型是一个只有一个值的数据类型,即特殊的值 null。它表示一个空对象引用(指针)Undefined Undefined类型只有一个值,即特殊的 undefined,在使用 var 声明变量,但没有对其赋值,这个变量的值就是 undefined
  • 数据类型判断typeoftypeof 'html5'; //=>string typeof 100; //=>number typeof true //=>boolean typeof null //=>object
  • 数据类型转换基本数据类型转换:利用内置函数进行转换(主动) var str = '10';//string Number(str);//10,number Boolean(str);//true 隐式转换(被动)如果运算不能进行下去,内部就会尝试进行数据类型的转换支持隐式转换的运算:逻辑运算、关系运算、算术运算

九、运算

1、算术运算:

+, -, *, /, %:加,减,乘,除,取余(取模)

  • toFixed(num): 在数字后面调用,num为小数位,有四舍五入的功能,得到一个字符串
  • parseInt():取整:获取到第一个不为数字的字符为止
  • parseFloat():取小数

+ 的特殊用法:字符串拼接

+号两侧只要有一个是字符串则为字符串拼接

2、赋值操作:

  • = var num1=10;//表示把10赋值给num1变量
  • +=:在原来的内容基础上追加内容 str += 'test' <==> str = str + 'test'
  • -=: var n=10; n -= 2 <==> n = n - 2
  • *=,/=,%=

3、关系运算(返回布尔值)

  • ==(等于), !=(不等于)
  • <(小于)、>(大于)、<=(小于等于)、>=(大于等于)
  • ===、恒等于/全等于,比较的时候要求值和类型都相等(不会进行类型隐式转换)
  • !==、不全等于
  • 关系运算符的比较规则: 1. 数字和数字比较, 直接比较大小 2. 数字和字符串比较, 字符串转换为数字后再比较 3. 字符串和字符串比较, 进行字符的ASCII码值比较

 

4、逻辑运算(返回布尔值)

  • &&: 逻辑与&&比||优先级高
  • ||:逻辑或
  • !: 逻辑非!true //=> false !false //=> true

5、一元运算

  • ++: 自增1(在原来的数值基础上加1)
  • –:自减1(在原来的数值基础上加1)
  • 前置:var num = 10; ++num;--num; 返回值:返回值是减1(加1)之后的值
  • 后置:var num = 10; num++;num-- 返回值:返回值是没减1(加1)之前的值

十、条件判断语句

if语句

  • if单分支:if(条件){ //条件成立(返回true)时,执行这里的代码,否则不执行 }
  • if双分支: 当if括号内的表达式结果成立,执行执行语句1,否则执行执行语句2 if(条件){ 语句1 //条件成立(返回true)时,执行这里的代码,忽略以下代码 }else{ 语句2 //条件不成立(返回false)时,执行这里的代码 }
  • if多分支: 从上往下,满足哪个条件就执行其相对应的语句,都不满足时,执行最后的else的语句,只能进入其中之一if(条件1){ //条件1成立(返回true)时,执行这里的代码,忽略以下代码 }else if(条件2){ //条件2成立(返回true)时,执行这里的代码,忽略以下代码 }else{ //以上条件都不成立(都返回false)时,执行这里的代码 }

1、三元运算

格式:条件 ? 条件成立代码 : 条件不成立代码

var a=20;var b = 50;var sum = a>b ? a-b : a+b;

2、switch语句

switch(值) {    case value1: //要求value1与值恒等        //如果表达式的值恒等于value1,代码从这里开始执行        break;    case value2:        //如果表达式的值恒等于value2,代码从这里开始执行        break;    case value3:         //如果表达式的值恒等于value3,代码从这里开始执行        break;    case value4:         //如果表达式的值恒等于value4,代码从这里开始执行        break;    default:         如果以上条件都不成立,默认执行这里的代码}
  • switch语句在比较值时使用的是全等操作符,因此不会发生类型转换
  • case: 当符合条件时,会从符合条件的那一条case语句开始,依次顺序向下执行
  • break: 跳出switch语句
  • default: 当所有的case都不满足的情况下会执行defalut下面的语句

十一、循环语句

  • 循环就是重复做一件事, 在JS中指的是循环执行某部分代码.
  • 循环结构是程序中一种很重要的结构,其特点是在给定条件成立时,反复执行某程序段,直到条件不成立为止

只要条件成立,就会不断地执行花括号里的语句 编写条件时,要避免出现死循环

1、while循环

//变量初始化while(条件){    //条件成立就会不断地执行这里的代码,直到条件不成立    //所以这里一般会伴随着条件的更新}

2、do…while

//变量初始化do {    //不管条件是否成立,先执行一次这里的代码,再进行条件判断,    如果条件依然成立,则再次执行这里的代码,依此类推    //所以这里一般会伴随着条件的更新} while(条件)

3、for循环

for(变量初始化; 条件判断; 变量更新){    //循环条件成立,则执行这里的代码}
  • 两个分号必须写

 

十二、函数

1、函数的定义

  • 关键字声明(声明式): 格式:function 函数名(){}function sum(){} 函数的声明会提前 ==> 解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问); 函数表达式(赋值式)var sum = function(){}

2、函数的执行

  1. 手动调用: sum();
  2. 事件驱动: 格式:元素.事件 = 函数名; buton.onclick = sum;事件发生都是一瞬间的

3、常见事件触发函数

  • onclick:点击事件
  • ondblclick:双击事件
  • onmouseover:鼠标移入事件
  • onmouseout:鼠标移开事件
  • onchange:内容改变事件(一般用于表单元素)
  • onkeyup:键盘按键弹起事件
  • onkeydown: 键盘按下时触发(会连续触发)

4、作用域

俗称“使用范围”,即能够使用某个变量的范围,分<全局作用域>和<局部作用域>

  • 全局变量与局部变量全局变量:在全局作用域下声明的变量,可以在任意地方中使用,作用范围比较大,我们称为全局变量局部变量:在函数内(局部作用域)声明的变量,只在函数中可以使用,作用范围较小,我们称之为局部变量
  • 变量的访问规则就近原则(如查找变量a):使用变量a时先从当前函数查找,如果当前函数有变量a则使用;如果当前函数无变量a,则往父级函数查找,如果找到则使用,并停止查找;如果在父级函数还是无法找到,则继续往上一层函数查找,以此类推,直到最顶层(全局作用域),如果还是没找到,则报not defined错误;作用域链:每个函数在定义时就形成了局部作用域,如果存在多个函数嵌套,他们之间就会建立起某种联系,直到全局作用域,这种联系称之为作用域链。当函数访问变量时,根据就近原则在这个作用域链中从内到外查询变量【声明提前:提前到当前作用域最顶部】。比如: var name = 'liang'; function show(){ console.log(name); var name = 'xiao'; } 由于js的声明提前,name会提前到函数show内的最顶部, 执行语句console.log(name)时会输入undefined。

5、函数的参数

  • 形参,就是局部变量
  • 形参与实参的区别:形参:声明函数时圆括号内定义的变量实参:函数执行时传入的参数形参和实参的数量可以不同
  • arguments 函数内部隐藏的对象(是一个类数组),保存着实参的信息length: 实参的数量
  • 引用数据类型与基本数据类型的传参(引用传递与值传递)函数作为参数传递

6、函数返回值

  1. 终止函数的执行,return后的代码不会执行
  2. return后如果有值,则把这个值返回到函数执行的地方如果函数没有return,执行完后返回undefined

7、函数中的this

函数中的this是一个关键字,表示当前对象,而当前对象是谁,取决于谁调用了这个函数。

十三、文档对象模型 DOW

节点操作 * 操作属性 * 设置css样式 * 操作内容

  • 绑定事件
  • 生成document.createElement()
  • 插入父级元素.appendChild(添加的元素) : 追加
  • 获取节点:document.getElementById();//nodegetElementsByClassName();//[node,node]getElementsByTagName();//[node,node]获取元素的捷径 * html: document.documentElement * body: document.body * a : document.links //[] * image: document.images //[]
<body><h1 class="title">节点操作</h1><div id="list"><a href="#">google</a><a href="#" id="baidu">Baidu</a><a href="#">Yahoo</a></div><a href="#">360</a><script>        var baidu = document.getElementById('baidu');        //node        console.log(baidu);        var title = document.getElementsByClassName('title');        //[node]        console.log(title);        var link = document.getElementsByTagName('a');        console.log(link);        var list = document.getElementById('list');        var list_link = list.getElementsByTagName('a');        console.log(list_link);        // 生节成点        var h2 = document.createElement('h2');        h2.id = 'subTitle';        h2.innerHTML = '人工智能';        // 获取body     // var body = document.getElementsByTagName('body')[0];     //[body]        var body = document.body;        body.appendChild(h2)</script></body>

 

十四、浏览器对象模型 BOM

  • window 可省略不建议省略window的场景事件属性事件onload 页面所有元素(包括DOM,图片等资源文件)加载完成后执行函数(方法)alert() 弹出框parseInt() 字符转为整型parseFloat() 字符转为浮点型Number() String()Boolean()浏览器可视区域的宽高:window.innerWidthwindow.innerHeight自动:设置定时器:var timer = setInterval(fn,duration)每个duration时间(ms),执行一次fn,返回一个定时器标识clearInterval(timer) :清除定时器 对象document<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02函数的执行</title> <style> #box{width:200px;height:100px;background-color: #f00;} </style> <script> window.onload = function(){ var box = document.getElementById('box');//节点(对象) //节点(对象) function show(){ console.log('laoxie'); } // 手动执行(主动) show(); // 事件驱动执行(被动) box.onclick = show; box.onmouseover = function(){ console.log('over'); } box.onmouseout = function(){ console.log('out') } // document.onkeyup = function(event) {console.log(event.keyCode,event.key) // // 事件对象:event // console.log('upupup') // } // document.onkeydown = function(event){ // // 事件对象:event // if(event.keyCode === 38){ // } // console.log('down') // } // 表单改变事件onchange username.onchange = function(){ console.log(666) } } </script> </head> <body> <div id="box"></div> <input type="text" id="username"> </body> </html>


Tags:JavaScript   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
本文最初发布于 hackernnon 网站,经原作者授权由 InfoQ 中文站翻译并分享。SOLID 原则是开发人员创建灵活、可理解和可维护代码的基础。但你要正确遵循这些原则就可能明显减...【详细内容】
2020-11-11   JavaScript  点击:(1)  评论:(0)  加入收藏
简介JavaScript 是一种动态类型语言,这意味着解释器在运行时确定变量的类型。实际上,这也允许我们在相同的代码中使用相同的变量来存储不同类型的数据。如果没有文档和一致性,...【详细内容】
2020-10-22   JavaScript  点击:(3)  评论:(0)  加入收藏
简介在本文中,我们将介绍如何用Node.js和Express来使用 Handlebars 模板引擎。还会介绍什么是模板引擎,以及如何使用把 Handlebars 建服务器端渲染(SSR) web应用程序。我们还...【详细内容】
2020-10-19   JavaScript  点击:(5)  评论:(0)  加入收藏
▶️四个参数 Accumulator (acc) (累计器) Current Value (cur) (当前值) Current Index (idx) (当前索引) Source Array (src) (源数组)reducer 函数的返回值分配给累计器,并...【详细内容】
2020-10-16   JavaScript  点击:(6)  评论:(0)  加入收藏
逻辑赋值是对现有数学和二进制逻辑运算符的扩展。我们先复习一下,然后看看把它们结合在一起能得到什么。首先,我们来看下 JS 中条件运算符与无条件运算符之间的区别 。无条件...【详细内容】
2020-10-15   JavaScript  点击:(3)  评论:(0)  加入收藏
一直以来都知道用JavaScript是一门单线程语言,在笔试过程中不断的遇到一些输出结果的问题,考量的是对异步编程掌握情况。一般被问到异步的时候脑子里第一反应就是 Ajax, setT...【详细内容】
2020-10-09   JavaScript  点击:(5)  评论:(0)  加入收藏
Day.js 是一个轻量的 JavaScript 时间日期处理库。与 Moment.js 的 API 设计保持一致,随着moment的包逐渐变大,官方已经决定未来停止维护相关moment.js库,并且官网也推荐使用da...【详细内容】
2020-10-09   JavaScript  点击:(15)  评论:(0)  加入收藏
JavaScript是最流行的编程语言之一。过去的20年中程序员们见证了它的爆发式增长。现在,JavaScript几乎可以执行任何操作,并且可以在包括物联网在内的多个平台和设备上运行。其...【详细内容】
2020-10-09   JavaScript  点击:(4)  评论:(0)  加入收藏
1Function.prototype 竟然是个函数类型。而自定义函数的原型却是对象类型。typeof Function.prototype === &#39;function&#39;; // truefunction People() {}typeof Peopl...【详细内容】
2020-09-24   JavaScript  点击:(9)  评论:(0)  加入收藏
在 JavaScript 中使用循环时,需要理解两个关键点:可枚举的属性和可迭代的对象。可枚举的属性可枚举对象的一个定义特征是,当通过赋值操作符向对象分配属性时,我们将内部 enumera...【详细内容】
2020-09-22   JavaScript  点击:(1)  评论:(0)  加入收藏
介绍datefns为浏览器中操作JavaScript日期提供了最全面、最简单、最一致的工具集,并且可以在node.js中使用!常见的类似的库还有moment.js和day.js! Githubhttps://github.co...【详细内容】
2020-09-18   JavaScript  点击:(8)  评论:(0)  加入收藏
一. 方法一(会改变数组顺序) 思路:将数组排序之后,数组中相同的元素只可能出现在相邻的位置上。注意:这里进行比较时,一定要用不全等符号!==,因为 "1" !== 1 为true, "1" != 1 为f...【详细内容】
2020-09-16   JavaScript  点击:(5)  评论:(0)  加入收藏
这篇文章算是 JavaScript Promises 比较全面的教程,该文介绍了必要的方法,例如 then,catch和finally。此外,还包括处理更复杂的情况,例如与Promise.all并行执行Promise,通过Promis...【详细内容】
2020-09-09   JavaScript  点击:(3)  评论:(0)  加入收藏
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全 。const string = &#39;hi&#39;;string...【详细内容】
2020-09-03   JavaScript  点击:(4)  评论:(0)  加入收藏
前言:在Javascript这门语言中有两个比较重要的方法。毫不夸张的说,前端小伙伴天天在用他们。熟悉Javascript这门语言的小伙伴肯定知道Javascript中两个非常重要的概念:原型和原...【详细内容】
2020-09-03   JavaScript  点击:(3)  评论:(0)  加入收藏
事件HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件...【详细内容】
2020-09-02   JavaScript  点击:(4)  评论:(0)  加入收藏
对于游戏开发,人们可能想到最多的就是那些3A大作,然而其实除了那些3A大作之外,还有很多其它的游戏也值得品玩。对于游戏开发,之前人们主要采用的是c++来进行开发,然而随着时代的...【详细内容】
2020-09-01   JavaScript  点击:(2)  评论:(0)  加入收藏
为了方便例子讲解,现有数组和字面量对象如下var demoArr = [&#39;Javascript&#39;, &#39;Gulp&#39;, &#39;CSS3&#39;, &#39;Grunt&#39;, &#39;jQuery&#39;, &#39;angular&#39...【详细内容】
2020-08-28   JavaScript  点击:(11)  评论:(0)  加入收藏
JavaScript是单线程的语言,也就是说同一时间只能进行一个任务,毕竟JavaScript可以操作dom,进行ui交互,删除dom和修改dom同时进行,那么应该听哪一个?。正是因为这样,决定了它是单线...【详细内容】
2020-08-27   JavaScript  点击:(8)  评论:(0)  加入收藏
作者:ConardLi转发链接:https://mp.weixin.qq.com/s/emJ_LjG7FNR81cxl8BnrMA前言分析你网页中的 JavaScript Bundles 大小,并限制网页中的 JavaScript 数量,可以减少浏览器花费...【详细内容】
2020-08-24   JavaScript  点击:(7)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条