JavaScript 基础

最新推荐文章于 2024-06-10 22:18:41 发布
最新推荐文章于 2024-06-10 22:18:41 发布
阅读量138 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69028584/article/details/124850361
版权

用法

JavaScript 可以通过不同的方法来输出数据

使用 console.long() 写入到浏览器的控制台

使用 document.write() 方法将内容写到HTML文件中

使用 innerHTML 写入到HTML元素

使用 window.alert() 弹出警告框

<!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>JavaScript 显示数据</title>
</head>
<body>
    <span id="msg"></span>
</body>
</html>
<script>
    // 写入到浏览器的控制台
    window.console.log('111')
    // 将内容写到HTML文件中
    window.document.write('222')
    // 写入到HTML元素
    // 1.找到元素
    // 2.写入到元素
    window.document.querySelector('#msg').innerHTML = '活着';
    // 弹出警告框
    window.alert('道生一 一生二')
</script>

弹窗

 

 变量与常量

<!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>变量与常量</title>
</head>
<body>
    
</body>
</html>
<script>
    // 变量声明
    let a;
    // 变量赋值
    a =10;
    window.document.write('a= ' + a + '<br>');
    // 变量声明并赋值
    let b=20;
    window.document.write('b= ' + b + '<br>');
    let c=30,d=40;
    window.document.write('c= ' + c + '<br>');
    window.document.write('d= ' + d + '<br>');
    let e,f =50;
    // e声明但没赋值
    window.document.write('e= ' + e + '<br>');
    window.document.write('f= ' + f + '<br>');
    let h;
    window.document.write('h= ' + h + '<br>');
    f = 60;
    window.document.write('f= ' + f + '<br>');
    window.document.write('<hr>');
    const j = 70;
    window.document.write('j= ' + j + '<br>');
    // Uncaught TypeError: Assignment to constant variable.
    // 常量是不能变值的
    j = 80;
</script>

 字符串

<!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>字符串</title>
</head>
<body>
    
</body>
</html>
<script>
    // 转义字符
    window.document.writeln('\'');
    window.document.writeln("\"");
    window.document.writeln("'");
    window.document.writeln('"');
    let a='我爱你';
    let b='我爱你吗';
    window.document.writeln(a+b);
    let slogan="我真的爱你";
    // 字符串拼接
    window.document.writeln("<br>slogan >>>" +slogan);
    // 字符串模板
    window.document.writeln(`<br>slogan >>> ${slogan}`);
</script>

 基本数据类型

<!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>基本数据类型</title>
</head>
<body>
    
</body>
</html>
<script>
    // number 数值型
    let a = 10;
    let b = 3.14;
    window.document.writeln('a 的数据类型 >>>'+typeof (a)+'<br>');
    window.document.writeln('b 的数据类型 >>>'+typeof (b)+'<br>');
    // string 字符串类型
    let c ='李';
    let slogan='嘿嘿嘿';
    window.document.writeln('c 的数据类型 >>>'+typeof (c)+'<br>');
    window.document.writeln('slogan 的数据类型 >>>'+typeof (slogan)+'<br>');
    // boolean 布尔类型 true false
    let d=true;
    let e=false;
    window.document.writeln('d 的数据类型 >>>'+typeof (d)+'<br>');
    window.document.writeln('e 的数据类型 >>>'+typeof (e)+'<br>');
    window.document.writeln('ture 的数据类型 >>>'+typeof (true)+'<br>');
    window.document.writeln('false 的数据类型 >>>'+typeof (false)+'<br>');
    // NaN Not an Number
    let result = 20/10;
    window.document.writeln('result 的数据类型 >>>'+typeof (result)+'<br>');
    let result01 = '李'/10;
    window.document.writeln('李/10'+ result01+ '<br>');
    window.document.writeln('李/10 的数据类型 >>>'+typeof (result01)+'<br>');
    // underfined 没有赋值的变量
    let f;
    window.document.writeln('f ='+ f+ '<br>');
    window.document.writeln('f的数据类型 >>>'+typeof (f)+'<br>');
</script>

 数学计算

<!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>数学计算</title>
</head>
<body>
    
</body>
</html>
<script>
    let a=10;
    let b=20;
    window.document.writeln('a + b ='+(a+b)+'<br>');
    window.document.writeln('a - b ='+(a-b)+'<br>');
    window.document.writeln('a * b ='+(a*b)+'<br>');
    window.document.writeln('a / b ='+(a/b)+'<br>');
    window.document.writeln('20 % 3 ='+(20 %3)+'<br>');
