1.基础入门

1.1.hello world

1.1.1.JavaScript是什么?

JavaScript是一门跨平台、面向对象的轻量级脚本语言,在web开发中被广泛应用

1.1.2.JavaScript和Java的关系

JavaScript 和 Java 有一些共性但是在另一些方面有着根本性区别。JavaScript语言类似 Java 但是并没有 Java 的静态类型和强类型检查特性。JavaScript 遵循了 Java 的表达式语法,命名规范以及基础流程控制,这也是 JavaScript 从 LiveScript 更名的原因

通俗的说,就是JavaScript和Java虽然名字相似,但是它们是两门不同的语言,有很大的区别,不要搞混淆了

1.1.3.为什么要学习JavaScript?它的应用场景在哪?

JavaScript使用广泛,可以说是一统浏览器江湖了,而且随着前端工程化的发展,地位在开发中有所提升,很多复杂的逻辑都需要交给前端来完成,现在的前端工程师已经不再是只会切图做页面那么简单了,JavaScript是必备技能。

如果是想从事后端开发,也必须会JavaScript,页面数据交互必定会遇到JavaScript代码,如果不会,将会成为工作瓶颈。随着最近几年nodejs的兴起,JavaScript也具有染指后端的能力,学好JavaScript前途无量。

应用场景:页面动画、用户交互、ajax前后端交互等

1.1.4.第一个JavaScript程序

<script type="text/javascript">
    alert("hello world");
</script>

以上代码运行过后,会在浏览器窗口弹出一句话,hello world,上面的代码可以写在html文件的任何位置。

1.1.5 JavaScript 写在哪里

JavaScript 可以写在script标签内部,这种方式又叫做内嵌方式,和css的内嵌样式比较类似。

<script type="text/javascript">
    alert('这是Javascript程序');
</script>

JavaScript可以写在外部文件中,这种方式又叫做外联方式,这个方式也和css中的外联样式很像。如果要用外联的方式写JavaScript代码必须经过两步才能完成 第一步:新建一个外部JavaScript文件,以.js结尾。这里以新建hello.js 为例;并在hello.js中输入以下代码

   alert("这里是外部引入JavaScript程序")

第二步:假设当前修改的页面为index.html页面,需要在index.html页面中引入外部新建的hello.js文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部引入js文件实例</title>
        <script src="hello.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    </body>
</html>

总结:既然两种方式都可以运行JavaScript,那么我们到底使用那种方式呢?内嵌方式写的代码是和html代码混淆在一起的,当代码量很少或者是调试JavaScript程序的时候,使用内嵌方式会比较方便。当代码量很多,项目复杂的时候,js开发往往采用模块化开发的方式,多人协作开发,也就是某个人具体开发某个功能,这个时候就要用外联方式来写了,开发完成过后还要合并代码,压缩代码,用以优化提升性能,这个时候用内嵌的方式就不行了

1.1.6.Javascript的输出(死记住)

编程就是编写命令让计算机运行并得到想要的结果的一个过程,有些时候,需要在页面上输出程序的运行结果,用于调试程序,查找错误,下面来学几个输出结果的方法:

  • 在网页中输出,显示在浏览器的body里面
//输出纯文本
document.write("hello world");
//输出html代码,这里的输出相当于把里面h1元素发给浏览器,浏览器会把h1元素解析生成具体的样式
document.write("<h1>hello world</h1>")
  • 弹出框输出
//这里输出会在页面运行的时候,弹出一个对话框,里面输出hello world
alert("hello world");
  • 浏览器控制台输出 这里以google为例 打开控制台的方法:在运行的页面上右键->检查->点击下面的Console
   //使用console.log()命令,输出的内容都在控制台显示
   console.log("hello world");

1.1.7.输入内容

var num = prompt('请输入数字:')
alert(num)

1.2.基础概念

1.2.1.关键字

关键字就是JavaScript语言自身需要使用的一些单词,这些单词具有特殊的意义以及用法,因此,在程序中定义某个名称表示某种东西的时候就不能使用关键字了,会和这些关键字本身具有的意义用法起冲突,常用的关键字有 default、this、while、for、in、break、do、new、switch、var、function、case、null、undefined等等,后续会一一学到。

