JavaScript概述和体验

目标

  1. JavaScript的作用
  2. 编写第1个JavaScript代码

为什么要用JavaScript

运行在网页上脚本(Script)

 

网页中各技术的作用

技术

作用

HTML

创建网页的结构

CSS

网页的美化

JavaScript

用于网页的交互,让网页变得更加生动,提高用户的体验

 

JS体验案例

需求

使用JS在网页上输出5个Hello World

代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的初体验</title>
</head>
<body>
<!--JavaScript脚本必须放在script标签中,MIME类型:大类型/小类型 -->
<script type="text/javascript">
    for (var i = 0; i < 5; i++) {
        //在文档上写东西,整个网页就是一个文档document
        document.write("<h1>Hello World!</h1>");
    }
</script>
</body>
</html>


 

小结

  1. 什么要JS?                让网页更生动,改善用户的体验
  2. 说说网页上各种技术的作用:HTML,CSS,JS

 

JavaScript的两种引入方式

目标

  1. JS语言的三个组成部分
  2. <script>标签的说明

语言组成

组成部分

作用

ECMA Script

所有脚本语言规范,构成了JavaScript语法基础

BOM

Browser Object Model 浏览器对象模型,用来操作浏览器中各种对象

DOM

Document Object Model 文档对象模型,用来操作网页中各种元素

script标签的说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的初体验</title>
</head>
<body>
<!--JavaScript脚本必须放在script标签中,MIME类型:大类型/小类型 -->
<script type="text/javascript">
    for (var i = 0; i < 5; i++) {
        //在文档上写东西,整个网页就是一个文档document
        document.write("<h1>Hello World!</h1>");
    }
</script>

<!--
1. 标签个数:在同一个网页中可以出现多个script标签
2. 位置:script标签可以放在网页中任意位置,甚至是html之外
3. 语句后分号:如果一行代码一条语句,分号可以省略,不建议省略

4. 以后js脚本通常放在HTML外面,导入来使用,使用script标签来导入。
属性:src 指定要导入的外部js文件
必须是一个有主体的标签
-->
<script src="js/out.js" type="text/javascript"></script>
</body>
</html>

 

JavaScript的注释

typescript 定义一个范围数字_html

 

JavaScript的三种输出方式

typescript 定义一个范围数字_数据类型_02


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的三种输出方式</title>
</head>
<body>
<script type="text/javascript">
    // 1.输出到浏览器的控制台
    console.log("你好,我是JavaScript");
    //2. 输出到文档网页上
    document.write("输出到网页上");
    //3. 弹出信息框
    alert("这是一个信息框");
</script>
</body>
</html>


 

小结

  1. JS由哪三个部分组成?
  1. ECMAScript
  2. BOM
  3. DOM
  1. script标签有哪两个属性?
  1. src 导入外部js脚本
  2. type 指定脚本的类型,可选
  1. 有哪三种输出方式?
  1. console.log()
  2. document.write()
  3. alert()

 

 

变量的定义

目标

  1. 变量的定义的语法
  2. var关键字的使用

定义语法

ES 6中有三个定义变量的关键字:

  1. var 以前使用比较多的一个关键字,用来定义变量
  2. let 6以后多出来的定义变量的关键字
  3. const 定义常量,类似于java final关键字

定义代码模板

typescript 定义一个范围数字_html_03

 

设置idea支持ES6

typescript 定义一个范围数字_字符串_04

 

变量的定义


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量定义</title>
</head>
<body>
<!--输入sc以后,按ctrl+j-->
<script type="text/javascript">
    var i = 5;  //定义整数
    let m = 6;  //默认idea不支持,要修改EC为6
    const PI = 3.14;  //常量
    document.write(i + "<br/>");
    document.write(m + "<br/>");
    //PI = 5;  不能重新赋值
    document.write(PI + "<br/>");
</script>
</body>
</html>


 

数据类型

Java中定义变量

JS中定义变量

整数

int i = 5;

var i=5;

浮点数

float f = 3.14f; 或 double d=3.14;

var f=3.14;

布尔

boolean b = true;

var b=true;

字符

char c = 'a';

var c = 'a'; //没有字符类型,只有字符串

字符串

String str = "abc";

var str = "abc";

注意事项


//1. 关于弱类型?
/* 同一个变量可以赋值为不同的数据类型 */
var num = 666;  //整数
num = true;  //布尔
num = "abc";   //字符串类型,注:js中没有字符类型,只有字符串
document.write(num + "<br/>");

//2. 在JS中的字符和字符串引号?
//JS中字符串既可以使用单引号 ' ,也可以使用双引号 " ,还可以使用反引号 ` (Esc下面:波浪线)
let s1 = 'abcd';
let s2 = "xyz";
let s3 = `hello`;
document.write(s1 + s2 + s3 + "<br/>");


 