</script>

 逻辑运算符

<!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>逻辑运算符</title>
</head>
<body>
    
</body>
</html>
<script>
    let a = 10;
    let b = 10;
    // 值
    window.document.writeln("a == b >>>" + (a == b)+'<br>');
    // 内存地址
    window.document.writeln("a === b >>>" + (a === b)+'<br>');
    window.document.writeln("a != b >>>" + (a != b)+'<br>');
    let c = true;
    let d = false;
    window.document.writeln("ture == ture >>>" + (ture == flase)+'<br>');
    window.document.writeln("ture != flase >>>" + (ture == flase)+'<br>');
    window.document.writeln("ture != flase >>>" + (ture && flase)+'<br>');
    window.document.writeln("ture != flase >>>" + (ture || flase)+'<br>');
</script>

 选择结构

<script>
    // if(条件表达式){代码块}
    // 如果条件返回结果为true则执行代码块,如果条件返回结果为false则不执行代码块
    let flag = true;
    if (flag) {
        window.document.writeln('<h1>flag的值为true<h1>');
    }
    window.document.writeln('<h1>第一次判断结束<h1>');
    if (flag) {
        window.document.writeln('<h1>flag的值为true<h1>');
    } else {
        window.document.writeln('<h1>flag的值为false<h1>');
    }
    window.document.writeln('<hr>');
    let weekDay = 10 % 7;
    if (weekDay == 1) {
        window.document.writeln('今天是星期一');
    } else if (weekDay == 2) {
        window.document.writeln('今天是星期二');
    } else if (weekDay == 3) {
        window.document.writeln('今天是星期三');
    } else if (weekDay == 4) {
        window.document.writeln('今天是星期四');
    } else if (weekDay == 5) {
        window.document.writeln('今天是星期五');
    } else if (weekDay == 6) {
        window.document.writeln('今天是星期六');
    } else {
        window.document.writeln('今天是星期日');
    }
</script>

 分支结构

<!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>分支结构</title>
</head>
<body>
    
</body>
</html>
<script>
    let weekDay =10 %7;
    if (weekDay == 1){
        window.document.writeln('今天是星期一');
    }else if(weekDay == 2){
        window.document.writeln('今天是星期二');
    }else if(weekDay == 3){
        window.document.writeln('今天是星期三');
    }else if(weekDay == 4){
        window.document.writeln('今天是星期四');
    }else if(weekDay == 5){
        window.document.writeln('今天是星期五');
    }else if(weekDay == 6){
        window.document.writeln('今天是星期六');
    }else if(weekDay == 7){
        window.document.writeln('今天是星期日');
    }
</script>

 while循环

<!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>while循环</title>
</head>
<body>
    
</body>
</html>
<script>
    let count = 0;0
    while(count<10){
        window.document.writeln('1111<br>');
        count++;
    }
</script>

while循环 _break

<!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>while循环</title>
</head>
<body>
    
</body>
</html>
<script>
    let count = 0;0
    while(count<10){
        if(count==5){
            break;
        }
        window.document.writeln('1111<br>');
        count++;
    }
</script>

 while循环 _continue

<!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>while循环</title>
</head>
<body>
    
</body>
</html>
<script>
    let count = 0;
    while(count<10){
        if(count ++ % 2 == 0){
            continue;
        }
        // 2 4 6 8 10
        window.document.writeln(`第 ${count} 次说爱你<br>`);
        count++; // 可以不写
    }
    window.document.writeln(`<hr>`);
    let count01 = 0;
    while(count01<10){
        if(++count01 % 2 == 0){
            continue;
        }
        // 1 3 5 7 9
        window.document.writeln(`第 ${count01} 次说爱你<br>`);
        count++;
    }
</script>

 for循环

<!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>for循环</title>
</head>
<body>
    
</body>
</html>
<script>
    for(
        let index = 0;
        index<10;
        index++
    ){
        window.document.writeln(`第${index+1} 此说爱你<br>`)
    }
</script>

 for循环_break

<!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>for循环</title>
</head>
<body>
    
</body>
</html>
<script>
    for(let index = 0;index<10;index++){
    if(index ==5){
        break;
    }
    window.document.writeln(`第${index+1} 此说爱你<br>`)
}
</script>

 for循环_continue

<!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>for循环</title>
</head>
<body>
    
</body>
</html>
<script>
    for(let index = 0;index<10;index++){
    if(index %2==0){
        continue;
    }
    window.document.writeln(`第${index+1} 此说爱你<br>`)
}
</script>

 数组

