JavaScript与HTML/CSS基础教程：变量、数据类型与样式效果-优快云博客

本文链接：https://blog.youkuaiyun.com/bsjmxg/article/details/127475557

js的变量与数据类型

声明变量

1.let

2.const（常量）

3.var

4.console console.log();

基本类型

1.undefined

2.null

3.string

4.number

可以除0 结果为无穷大（infinity）

parselnt("10.6")可以去除小数部分

5.boolean

js中表示falsy的：false null undefined 0 0n 空串

输出语句

1.alert('11') 弹出警示框

2.console.log('22') 控制台打印输出信息

3.prompt('33') 弹出输入框用户输入

4.comfirm('44') 警示框与alert有区别

5.innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="1"></p>
    <script>
        document.getElementById("1").innerHTML=3 * 4 * 5;
    </script>
</body>
</html>

6.document.write

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="1"></p>
    <script>
        document.write(3*4);
    </script>
</body>
</html>

JavaScript 语法

1.用var来声明变量

=来给变量赋值

2.表达式的值可以是多种类型，比如数值和字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="1"></p>
    <script>
      document.write("Bill" + " " + "Gates") ;
    </script>
</body>
</html>

输出为：Bill Gates

3.注释

// 或 /* */

4.标识符

标识符是名称，在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。在大多数编程语言中，合法名称的规则大多相同。在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。连串的字符可以是字母、数字、下划线或美元符号。

5.js对大小写敏感

JavaScript变量

1.声明，创建变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="1"></p>
    <script>
     var name="hahahahaha";
     document.getElementById("1").innerHTML=name;
         </script>
</body>
</html>

2.一条语句可以执行多个变量，用逗号分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="1"></p>
    <script>
     var person = "Bill Gates", carName = "porsche", price = 15000;
     document.getElementById("1").innerHTML=person;
         </script>
</body>
</html>

3.Value=undefined

在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。不带有值的变量，它的值将是 undefined。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="1"></p>
    <script>
     var person;
     document.getElementById("1").innerHTML=person;
         </script>
</body>
</html>

JavaScript Let

1.全局作用域

全局变量可以在 JavaScript 程序中的任何位置访问

var carName = "porsche";

// 此处的代码可以使用 carName

function myFunction() {
  // 此处的代码也可以使用 carName
}

2.函数作用域

// 此处的代码不可以使用 carName

function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}

// 此处的代码不可以使用 carName

3.JavaScript 块作用域

var声明的变量没有块作用域但let声明的变量有

{ 
  var x = 10; 
}
// 此处可以使用 x
{ 
  let y = 10;
}
// 此处不可以使用 y

4.重新声明变量

使用var关键字重新声明变量会带来问题。在块中重新声明变量也将重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

使用let关键字重新声明变量可以解决这个问题。在块中重新声明变量不会重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

5.循环作用域

var

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

let

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7

6.HTML 中的全局变量

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境，在 HTML 中，全局作用域是 window 对象，通过var关键词定义的全局变量属于 window 对象：

var carName = "porsche";
// 此处的代码可使用 window.carName

通过let关键词定义的全局变量不属于 window 对象：

let carName = "porsche";
// 此处的代码不可使用 window.carName

7.重新声明

允许在程序的任何位置使用 var 重新声明 JavaScript 变量：

var x = 10;

// 现在，x 为 10
 
var x = 6;

// 现在，x 为 6

在相同的作用域，或在相同的块中，通过let重新声明一个var变量是不允许的：

var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过let重新声明一个let变量是不允许的：

let x = 10;       // 允许
let x = 6;       // 不允许

