10.23学习

最新推荐文章于 2024-08-03 17:05:14 发布

huxin0316

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量216

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/huxin0316/article/details/127472994

版权

一、在网页后台，常量除0，去除小数

var number=10
undefined
var x=number/0
undefined
console.log(x)
Infinity debugger eval code:1:9
undefined
parseInt("10.5")
10

二、搜索并在页面上打出

<!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>
    <input type="text" placeholder="请输入想要查询的信息" id="text">
    <button onclick="getValue()">将查询信息打到页面上</button>
    <div id="a">显示搜索内容</div>
</body>
<script src="2.js"></script>
</html>

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

三、div颜色渐变

<!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>
    <style>
 #a1{
    height: 200px;
    background-image: linear-gradient(0deg,red,yellow);
}
#a2{
    height: 200px;
    background-image: linear-gradient(-90deg,red,yellow);
}
#a3{
    height: 200px;
    background-image: linear-gradient(90deg,red,yellow);
}
#a4{
    height: 200px;
    background-image: linear-gradient(180deg,red,yellow);
}
    </style>
    <div id="a1"></div>
    <div id="a2"></div>
    <div id="a3"></div>
    <div id="a4"></div>
</body>
<script src="2.js"></script>
</html>

四、输出语句

    <script>
        alert('11');
    </script>
    <script>
        var myname=prompt('请输入您的名字')；
        alert(myname);
    </script>

五、JavaScript

1、js输出

<!DOCTYPE html>
<html>
<body>

<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

<script>
document.write(3 + 6);
</script>

<button onclick="document.write(5 + 6)">试一试</button>

<script>
window.alert(5 + 2);
</script>

</body>
</html>

2、js语句

JavaScript 语句由以下构成：值、运算符、表达式、关键词和注释。

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 语句</h2>

<p><b>JavaScript 程序</b> 是一系列由计算机执行的 <b>语句</b>。</p>

<p id="demo"></p>

<script>

var x, y, z;  // 语句 1
x = 22;        // 语句 2
y = 3;        // 语句 3
z = x - y;    // 语句 4

document.getElementById("demo").innerHTML =
"z 的值是" + z + "。";  

</script>

</body>
</html>

3、JS语法

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 字符串</h2>

<p>字符串可由双引号或单引号包围。</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Bill Gates";
</script>

<script>
var x;  //var来声明变量
x = 7;
</script>

<script>
var lastname, lastName，FirstName;
FirstName = "Bill";//JS对大小写敏感
lastName = "Gates";
lastname = "Jobs"
document.getElementById("demo").innerHTML = FirstName + lastName;
//表达式的值可以是字符串
</script>

</body>
</html>

4、Let 全局作用域和函数作用域

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 全局作用域</h1>

<p>可以从任何脚本或函数中访问全局变量。</p>

<p id="demo"></p>

<script>
var carName = "porsche";
myFunction();

function myFunction() {
    document.getElementById("demo").innerHTML =
    "I can display " + carName;
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 局部作用域</h1>

<p>myFunction() 之外的 carName 未定义。</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>
myFunction();

function myFunction() {
    var carName = "porsche";
    document.getElementById("demo1").innerHTML =
    typeof carName + " " + carName;
}

document.getElementById("demo2").innerHTML =
typeof carName;
</script>

</body>
</html>

5、Const

(1)无法更改原始值

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>您无法更改原始值。</p>

<p id="demo"></p>

<script>
try {
  const PI = 3.141592653589793;
  PI = 3.14;
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

（2）声明常量对象不会使对象属性不可更改

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>声明常量对象不会使对象属性不可更改：</p>

<p id="demo"></p>

<script>
// 创建对象：
const car = {type:"Porsche", model:"911", color:"white"};

// 更改属性：
car.color = "red";

// 添加属性：
car.owner = "Steve";

// 显示属性：
document.getElementById("demo").innerHTML = "车主是：" + car.owner; 
</script>

</body>
</html>

（3）不能重新赋值一个常量对象

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>但是你不能重新赋值一个常量对象：</p>

<p id="demo"></p>

<script>
try {
  const car = {type:"Porsche", model:"911", color:"white"};
  car = {type:"BMW", model:"M5", color:"red"};
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

（4）可以更改常量数组的元素

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>声明常量数组不会使元素不可更改：</p>

<p id="demo"></p>

<script>
// 创建数组：
const cars = ["Audi", "BMW", "Porsche"];

// 更改元素：
cars[0] = "Lucy";

// 添加元素：
cars.push("Honda");

// 显示数组：
document.getElementById("demo").innerHTML = cars; 
</script>

</body>
</html>

（5）无法重新为常量数组赋值

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>您无法重新赋值常量数组：</p>

<p id="demo"></p>

<script>
try {
  const cars = ["Saab", "Volvo", "BMW"];
  cars = ["Toyota", "Volvo", "Audi"];
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

（6）重新声明

var x = 2;    
var x = 3;    
x = 4;        
//在程序中的任何位置都允许重新声明 JavaScript var 变量


var x = 2;         // 允许
const x = 2;       // 不允许
{
  let x = 2;     // 允许
  const x = 2;   // 不允许
}
//在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 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;   // 允许
}
//在另外的作用域或块中重新声明 const 是允许的

（7）提升

carName = "Volvo";    // 可以在此处使用 carName
var carName;


carName = "Volvo";    // 不可以在此处使用 carName
const carName = "Volvo";

6、JavaScript 数据类型

<script>
var x = 911 + "Porsche";
document.getElementById("demo").innerHTML = x;
//当数值和字符串相加时，JavaScript 将把数值视作字符串
</script>

<script>
var x = 911 + 7 + "Porsche";
document.getElementById("demo").innerHTML = x;
</script>
<script>
var x = "Porsche" + 911 + 7;
document.getElementById("demo").innerHTML = x;
//从左向右计算表达式，不同的次序会产生不同的结果
</script>

<script>
var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值
document.getElementById("demo").innerHTML = x;
//JavaScript 拥有动态类型
</script>

7、JS函数

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 函数</h2>

<p>本例调用了一个执行计算的函数，然后返回结果：</p>

<p id="demo"></p>

<script>
var x = myFunction(7, 8);  // 调用函数，返回值被赋值给 x
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
    return a * b;  // 函数返回 a 和 b 的乘积
}
</script>

</body>
</html>

8、JS对象

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象创建</h1>

<p id="demo"></p>

<script>
// 创建对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>

</body>
</html>