<!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>数组</title>
</head>
<body>
    
</body>
</html>
<script>
    let arr0=['1','2','3'];
    window.console.log(arr0);
    window.console.log(arr0[0]);
    window.console.log(arr0[1]);
    window.console.log(arr0[2]);
    window.console.log(arr0[3]);
    arr0[3]='4';
    window.console.log(arr0[3]);
    window.console.log(arr0.length);
    window.console.log(arr0);
    window.console.log('******************************************************');
    for(let index = 0;index<arr0.length;index++){
        const element=arr0[index];
        window.console.log(element);
    }
    window.console.log('******************************************************');
    arr0.forEach(element => {
        window.console.log(element);
    });
    window.console.log('******************************************************');
    let arr1 = new Array(5);
    window.console.log(arr1);
    for(let index = 0;index<arr1.length;index++){
        arr1[index] = index*3;
    }
    window.console.log(arr1);
    window.console.log('******************************************************');
    let arr2 = new Array(5);
    window.console.log(arr1);
    for(let index = 0;index<arr2.length;index++){
        arr2[index] = index*5;
    }
    window.console.log(arr2);
    window.console.log('******************************************************');
</script>

 数组遍历

<!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>数组遍历</title>
</head>
<body>
    
</body>
</html>
<script>
    let array=['1','2','3'];
    for (let index = 0; index < array.length; index++) {
        const element = array[index];
        window.console.log(element);
    }
    window.console.log('********************************************************');
    array.forEach(element =>{
        window.console.log(element);
    });
    window.console.log('********************************************************');
    for(const index in array){
        window.console.log(index);
    }
    window.console.log('********************************************************');
    for(const index in array){
        window.console.log(array[index]);
    }
    window.console.log('********************************************************');
    for(const element in array){
        window.console.log(element);
    }
    window.console.log('********************************************************');
    window.console.log('********************************************************');
</script>

列表生成式

<!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>列表生成式</title>
</head>
<body>
    
</body>
</html>
<script>
    let nums = [0, 2, 5, 6, 8];
    let res01 = nums.every(num =>{
       return num % 2 == 0;
    });
    console.log(res01);
    let res02 = nums.filter(num => num % 2 == 0);
    console.log(res02);
    let res03 = nums.map(num => num * 2);
    console.log(res03);
    let res04 = nums.reduce((a, b) => a + b);
    console.log(res04);
    let res05 = nums.join('-');
    console.log(res05);
    let strs = ['李','四','七'];
    let res06 = strs.join('');
    console.log(res06);
    let times = [1983,11,22];
    let date = times.join('-');
    console.log(date);
</script>

 

 数组新增和删除元素

<!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>数组新增和删除元素</title>
</head>
<body>
    
</body>
</html>
<script>
    let array = ['java','python'];
    window.console.log(array);
    // 数组末尾追加元素
    array[array.length] = 'c#';
    window.console.log(array);
    array.push('php');
    window.console.log(array);
    // 在数组起始位插入
    array.unshift('scala');
    window.console.log(array);
    // 以弹栈的方式获取数组最大下标位置上的元素
    let a = array.pop();
    window.console.log(a);
    window.console.log(array);
    // 以弹栈的方式获取数组最小下标位置上的元素
    let b = array.shift();
    window.console.log(b);
    window.console.log(array);
</script>

 数组截取slice

<!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>数组截取slice</title>
</head>
<body>
    
</body>
</html>
<script>
    let array =[0,1,2,3,4,5,6,7,8,9];
    console.log(array);
    let newArr = array.slice(3,7);
    console.log(newArr);
    console.log(array);
</script>

 数组截取splice

<!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>数组截取splice</title>
</head>
<body>
    
</body>
</html>
<script>
    let array =[0,1,2,3,4,5,6,7,8,9];
    console.log(array);
    let newArr = array.splice(3,2);
    console.log(newArr);
    console.log(array);
    newArr = array.splice(3,2,'李','4');
    console.log(newArr);
    console.log(array);
</script>

 