1.2.2.注释

注释就是对程序代码对一种注解,方便别人或者自己能够清晰的阅读代码,这里介绍两种注释:单行注释、多行注释

    //这里是单行注释,单行注释,只能写在一行里面

    /*
    *这里是多行注释
    *多行注释可以写在多行
    *多行注释以“/*” 开头
    *多行注释以“*/"结尾
    */

1.2.3.JavaScript区分大小写

JavaScript 是一门区分大小写到语言。因此,就需要在编程中保持名称到一致,比如,在JavaScript中,如果this 被写成了This,因为是区分大小写到语言,this和This并不相等,在该用this到地方,用成lThis,程序就会出错

1.2.4.可选的分号码

在汉语中,当一句话完成了以后,用句号表示结束,在JavaScrip中也是一样一条语句结束需要有结束符号,JavaScript中用分号“;”来表示一条语句多结束。但是这个分号是可以写也可以不写的,通常会在团队开发规范中说明,有些语言是强制要求加分号的,例如:php,不写会报错

1.2.5 练习

用自己的话说什么是关键字、注释以及注释的作用? 手写下面内容10遍: JavaScript区分大小写 javaScript分号可写可不写,建议写上

1.3.变量

1.3.1.变量是什么

变量从字面上理解的话,可以看出具有可变、变化的特征,量在这里可以看作是数据的意思,所以变量又可以理解为可变的数据。变量在计算机中就是一块用来存储数据的临时空间,也可以看成是一个存储数据的临时容器。变量存在内存之中,如果把内存划分成n多个小格子多话,变量就是其中对应多某个小格子。

1.3.2.如何使用变量?

要使用变量,需要先定义,我们这里叫做变量的声明,需要使用到 var 这个关键字

var a = 10

变量声明后就可以直接使用了

alert(a)

1.3.3. 练习

输入2个数,求出2个数的差并且弹窗显示 输入3个数,求3个数的积并且输出到网页中 输入4个数,求出它们的商并且输出到控制台

1.4.查找元素的方法

1.4.1.查找元素的方法

JavaScript可以去操作html元素,要实现对html元素的操作,首选应该找到这个元素,有点类似于css中的选择器

html代码:

<div id="box">螺钉课堂</div>

js代码:

oBox = document.getElementById('box')
console.log(oBox)

1.4.2.练习

把上面代码手写5遍,默写一遍

1.5.事件、函数、以及属性操作

1.5.1.事件和函数

事件就是发生的某件事情,在浏览器中表现为用户和页面交互时产生的一些行为,例如,鼠标点击、鼠标移入、鼠标抬起、键盘按下等

函数是什么?用人话讲,函数在代码中表现为一些代码的集合,把许多语句完成等功能封装起来,方便以后调用,这种封装起来的代码块可以理解为函数的表现形式,只需要记住一句话即可,函数是具有一定功能的代码块

函数定义:

function fn(){
    alert(1)
}

函数调用:

fn()

事件函数绑定:

oBox = document.getElementById("box")

oBox.onclick = function(){
    alert(1)
}

onclick 点击事件,当用户点击某个元素的时候发生,上面代码的执行顺序是, 当用户去点击box这个元素的时候,会去执行等号后面等函数,这个函数执行就会弹出数字 1, 这里要注意的是,如果用户不点击box这个元素,alert就不会执行

1.5.2.html属性操作

innerHTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="btn">按钮</button>
        <div id="box"></div>
        <script type="text/javascript">
            oBtn = document.getElementById('btn')
            oBox = document.getElementById('box')
            oBtn.onclick = function(){
                oBox.innerHTML = 'hello world!!!'
            }
        </script>
    </body>
</html>

innerText

oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
    oBox.innerText = 'hello world!!!'
}
innerText和innerHTML的区别
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
    oBox.innerText = '<a style="color:red">hello world!!!</a>'
}
oBtn = document.getElementById('btn')
oBox = document.getElementById('box')
oBtn.onclick = function(){
    oBox.innerHTML = '<a style="color:red">hello world!!!</a>'
}

