JS简介
一、JS简介
学习web开发一定要牢记三大标准:W3C
浏览器的多元化、世界的多元化
1.1JS是什么?
Web开发:对网页起到动态实现的一个脚本语言
HTML:担任网页的骨骼结构作用
CSS:担任网页的皮肤美化作用
JS:担任网页的灵魂功能
1.2什么是脚本语言
计算机语言:人类和计算机之间交互的一种语言,计算机能够直接识别的语言是二进制语言(0,1)
机器语言:计算机直接识别的语言(0,1)
例如:计算机识别数字5(101),使用某一个单词对0,1之间的组合进行替代
混编语言:B语言
高级语言:
-
编译语言:C/C++/Java/C#/Python/PHP ,指的是计算机在执行这个语言时候,先将所编写的代码,通过其语言平台编译为计算机可以直接识别的语言(JDK/.NET FRAMEWORK是字典)
-
脚本语言:并非计算机CPU直接去识别的语言,其运行不必转成二进制,但是其执行必须需要一个运行平台(JS必须要运行在JS引擎上)
浏览器:渲染引擎(HTML/CSS)、JS引擎(JS代码)
引擎也是一个字典功能
1.3文件系统
计算机中存储所有数据的载体是文件
windows平台能够直接识别的文件是:.exe
浏览器直接识别的文件是:.html
TXT/MP3这些文件双击也能运行,原因是这些文件都有一个对应的应用程序打开它,而这个应用程序.exe
二、JS的组成核心
2.1 ECMAScript
JS的基础语法
ECMAScript是一套标准,定义了一种语言的标准与具体实现无关
2.2DOM
Document Object Model
document指的是当前的文件文档
2.3BOM
Browser Object Model
三、JS基础语法
3.1JS代码写在哪
js代码的写法和css类似有三种:
行内:写在HTML标签的某个属性值中
<input type="button" value="下载图片" onclick="alert('请先登录')">
内嵌:在HTML文件内部使用script标签在某个位置开辟一片区域用来专门书写JS代码,标准意义上script标签书写在body中的结尾标签之前
<script>
// 这个区域中的所有代码全部是JS代码
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("请先登录");
}
</script>
外部:专门在项目中创建一个js文件,在这个文件中专门写js代码,然后如果某个html中需要使用这个js文件则只需要在html中的body结尾标签之前使用script标签的src属性引入即可
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("hello");
}
<script src="../js/01js.js"></script>
注意:为什么js内嵌或外部的引入标签script按照标准必须写在body的结束标签之前?
因为浏览器执行标签仍然按照从上往下的顺序执行,如果js写在标签上面,js执行时如果需要用到html标签而HTML标签并未被浏览器执行则没有
3.2head中的js
事件:当某个条件达到时,才去执行的这个代码块片段
-
使用window的onload事件:保证了Window部分加载完成,理解为这个事件执行的时候肯定是body中的标签执行完成
-
一般情况下在使用内嵌或外部js的时候务必先使用window.onload事件
-
事件是达到某个条件时自动触发的一个代码块
-
遇到事件必须要进行注册,所谓的注册就是给这个事件赋一个方法
window.onload=function(){ }
-
方法:使用function关键字声明
方法指的是代码片段,这个片段中的所有代码要么全部执行,要么都不执行
3.3变量
变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据,计算机临时存储数据的一个容器。使用变量可以方便的获取或者修改内存中的数据
-
如何声明变量:js语言又称为弱类型语言,所以声明不需要任何类型指定统一使用关键字:var
var i;
-
检测数据:使用浏览器进行调试
浏览器弹框alert,控制台输出console.log
-
变量使用前需要给赋值
var i=10;
-
声明变量的命名规范
a. 不能使用js关键字
b. 不能以数字开头
c. 绝对不能写特殊符号除过_、$
d. js中严格区分大小写
e. 变量命名尽量不要用拼音,复杂单词采用驼峰命名法(首单词全部小写,之后的单词首字母大写)
3.4数据类型
数据类型指的是计算机存储不同的数据所开辟的空间,或使用这个空间的方式不同而形成的类型
不同的数据其类型必然不同
数据类型就像是一个声明,声明这个容器的类型,容器的类型决定了这个容器中的所能够装载的数据有哪些
检测数据类型使用运算符 typeof
3.4.1 5种基本数据类型
- number类型:数字类型
- string类型:文本
- boolean类型:对错true 1/false 0
- undefined类型:变量声明未初始化,它的值就是undefined
- null类型:null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null
3.4.2 不同类型的赋值
- number类型:等号后直接写数字
- string类型:等号后先写单引号或双引号,因为行内js中js语句写在标签的属性值双引号中,或者字符串中有双引号务必要小心,一般来说字符串的双引号或单引号中随便写,唯独要写符号是小心
- boolean类型:等号后直接写true/false
- undefined类型:声明变量之后不写等号直接分号结束,或者等号后写单词
- null类型:等号后写null
3.4.3 复杂数据类型
- object:对象类型
3.5弱类型语言
数据类型在声明变量时,无法确定,最终取决于赋值,先赋值才知道
3.6灵活使用数据类型
案例:计算器
-
先设计界面
<body> <input type="text" id="num1"> <select id="type"> <option value="1">+</option> <option value="2">-</option> <option value="3">×</option> <option value="4">÷</option> </select> <input type="text" id="num2"> <input type="button" value="=" id="btn"> <input type="text" id="result"> </body>
-
实现逻辑功能
注意:
编程中加号运算符两个功能:
数字和数字之间是加法运算功能
运算两者之间有任意一个不是数字或布尔值,则加号是连接作用
而通过元素的value值拿到的是字符串
因此需要解决的问题是将字符串转成数字
使用parseInt方法转类型
window.οnlοad=function(){ //逻辑:按下等号,先获取两个要计算的数,然后获取你选择的运算符,最后根据运算符求出两个数的结果值,最后将结果值放进结果框中 //1.先获取btn,使用dom操作 var dengHao=document.getElementById("btn"); // console.log(dengHao); dengHao.οnclick=function(){ //2.获取这两个数字 //先根据元素id获取到这个元素 var num1=document.getElementById("num1"); //再根据获取到的元素拿value属性值,使用parseInt将string转成int类型 var i=parseInt(num1.value); console.log(i); var num2=document.getElementById("num2"); var j=parseInt(num2.value); var type=document.getElementById("type"); var t=type.value; console.log(t); //3.根据运算符进行运算 //选择是加法 if(t==1){ var res=i+j; //4.将结果放进结果文本框中 var result=document.getElementById("result"); result.value=res; } //选择是减法 if(t==2){ var res=i-j; //4.将结果放进结果文本框中 var result=document.getElementById("result"); result.value=res; } if(t==3){ var res=i*j; //4.将结果放进结果文本框中 var result=document.getElementById("result"); result.value=res; } if(t==4){ var res=i/j; //4.将结果放进结果文本框中 var result=document.getElementById("result"); result.value=res; } } }
四、JS中常用的方法
4.1 什么是方法
方法指的是代码片段,这个片段中的所有代码要么全部执行,要么都不执行
4.2 方法怎样使用
遇到方法直接小括号分号,小括号中填写方法所需的参数
js语法中的分号,按照严格意义上必须要写,分号代表其之前的代码语句到此为止
4.3常用的方法
- alert方法:页面弹框,参数是谁弹出的内容就是谁的值
- console.log方法:console是指浏览器的控制台,log方法是数据日志