weixin_69028584
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
九个Console命令，让js调试更简单
weixin_30448685的博客
09-25 278
一、显示信息的命令 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; c...
浏览器控制台（console对象）
Jmark
04-05 9856
目录 开发者工具 console对象 console.log方法 其他输出方法：debug，info，warn，error方法 console.table方法 console.assert方法 time和timeEnd方法 分组方法：group和groupend 其他方法 命令行API debugger语句 移动端开发 模拟手机视口（viewport） 模拟
console.log()用法
lsh15846393847的博客
08-25 3万+
对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式。 原因在于：alert()函数会阻断JavaScript程序的执行 lert弹出框需要点击确认比较麻烦，而console.log()仅在控制台中打印相关信息。 alert只能输出字符串，不能输出对象里面的结构，console.log()console.log()可以接受任何字符串、数字和...
Javascript的console.log()用法
weixin_30751947的博客
03-17 161
//变量var i = 'I am a string';console.log('变量：',i);//数组var arr = [1,2,3,4,5];console.log('数组：',arr);//对象var obj1 = {key1 : 'value1',key2 : 'value2',key3 : 'value3'};var obj2 = {key6 : 'value4',key5 ...
JavaScript调试技巧之console.log()详解--2015-08-07
weixin_30325793的博客
08-07 86
对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断 JavaScript程序的执行，从而造成副作用；而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑 一、什么是console.log()？除了一些很老版本的浏览器，现今大多数浏览器都自带调试功能； 即使没有调试功能，也可以通过安...
JavaScript基础
02-24
JavaScript基础 模块挑战是学生独立完成的下午项目或作业。 这是在先前由讲师完成的指导项目的基础上扩展的。 高级CSS和JavaScript JavaScript基础 目标 使用let，const，var并演示它们之间的差异。 了解并能够使用...
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
Javascript基础
02-26
Javascript基础
后端返回的数据与前端console.log数据不一致问题
StoneVivi的博客
03-30 3759
后端返回的数据与前端console.log数据不一致问题 在项目中偶尔会遇到后端返回的一大串数字，类似于订单编号（orderId），券ID（couponId）等等。有时候这些数字远超过十位、八位什么的；可能会有二十几位的一串数字。前端一般拿到数据是后面几位都是0。 一般这种情况是，精度丢失 精度丢失多出现于，后端使用的字段类型的精度与前端不一样。 前段时间遇到的couponId有十九位长的数字。前...
Chrome 控制台console的用法（学了之后对于调试js可是大大有用的哦）
11-23 6707
大家都有用过各种类型的浏览器，每种浏览器都有自己的特色，本人拙见，在我用过的浏览器当中，我是最喜欢Chrome的，因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解，心里难免会想调试的时候用alert不就行了，干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢，下面我就介绍一些调试的入门技巧，让你爱上co
Chrome 控制台console的用法
qingfeng2556的博客
04-23 1040
 Chrome 控制台console的用法 下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。 目前控制台方法和属性有： ["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspec
console的高级用法，console.log带颜色的字
djl的专栏，blog.djl.cx好记
11-08 4万+
先展示效果图： &lt;!-- /** * @Author: Ding Jianlong * @Date: 2018-11-08 14:37:05 * @Last Modified by: Ding Jianlong * @Last Modified time: 2018-11-08 17:14:05 */ --&gt; &lt;!DOCTYPE html&gt; &...
console.dir()和console.log()的区别
热门推荐
manyangyangya的专栏
04-03 5万+
console.log()可以取代alert()或document.write()，在网页脚本中使用console.log(data)时，会在控制台打印出数据。 console.dir()可以显示一个对象所有的属性和方法。
console.log()的使用
一个有梦想的年轻人
10-09 2万+
通常情况下，很多人会用alert（）进行调试，这样通常很麻烦，很多浏览器自带一个console，可以看到一些信息，下面为一个HTML的实例                                        console.log(xx.inTxt.value);     用某个浏览器打开这个HTML文件，按下F12，就
JavaScript 1 （转）
weixin_33762130的博客
08-03 135
JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 JavaScript web 开发人员必须学习的 3 门语言中的一门： HTML定义了网页的内容 CSS描述了网页的布局 JavaScript网页的行为 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记...
JavaScript 使用（笔试题）、输出、调试、事件、JS获取和修改页面元素
qq_52301431的博客
04-20 2240
一、JavaScript 使用 在Web应用程序中，JavaScript是HTML文档的一部分，它是依托 HTML 而存在的。也就是说，必须把脚本的代码放在HTML文档中，否则它无法运行。JavaScript 程序可以用任何文本编辑器来编写。 1. 行级 给标签设置对应的属性，属性值是要执行的JavaScript代码。 <a href="javaScript:alert('你已经领取过了')">领取奖品</a> ​ <input type="button" v..
JavaScript基础【笔记】
covenats的博客
06-28 363
万字JavaScript笔记
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 316
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1189
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值