JavaScript-前端教程-前军教程网

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

作用: 负责给页面添加动态效果语言
特点:属于脚本语言(不需要编译直接由浏览器解析执行)
基于面向对象
属于弱类型语言

//java: 
String name="tom"; int age = 18; int x; x="abc";
//JS: 
let name="tom"; let age = 18; let x; x="abc"; age="xyz"

安全性强: JS语言只能访问浏览器内部的数据,浏览器以外电脑上的数据禁止访问.
交互性强: 因为JS语言是嵌入到html页面中最终执行在客户端的语言可以和用户直接进行交互, 而像Java语言是运行在服务器的语言和用户交互需要借助于网络,所有交互性JS语言会更强一些

如何在HTML页面中添加JS语言

三种引入方式:

内联: 在标签的事件属性中添加js代码,当事件触发时执行. ①事件: 是系统提供的一系列时间点. ②点击事件: 当点击元素时触发的时间点
内部: 在html页面中的任意位置(推荐写在/body上面)添加script标签,标签体内写js代码
外部: 在单独的js文件中写js代码, 然后在html页面中通过script标签的src属性引入到html页面

<!--onclick点击事件   alert()弹出提示框   方式一 -->
<input type="button" value="按钮" onclick="alert('按钮点击了!')">

<!--内部引入JS  方式二 -->
<script>
    /*在浏览器的控制台输出*/
    console.log("内部引入成功!");
</script>
<!--引入外部js文件 如果script标签引入了外部js文件 则不能在标签体内写js代码-->
<script src="my.js"></script>

浏览器终端 Console 窗口调试 JavaScript 代码

变量

JS属于弱类型语言
let和var关键字的区别, 作用域有区别 let：局部作用域 var：全局作用域
使用let声明的变量,作用域和Java语言的作用域类似
使用var声明的变量,不管在什么位置声明都相当于是一个全局变量
const 关键字来定义一个常量

java:
for(int i=0;i<10;i++){
  int y = i+1;
}
// int z = i+y; 报错 i和y超出了自身的作用域
JS:
for(let i=0;i<10;i++){ 
  let y = i+1;
}
let z = i+y;  
//不报错,但是访问不到i和y 因为超出了作用域
for(var i=0;i<10;i++){ 
  var y = i+1;
}
var z = i+y;  
//不仅不报错还能够访问到i和y的值

数据类型

JavaScript中只有对象类型
常见的对象类型包括:

字符串: string 可以用单引号或双引号修饰
数值: number 相当于Java中所有数值类型的综合
布尔值: boolean true和false
未定义: undefined 当变量只声明不赋值时属于未定义
对象(Object)、
数组(Array)、
函数(Function)
正则（RegExp）--特殊的对象：
日期（Date）--特殊的对象：

获取变量类型的方法 typeof 变量;

typeof "John"    // 返回 string
typeof 3.14        // 返回 number
typeof false        // 返回 boolean
typeof [1,2,3,4]      // 返回 object
typeof {name:'John', age:34} // 返回 object
//注意 null  返回时 object
typeof undefined     // undefined
typeof null            // object
null === undefined    // false
null == undefined      // true

运算符

算数运算符: + - * / % , JS中的除法会根据结果自动转换整数或小数

//Java:
int x =5 ; int y = 2; x/y = 2;
//JS :
let x =5; let y = 2; x/y =2.5; x=6 x/y=3;

关系运算符: > < >= <= != ==和===
==: 先统一两个变量的类型再比较值"666"==666 true
===:先比较类型,类型相同后再比较值 "666"===666 false
逻辑运算符: && || !
赋值运算符: = += -= *= /= %= ++ --
三目运算符: 条件?值1:值2

各种语句:

if else

//语法
if (condition)
{
    当条件为 true 时执行的代码
}
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

for

//语法：
for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}
//语句 1 （代码块）开始前执行
//语句 2 定义运行循环（代码块）的条件
//语句 3 在循环（代码块）已被执行之后执行
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