{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过var重新声明一个let变量是不允许的：

let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

在不同的作用域或块中，通过 let 重新声明变量是允许的：

let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

JavaScript Const

通过const定义的变量与let变量类似，但不能重新赋值：

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

1.块作用域

var x = 10;
// 此处，x 为 10
{ 
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10

2.在声明时赋值

JavaScript const变量必须在声明时赋值：

const PI = 3.14159265359;

3.不是真正的常数，关键字const有一定的误导性。它没有定义常量值。它定义了对值的常量引用。

4.常量的对象可以更改

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

但是无法重新为常量对象赋值：

const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

5.常量数组可以更改

// 可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];

// 可以更改元素：
cars[0] = "Honda";

// 可以添加元素：
cars.push("Volvo");

但是无法重新为常量数组赋值：

const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"];    // ERROR

6.重新声明

在同一作用域或块中，不允许将已有的var或let变量重新声明或重新赋值给const：

var x = 2;         // 允许
const x = 2;       // 不允许
{
  let x = 2;     // 允许
  const x = 2;   // 不允许
}

在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的：

const x = 2;       // 允许
const x = 3;       // 不允许
x = 3;             // 不允许
var x = 3;         // 不允许
let x = 3;         // 不允许

{
  const x = 2;   // 允许
  const x = 3;   // 不允许
  x = 3;         // 不允许
  var x = 3;     // 不允许
  let x = 3;     // 不允许
}

在另外的作用域或块中重新声明 const 是允许的

const x = 2;       // 允许

{
  const x = 3;   // 允许
}

{
  const x = 4;   // 允许
}

JavaScript 算数

JavaScript 赋值

1.= 赋值运算符向变量赋值。

2.+= 赋值运算符向变量添加值。

3.-= 赋值运算符从变量中减去一个值。

4.*= 赋值运算符相乘变量。

5./= 赋值运算符对变量相除。

6.%= 赋值运算符把余数赋值给变量。

JavaScript 数据类型

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

1.JavaScript 从左向右计算表达式。不同的次序会产生不同的结果。

var x = 911 + 7 + "Porsche";

var x = "Porsche" + 911 + 7;

JavaScript 拥有动态类型

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

2.js字符串值

可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配：

var answer = "It's alright";             // 双引号内的单引号
var answer = "He is called 'Bill'";    // 双引号内的单引号
var answer = 'He is called "Bill"';    // 单引号内的双引号

3.js数值

超大或超小的数值可以用科学计数法来写：

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

4.js数组

JavaScript 数组用方括号书写。数组的项目由逗号分隔。

var cars = ["Porsche", "Volvo", "BMW"];

5.js对象

JavaScript 对象用花括号来书写。对象属性是 name:value 对，由逗号分隔。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

6.typeof运算符

可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型：

typeof 运算符返回变量或表达式的类型：

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"          // 返回 "string"

7.undefined

在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。

var person;                  // 值是 undefined，类型是 undefined。

任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

8.Undefined 与 null 的值相等，但类型不相等：

关于html css的补充

1.css的渐变效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    
    #box1{
      height: 200px;
        background-image: linear-gradient(green,blue);
    }
   
    #box2{
      height: 200px;
        background-image:linear-gradient(to right,red,yellow) ;
    }
    #box3{
        height: 200px;
        background-image: linear-gradient(to bottom right,purple,pink);
    }
    #box4{
        height: 200px;
        background-image: linear-gradient(45deg, red,blue);

    }
   
</style>
<body>
    <div id="box1">
        
    </div>
    <div id="box2">

    </div>
    <div id="box3">

    </div>
    <div id="box4"></div>
   
</body>
</html>

2.盒子阴影效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box5{
    box-shadow: 5px 10px 20px #006699;
    height: 200px;
    width: 200px;
   }
</style>
<body>
    <div id="box5">盒子阴影</div>
</body>
</html>

输入搜索内容并显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<input type="text" placeholder="输入一个内容" id="text">
<button onclick="box()">搜索</button>
<div id="a1"> </div>
</body>
<script src="index.js">

</script>
<html>

function box()
{
    var value = document.getElementById('text').value;
    console.log(value);
    document.getElementById('a1').innerHTML=value;
}