获取/设置输入框的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="btn">按钮</button>
        <input type="text" id="ipt" />
        <script type="text/javascript">
            oBtn = document.getElementById('btn')
            oIpt = document.getElementById('ipt')
            oBtn.onclick = function(){
                // 获取值
                console.log(oIpt.value)
                // 设置值
                oIpt.value = '螺钉课堂'
            }
        </script>
    </body>
</html>

设置html元素的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: black;
            }
        </style>
    </head>
    <body>
        <button id="btn">按钮</button>
        <div id="box"></div>
        <script type="text/javascript">
            oBtn = document.getElementById('btn')
            oBox = document.getElementById('box')
            oBtn.onclick = function(){
                oBox.style.backgroundColor = "orange"
            }
        </script>
    </body>
</html>

1.5.3.练习

在输入框中输入两个数字,点击按钮的时候,计算出两个数字的差并且显示到id为result的div中

点击 + 号, id为p1的p元素中的字体变大2个像素 点击 - 号, id为p1的p元素中的字体变小3个像素

1.6.数据类型基础和操作符

1.6.1.什么是数据类型

用人话讲,数据类型也就是给数据分类,在JavaScript中将数据到值划分成了不同到类型,主要包括基本数据类型与引用数据类型。这里主要讨论JavaScript的基本数据类型:数字、字符串、布尔、undefined、null,其中undefined和null也有人称之为特殊数据类型

1.6.2.为什么要有数据类型

num1 = prompt('请输入数字1:')
num2 = prompt("请输入数字2:")
alert(num1 + num2)
alert(num1 - num2)

输入1:10, 输入2: 20 结果: 1020 上面结果运行出来结果和想想的不一样,最主要的原因就是数据类型不对,默认情况下,prompt获取的值是字符串类型,+号不仅是数学上的运算符号,在js中也表示字符串的连接

从上面的例子可以看出,如果不对数据进行分类,无法得到规定的结果,也没法进行计算

1.6.3.什么是运算符?

运算符就是用来表示具体运算规则的符号,例如数学计算中的加减乘除就是具体的运算规则,我们分别用“+ - * /”等符号来表示

算术运算符

console.log(97%10);//输出7
console.log(100%10);//输出0
console.log(-97%10); //输出-7
console.log(97%-10); //输出7
%表示求两个数相除的余数,符号和被除数一致

比较运算符

比较运算符就是比较两个数据之间的大小,是否相等,最终得到一个布尔型的值。比较运算符包括:== != > >= < <= ===(全等于) !==(不全等于)

var a=5;
var b=6;
console.log(a>b);//false
console.log(a<b);//ture

比较运算符中,需要注意的是== 和 ===的区别,两个等号只是比较两边的值是否相等,三个等号不仅要比较两边的值是否相等,还要看两边的类型是否一样,只有类型和值都一样了才返回true

1.6.4 练习

在输入框中输入一个三位数,点击按钮后,在id为result的div中输出这个数的个位

1.7.流程控制

1.7.1.什么是流程控制?

程序的流程控制就是指程序运行时,个别指令运行或求值的顺序。复杂的程序时由若干个基本结构组成,每个基本结构可以包含一条或者若干条语句。程序中语句的执行顺序称为程序结构,如果程序语句是按照书写顺序执行的,则称之为顺序结构,如果是按照某个条件来决定是否执行,则称之为选择结构,如果某些语句要反复执行多次,则称之为循环结构。程序的运行顺序就是由这3大结构控制着,所有大语句都离不开这3大结构。学会来这3大结构,就可以写出比较复杂大程序了。下面我们来看看现实生活中一个比较复杂大程序。 用人话说,流程控制就是可以控制程序的执行顺序,哪句被执行,哪句不被执行,哪句执行一次,哪句执行多次

1.7.2.条件分之-if语句

num1 = prompt("请输入数字")
if(num1 >= 60){
    console.log("及格")
}

if(num < 60){
    console.log("不及格")
}if...else 语句合并上面两句代码

num1 = prompt("请输入数字")
if(num1 >= 60){
    console.log("及格")
}else{
    console.log("不及格")
}

1.7.3.练习

实现一个简单版计算器,支持加减乘除运算 用户输入数字1和数字2,选择进行何种运算,点击计算按钮,得到运算结果

0