一、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方法是数据日志

IT-wanghanghang

发布了149 篇原创文章 · 获赞 365 · 访问量 3万+

私信关注

JS（一）--简介

JS简介