var和let的区别


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>var和let的区别</title>
</head>
<body>
<script type="text/javascript">
    //1.作用域不同:var定义的变量在代码块中不受{}限制,let定义的变量是受限制
    {
        var x = 5;
    }
    document.write(x + "<br/>");  //可以输出,不受{}限制

    {
        let y = 6;
    }
    //document.write(y + "<br/>");  //找不到y的值,出错

    //2.重新定义变量区别:var可以修改变量的值
    var a = 10;
    {
        var a = 2;
    }
    document.write(a + "<br/>");  //2

    let b = 5;
    {
        let b = 3;  //不可见
    }
    document.write(b + "<br/>");  //5

    //3.const关键字,如果是对象,它的属性可以修改
    const person = {"name": "NewBoy", "age": 18};
    document.write(person.name + "<br/>");
    document.write(person.age + "<br/>");
    //person = {};  //不行的
    person.age = 19;
    document.write(person.age + "<br/>");
</script>
</body>
</html>


 

小结

  1. 在JS中定义变量使用哪个关键字?
  1. var
  2. let
  1. JS是弱类型还是强类型?
    弱类型
  2. 有没有字符和字符串的区别?
    没有字符类型,只有字符串,字符串使用:" ' `

 

五种数据类型

目标

JS中有哪五种数据类型

五种数据类型

关键字

说明

number

数值型,包括整数和浮点数

boolean

布尔类型,true或false

string

字符串类型,可以使用单引号,双引号,反引号

object

对象类型

undefined

未定义的类型

typeof操作符

作用:判断一个变量的数据类型

写法:

  1. typeof 变量名
  2. typeof(变量名)

案例:数据类型的演示

需求

分别输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类型

代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五种数据类型</title>
</head>
<body>
<script type="text/javascript">
    //分别输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类型
    let i = 5;
    document.write(typeof(i)+ "<br/>");  //number

    let f = 3.4;
    document.write(typeof(f) + "<br/>");  //number

    let c = 'a';
    document.write(typeof(c) + "<br/>");  //string

    let s = "abc";
    document.write(typeof(s) + "<br/>");  //string

    let b = true;
    document.write(typeof(b) + "<br/>");  //boolean

    let u;
    document.write(typeof(u) + "<br/>");  //undefined

    let n = {name: "jack", age: 18};
    document.write(typeof(n) + "<br/>");  //object

    /**
     * 注:null和undefined的区别
     * 1. null本质上是一个对象类型,只是这个对象没有值
     * 2. undefined 未知的类型
     */
    let x = null;
    document.write(typeof(x) + "<br/>");   //object
</script>
</body>
</html>


小结

null与undefined的区别

说明

null

null本质上是一个对象类型,只是这个对象没有值

undefined

未知的类型,没有初始化

 

在浏览器中调试代码

目标

如何在浏览器中调试JS代码

设置断点

typescript 定义一个范围数字_字符串_05

注:设置断点以后要重新刷新页面才会在断点停下来

 

语法错误

typescript 定义一个范围数字_javascript_06

 

常用的运算符

目标

学习JS中的各种运算符

算术运算符

算术运算符用于执行两个变量或值的算术运算

typescript 定义一个范围数字_html_07

 

赋值运算符

赋值运算符用于给JavaScript 变量赋值

typescript 定义一个范围数字_数据类型_08

 

比较运算符

比较运算符用于逻辑语句的判断,从而确定给定的两个值或变量是否相等。

typescript 定义一个范围数字_字符串_09

 

数字可以与字符串进行比较,字符串可以与字符串进行比较。字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较

代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>
<script type="text/javascript">
    let s1 = 5;
    let s2 = "5";
    document.write((s1 == s2) + "<br/>");  //true 比较值是否相等
    document.write((s1 === s2) + "<br/>");  //恒等于,既比较值,又比较类型

    document.write((s1!=s2) + "<br/>");  //false
    document.write((s1!==s2) + "<br/>");  //恒不等于 true
</script>
</body>
</html>


逻辑运算符

逻辑运算符用来确定变量或值之间的逻辑关系,支持短路运算

typescript 定义一个范围数字_javascript_10

 

逻辑运算符不存在单与&、单或|

三元运算符

typescript 定义一个范围数字_html_11

 

小结

  • 运算符 === 有什么作用? 既比较值,又比较类型  

 

学习总结

  1. 能够说出JS中五种数据类型

关键字

说明

number

数值

boolean

布尔

string

字符串

object

对象

undefined

未定义

  1. 能够使用JS中常用的运算符
  1. 算术运算符
  2. 赋值运算符
  3. 比较运算符 === !==
  4. 逻辑运算符
  5. 三元运算符