while

do while

while (条件)
{
    需要执行的代码
}
//语法  do while 至少执行一次
do
{
    需要执行的代码
}
while (条件);

switch case

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

方法

// java: 写法 
public 返回值类型 方法名(参数列表){方法体}
//JS:  写法
function 方法名(参数列表){方法体}

常见的四种方法:

无参无返回值
有参无返回值
无参有返回值
有参有返回值

三种声明方法的格式:

function 方法名(参数列表){方法体}
let 方法名 = function (参数列表){方法体}
let 方法名 = new Function("参数1","参数2","方法体");

<input type="button" value="按钮" onclick="f1()">
<script>
    //1. 无参无返回值
    function f1() {
        console.log("f1");
    }
    //调用
    f1();
    //2. 有参无返回值
    function f2(name,age) {
        console.log(name+":"+age);
    }
    f2("孙尚香",50);
    //3. 无参有返回值
    function f3() {
        return "我是返回值";
    }
    let info = f3();
    console.log(info);
    //4. 有参有返回值
    function f4(x,y) {
        return x*y;
    }
    let result = f4(8,9);
    console.log(result);
    //第二种声明方法的方式
    let f5 = function (name,age) {
        console.log(name+":"+age);
    }
    f5("刘备",20);
    //第三种声明方法的方式
    let f6 = new Function("name","age","console.log(name+':'+age)");
    f6("吕布",66);
</script>

和页面相关的方法

通过选择器获取页面中的元素对象

let 元素对象 = document.querySelector("选择器")

获取和修改元素的文本内容

元素对象.innerText = "xxx"; 修改文本内容
元素对象.innerText 获取文本内容

获取和修改input控件的值

控件对象.value="xxx"; 修改
控件对象.value 获取

NaN

Not a Number: 不是一个数
isNaN(x) 判断变量是否是NaN

<body>
<div>这是div</div>
<input type="text" id="i1">
<input type="button" value="按钮" onclick="f()">
<script>
    function f() {
        //得到文本框和div
        let i = document.querySelector("#i1");
        let d = document.querySelector("div");
        //取出文本框的值并赋值给div
        d.innerText = i.value;
    }
</script>

简易计算器 Demo

<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<div>
    结果:<span></span>
</div>
<script>
      function f(x) {
        //得到页面中相关的元素对象
        let i1 = document.querySelector("#i1");
        let i2 = document.querySelector("#i2");
        let s = document.querySelector("span");
        //判断输入的两个值是不是NaN
        if (isNaN(i1.value)||isNaN(i2.value)){
          s.innerText="输入错误!";
          return;
      }
      switch (x) {
        case 1: //加
          //当两个字符串进行-*/运算时会自动转成数值,进行+运算是拼接
          //s.innerText = i.value*1+i.value*1;
          //parseFloat()将字符串转成整数或小数
          // s.innerText = parseFloat(i.value)+parseFloat(i.value);
          s.innerText = i1.value*1+i2.value*1;
          break;
        case 2: //减
          s.innerText = i1.value-i2.value;
          break;
        case 3: //乘
          s.innerText = i1.value*i2.value;
          break;
        case 4: //除
          s.innerText = i1.value/i2.value;
          break;
      }
    }
</script>

定时器 Demo

<h1>0</h1>
<h2>0</h2>
<script>
    let count = 0;
    //开启定时器 每隔1秒调用一次方法
    //方法作为参数进行传递时不写()
    setInterval(f,1000);
    function f() {
        count++;
        let h = document.querySelector("h1");
        h.innerText = count;
    }
    let num=0;
    //匿名方法开启定时器
   let timer = setInterval(function () {
        num++;
        let h = document.querySelector("h2");
        h.innerText = num;
        if (num==50){
            //停止定时器
            clearInterval(timer);
        }
    },100);
    //开启只执行一次的定时器
    setTimeout(function () {
        alert("时间到!")
    },3000);
</script>

学习记录，如有侵权请联系删除

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

JavaScript