1.js基础语法
1.JS概念
JavaScript是用于实现用户交互
、动态控制文档的外观和内容
,动态控制浏览器操作、创建cookies等网页行为的跨平台、跨浏览器的由浏览器解释执行的客户端脚本语言 js文档:https://zh.javascript.info/#tab-1
2.特点
-
是基于对象的弱类型语言
-
弱类型语言:是一种弱类型定义的语言,某一个变量被定义类型,该变量可以根据环境变量自动进行转换,不需要经过显性强制转换。弱类型语言包括vb,php,javascript等。
-
强类型语言:是一种强制类型定义的语言,一旦某一个变量被定义类型,如果不经过强制转换,则它永远就是该数据类型了,强类型语言包括java,net,c++等
-
-
跨平台
-
Linux,windows,mac只要有浏览器,就能够运行
-
-
事件驱动
-
鼠标点击,鼠标悬浮,鼠标移动,键盘按下,键盘弹起,获取焦点,失去焦点,加载等常用的事件
-
3.Java和JavaScript相同么?
二者完全没有关系,网景(Netscape)公司只是为了借着Java语言比较火的东风,将LiveScript语言更名成为了JavaScript语言。 Java是由Sun Microsystems公司开发的更强大也更复杂的高级程序设计语言,而Javascript是由浏览器解释执行的客户端脚本语言
4.JS的用途
-
表单客户端验证;
-
动态HTML(DHTML):不需要人为介入,就能自动实现动画效果。
-
用户交互的动画效果:需要鼠标和键盘介入的动画效果
-
动态添加一些网页内容
-
动态的获取和改变html元素的属性或css属性,从而动态的创建网页内容或改变内容的显示
5.JavaScript的运行开发环境
-
开发:用于编辑HTML文档的字符编辑器。
-
运行:Netscape Navigator 3.0 或 Internet Explorer 3.0及以上版本。
-
注意:JavaScript的程序是通过客户端浏览器来解析的,他的解析与Web服务器无关。
6.js的有点和局限
-
优点
-
1.使用JavaScript可以在客户端进行数据验证,节省服务器端的资源。 例:注册新浪通行证
-
2.可以方便地操纵各种页面中的对象,使网页更加友好。
-
3.使多种任务仅在客户端就可以完成而不需要网络和服务器的参与,从而支持分布式的运算和处理。
-
-
局限
-
1.兼容性。互联网上有很多浏览器,如FireFox,Internet Explorer、Opera等,但各种浏览器支持JavaScript的程度是不一样的,所以各个浏览器运行JavaScript的效果会有一定的差距,有时甚至会显示不出来。
-
2.JavaScript不能打开、读写和保存用户计算机上的文件。
-
7.JS的组成
-
ECMAScript 是Javascript的核心基础,JavaScript 的正式名称是 "ECMAScript"。这个标准由 ECMA 组织发展和维护 ECMA-262 是正式的 JavaScript 标准,提供语法、数据类型、语句、关键保留字、流程控制、内置对象、运算符等规范,定义了脚本语言的所有属性、方法和对象
-
DOM(Document Object Model) 动态管理HTML、XHTML、XML元素
-
BOM(Browser Object Model) 动态操作浏览器窗口和框架
8.引入方式
8.1 如何在HTML中引入Javascript
-
引入js文件
-
写在script标签内部(可以使用多个,每一个之间都是有联系的)
-
注意事项:
-
js代码必须放在结束的后面【原因:js会阻塞dom的解析;当js加载没有完成,页面是不会继续往下执行的】
-
在head中添加js代码,必须使用window.onload
-
不能在style中添加js代码
-
8.2 如何在HTML中使用Javascript
-
使用事件传入javascript代码
<div onclick="alert('hello world')"></div>
-
使用超链接传入javascript代码
<a href="javascript:alert('hello world');"></a>
9.输出语句
-
alert("这是我的输出页面"); 弹窗输出
-
document.write(“这是我输出的内容”); 在页面输出,可以输出标签
-
console.log() 在控制台中打印,打印任意字符或者js的变量信息; 可以接受任何字符串、变量、数字、对象;
10.JS语句与注释
-
javaScript中的语句以一个分号结尾,如果省略分号,则由解析器确定语句的结尾,一般情况下,换行会被当做一个语句的结尾
alert('hello world') ; document.write('hello world');
-
注释
//…… 单行注释
/…/ 多行注释
11.标识符
-
标识符的组成:标识符可以由字母、数字、下划线(_)和美元符号($)组成。这意味着标识符可以包含英文字母、数字、下划线和美元符号。
-
不能以数字开头:标识符的第一个字符必须是字母、下划线或美元符号,不能以数字开头。
-
大小写敏感:JavaScript是大小写敏感的,因此“MyVariable”和“myvariable”被视为两个不同的标识符。
-
保留字和关键字:标识符不能使用JavaScript的保留字(关键字),如
if
、for
、while
,true、false和null等。这些词被JavaScript语言内部使用,具有特定的用途,用户不能自定义同名的标识符。 -
描述性和驼峰命名法:标识符应具有描述性,能够清晰地表达其含义和用途(有意义)。命名通常采用驼峰命名法,即第一个单词小写,后续单词首字母大写,例如
myVariable
、calculateSum
等。 -
常量命名:常量通常使用全大写字母,并用下划线分隔单词,例如
MAX_VALUE
、PI
。
-
变量的声明和赋值
什么是变量?
解释:可以变化的量
-
变量是用于存储信息的容器【内存空间】 变量是一段命名的存储空间 变量是在程序运行过程中值允许改变变量的值 变量是由变量名,变量值,和变量类型组成
变量命名规则
-
第一个字符必须为字母,_或$,其后的字符还可以是数字 严格区分大小写,要有一定的含义 建议使用小驼峰规则来命名变量。redApple 不能使用关键词,保留字作为变量名
变量的命名和赋值
-
var 变量名
变量名=值
-
var 变量名=值
-
变量名=值
-
var 变量1=值1,变量2=值2,变量3=值3
注意:
-
变量名是浏览器关闭后才释放在,在没关闭之前随时使用
-
重新声明的变量,不会丢失原始值,除非重新赋值
-
换行是语句的结束,最好结束时都加上 “ ; ”
-
变量名是区分大小写的
JavaScript的数据类型
分为两种:原始类型(即基本数据类型)和对象类型(即引用数据类型);
js常用的基本数据类型包括
undefined - - (未定义)、null- - (空的)、number - - (数字)、boolean- - (布尔值)、string- - (字符串)
js的引用数据类型也就是
对象类型Object- - (对象),比如:array - - (数组)、function - - (函数)、data - - (时间)等;
JS为弱类型语言,不必声明数据类型,而是在使用或赋值的时候确定其类型 基本数据类型存放在栈中 引用数据类型存放在堆中【讲完类型后面详细说堆和栈】
强类型语言/弱类型语言
强类型语言【java】:
-
要求变量的使用要严格符合定义,所有变量都必须先定义后使用。
-
一旦一个变量被指定了某个数据类型,如果不经过强制转换,那么它就永远是这个数据类型了
弱类型语言【js/python/php】:
-
它与强类型定义语言相反, 一个变量可以赋不同数据类型的值
对象类型
-
本地对象:string,Array,Date,Math,Golbal,独立于宿主环境的ECMAScript实现提供的对象
-
宿主对象:DOM,BOM。ECMAScript中的‘宿主’就是我们网页的运行环境,即‘操作系统’和‘浏览器’
判断数据类型
可以通过typeof运算符来判断数据类型
-
String类型【重要】
js中用来表述文本的数据类型
-
字符串用单引号或双引号包括起来
-
单双引号均不能解析变量
-
变量与字符串,变量与变量之间可以使用运算符‘+’来链接
-
单引号和双引号可以互相嵌套,如果单引号中要嵌套单引号,需要使用转义字符
转义字符
注意:
-
\n换行(在alert中生效)
-
8进制表示法【进行两次转换,这里面的数字是ASCII中表示的八进制数字】
-
16进制表示法
-
16进制unicode表示法
console.log('\062') //八进制50 对应的值:2
-
Number
按照进制划分:二进制、八进制、十进制、十六进制 按照其他划分:整形、浮点型、NaN(not a number) js中所有的数字是以IEEE-75标准格式表示的,浮点数的精确问题不是js特有的;因为有点小树以二进制表示位数是无穷的
整形: 0,6,-100,0xff00(十六进制),0377/0o77(八进制),0b1010(二进制),不管输入的是几进制,最终显示时都会转为10进制
浮点型: 1.2,0.123,3.14e11=>3,14*10^11 科学计数法
0.375+0.248.toFixed(2)=>保留两位小数(四舍五入) console.log(1.0-0.9==0.1)//false console.log(1.0+0.9==1.9)//true
NaN(not a number): NaN是一个特殊的number值,not a number表示非数字,当程序由于某种原因计算错误时,将产生一个无意义的数字NaN NaN与任何值都不想等,包括NaN本身 任何涉及NaN的操作,结果都为NaN
var a='hello'; b=10; alert(a-b) // NaN
-
Boolean
-
值只有true和false。分别代表逻辑真与假
-
布尔值通常用来表示比较所得的结果
-
true和false是严格区分大小写的
var n=10; if(n>8){ alert('我是true'); }else{ alert('我是false'); }
-
undefined【了解】
-
定义了一个变量但没有为该变量赋值,使用了一个并未赋值的变量
-
使用了一个不存在的对象的属性时
var n; alert(n);
var people=new Object; // 创建一个object对象 people.height =162; // 添加属性height alert(people.height); // 输出属性height people.show=function(){ // 添加方法show alert(this.color); // 调用属性color alert(this.height); // 调用属性 height } people.show() // 调用方法show
https://www.cnblogs.com/ranyihang/p/15594238.html
-
null【了解】
-
null表示一个空值
-
null不等于空字符串""、''或0
-
null和undefined的区别是,null表示一个变量被赋予了一个空值,而undefined则表示该变量尚未被赋值
console.log(null==null) // true
-
Array(数组)【重要】
创建数组
方法一:
var 数组名=new Array();
方法二:
var cars=new Array("Audi","BMW","BYD");
方法三:
var cars=["Audi","BMW","BYD"];
获取数组中的值
var arr = ['少林寺','龙门石窟','二七塔','华谊电影小镇']; console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); console.log(arr[3]);
循环遍历输出所有的数据
var cars=new Array("Audi","BMW","BYD"); for(i=0;i<cars.length;i++){ document.write(cars[i]+"<br/>") }
多维数组
var arr = [ ['北京','上海','深圳'], ['合肥','石家庄','昆明'], ['','',''] ]; console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); console.log(arr[3]);