JavaScript基础Ⅰ

最新推荐文章于 2024-07-09 18:13:44 发布

你好鸭达可

最新推荐文章于 2024-07-09 18:13:44 发布

阅读量710

点赞数 24

分类专栏：三剑客~ 文章标签： javascript 开发语言 ecmascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_59528719/article/details/136513306

版权

三剑客~ 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

目录

第1章 JavaScript概述(了解)

02-JS简介(了解)

第2章 JavaScript基础语法(掌握)

03-JS两种引入方式

04-JS三种输出方式

05-JS变量声明

06-JS数据类型

算术运算符

赋值运算符

比较运算符

逻辑运算符

08-JS流程控制语句

10-案例:九九乘法表

第1章 JavaScript概述(了解)

02-JS简介(了解)

JS作用

用于完成页面与用户的交互功能.

JS发展历史

JS之父布兰登·艾奇（Brendan Eich) 在1995年用一周时间发明了JavaScript.

欧洲计算机制造联合会(ECMA)在1997年制定了ECMA Script1.

后来2009年发布了ECMA Script5(es5), 在2015年又推出了ECMA Script2015(es6)

现在所有浏览器都支持ES6.

JS的特点

JS模仿Java发明的,所以和Java非常相似.列举不同点

1.JS不需要编译,由浏览器直接解释执行.

2.JS是弱类型语言. JS声明变量时不需要指明类型,不同类型的数据可以赋值给同一个变量.

JS组成

ECMA Script 语法 : JS基础语法

BOM(Brower Object Model): 浏览器对象模型

DOM (Document Object Model): 页面对象模型

第2章 JavaScript基础语法(掌握)

03-JS两种引入方式

内部脚本
外部脚本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>03-JS两种引入方式</title>

</head>
<body>
<!--
JS两种引入方式
    JS和CSS一样都需要引入到html页面中,浏览器才会解释执行
    JS有两种引入方式
        1. 内嵌(内部)脚本:在script标签中写js代码,
            script标签推荐放置在body标签的底部,理论上和style标签一样可以放置位置任意.
        2. 外部脚本: 使用script标签的src属性引入外部js文件,使用注意事项:
            (没有内容还不能自闭合):
            script标签使用了src属性以后内部的代码不再被浏览器解释执行(了解).
            script引入外部脚本时不能使用自闭合格式(警告!!!).

-->
<!--告诉浏览器解析器切换为JS解析器 type="text/javascript" 可以省略-->
<script type="text/javascript">
    document.write("<h1>1. 内嵌(内部)脚本</h1>");//向body中追加html内容
</script>

<script src="../js/外部脚本.js"></script>




</body>
</html>

04-JS三种输出方式

1. 输出html内容到页面
2. 浏览器弹框输出字符
3. 输出到浏览器控制台

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>04-JS三种输出方式</title>
</head>
<body>
<!-- 
JS三种输出方式
	1. 输出html内容到页面
	2. 浏览器弹框输出字符
	3. 输出到浏览器控制台
 -->

<script >
    //1. 输出html内容到页面
   document.write("<h1>1. 输出html内容到页面</h1>");//向body中追加html内容
    //2. 浏览器弹框输出字符
//    window.alert("2. 浏览器弹框输出字符");
    alert("2. 浏览器弹框输出字符");//阻塞执行
    //3. 输出到浏览器控制台
    console.log("3. 输出到浏览器控制台");//开发者专用
</script>
</body>
</html>

05-JS变量声明

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>05-JS变量声明</title>
</head>
<body>
<!--
JS变量 是用来存放数据
    es5以前变量声明使用var(了解)
    es6之后变量声明使用let 常量声明使用const 他们用于替代var声明方式
    
    JS是弱类型语言(理解):
        声明变量时不知道变量的类型(undefined),只有在赋值之后js变量才确定类型.
        typeof() 输出变量的类型 格式: typeof(m) 或 typeof m
        undefined 变量未赋值,未知类型
-->
<script >
    //字符串 Java声明 String str ="张三";
    let str ="张三";
    console.log(str);
    console.log(typeof str);
    //整数  Java声明 int k = 5;
    let k = 5;
    console.log(k);
    console.log(typeof k);
    //小数 Java声明 float f = 7.5;
    let f = 7.5;
    console.log(f);
    console.log(typeof f);
    //常量 Java声明 final Integer PI = 3.14;
    const PI = 3.14;
    console.log(PI);
    console.log(typeof PI);
//    PI = 5.67;//报错: Assignment to constant variable. 赋值给常量
    //演示弱类型语言
    let m;
    console.log(m);//undefined 值是未赋值
    console.log(typeof m); //undefined 类型是未赋值类型
    m = "您好";
    console.log(m);
    console.log(typeof m); //string
    m = true;
    console.log(m);
    console.log(typeof m); //boolean
</script>
</body>
</html>

06-JS数据类型

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>06-JS数据类型</title>
</head>
<body>
<!--
JS数据类型
    常用数据类型
        1. string 字符串类型
        2. number 数字 包括整数和小数类型
        3. boolean 布尔类型 值只有 true和false 两个
        4. object 对象类型 空对象使用 null表示
                有两种格式(了解)
                    Object格式 例如 new Object();
                    JSON格式 例如 {name:"张三",age:18}
        5. undefined 变量未赋值
-->
<script >
    //1. string 字符串
    let str = "您好";
    console.log(str);
    console.log(typeof str);//string
    //2. number 数字
    let n = 12.34;
    console.log(n);
    console.log(typeof n);//number
    //3. boolean 布尔类型
    let boo = true;
    console.log(boo);
    console.log(typeof boo);//boolean
    //4. object 对象类型 空对象使用 null表示
    let obj = new Object();
    console.log(obj);//{}
    console.log(typeof obj);//object
    let object = null
    console.log(object);//null
    console.log(typeof object);//object

    //5. undefined 变量未赋值
    let u = undefined;
    console.log(u);//undefined;
    console.log(typeof u);//undefined


    //JS数组 很类似与java的集合
    let arr = ["中国",666,true,null,undefined];
    console.log(arr);
    console.log(typeof arr);//object


    //Object的两种格式
    let stu = new Object();
    stu.name = "索一凡";
    stu.age = 18;
    stu.sex = "女";
    console.log(stu);//{name: "索一凡", age: 18, sex: "女"}
    console.log(typeof stu);
    //JSON(JavaScript Object Notation)js对象符号,js对象的表示形式
    //格式: {属性:值,属性:值,属性:值}
    let person = {name:"王磊",age:250,sex:"男"};
    console.log(person);//{name:"王磊",age:250,sex:"男"}
    console.log(typeof person);

    //    JS对象取属性值有两种方式:
	//1. obj.key
    console.log(stu.name);
    // let buzhidao11 = "sex";
    // console.log(stu.buzhidao11);
    //2. obj["key"]
    console.log(person["name"]);
    let buzhidao = "sex";
    console.log(person[buzhidao]);


</script>
</body>
</html>

07-JS运算符

算术运算符

赋值运算符

比较运算符

逻辑运算符

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>07-JS运算符</title>
</head>
<body>
<!--
JS运算符
    因为JS是参照Java而设计的语言,所以js运算符和Java运算符基本相同
    只有一个特殊的比较运算符
    === 判断js变量的值和类型都相等才为true
    !== 判断js变量的值和类型有一个不等就为true
-->

<script >
    let a = 3;
    let b = "3";
    console.log(a == b );//true
    //全等 运算符 ===
    console.log(a === b );//false
    //不全等 运算符 !==
    console.log(a !== b );//true
    // 三元(三目)运算符  布尔表达式?真:假
    let res = a === b ?"全等":"不全等"; //不全等
    console.log(res);

</script>
</body>
</html>

08-JS流程控制语句

条件语句

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>08-条件语句</title>
</head>
<body>
<!--
条件语句
    JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别
    JS中对各种数据类型作为布尔值的特点:(重点掌握)
        1. string 空字符串""为false,其余都为true
        2. number 数字 只有0为false,其余数字都为true
        3. boolean 布尔类型 值只有 true和false 两个
        4. object 对象类型 空对象null表示false,其它对象都是true
        5. undefined 变量未赋值 为false
    常用语法格式
        if ... else if ... else
        switch case break default

-->
<script >
    //if ... else if ... else
    //	if(""){
    //	if(null){
    if(undefined){
        console.log("满足if");
    }else {
        console.log("假 其它情况");
    }

    //switch case break default
    let k = 1;
    switch (k) {
        case 1:
            console.log(111);break;
        case 2:
            console.log(222);break;
        default:
            console.log(666);
    }

</script>
</body>
</html>

循环语句

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>09-循环语句</title>
</head>
<body>
<!--
循环语句
    while 和Java一样
    do while 和Java一样
    (重点掌握:)
    fori 和Java一样
    forin 1.遍历出数组中的索引 2.遍历出对象中的属性名key
    forof 1.遍历出数据中的元素

重点记忆点:
    forin 与 forof 区别:
        1.forin可以遍历对象,forof不能遍历对象
        2.forin遍历出数组中的索引,forof遍历出数组中的元素

-->
<script >
    //while 和Java一样
	let k = 0;
	while(k<3){
        console.log(k++);
    }
    //do while 和Java一样
    k = 0;
    do{
        console.log(k++);
    }while(k<3)
	
    //fori 和Java一样
    for(let i=0;i<3;i++){
        console.log(i);
    }
    // forin 可以遍历数组和对象
	let arr = ["刘一","陈二","张三"];//JS数组使用中括号[]定义
	let stu = {id:5,name:"李四",age:18};//JS对象使用大括号定义
	//forin  1.遍历出数组中的索引
    for(let index in arr){
        console.log(index);//数组索引
        console.log(arr[index]);//数组元素
    }
    //forin  2.遍历出对象中的属性名key
    for(let key in stu){
        console.log(key);//对象属性
        console.log(stu[key]);//对象的属性值
    }
	
    //forof 1.遍历出数组中的元素
    for(let e of arr){
        console.log(e);//数组中的元素
    }
</script>
</body>
</html>

10-案例:九九乘法表

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>10-案例-九九乘法表</title>
    <style>
        table {
            border-collapse: collapse; /*边框合并*/
        }
        td{
            padding: 5px;/*填充 5像素*/
        }
    </style>
</head>
<body>



<script>
    document.write("<table border='1' align='center'>");
    document.write("<caption>九九乘法表</caption>");

    for(let i=1;i<=9;i++){//生成行tr
        document.write("<tr>");

        for(let j=1;j<=i;j++){//生成列td
            document.write("<td>"+j+"&times;"+i+"="+(j*i)+"</td>");
        }

        document.write("</tr>");
    }

    document.write("</table>");

</script>
</body>
</html>

更多内容敬候 JavaScript基础Ⅱ

欢迎大家指点评论~ 点赞+关注⭐⭐⭐

你好鸭达可

关注

24
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JavaScript基础Ⅰ

JS之父布兰登·艾奇（Brendan Eich) 在1995年用一周时间发明了JavaScript.欧洲计算机制造联合会(ECMA)在1997年制定了ECMA Script1.后来2009年发布了ECMA Script5(es5), 在2015年又推出了ECMA Script2015(es6)现在所有浏览器都支持ES6.
复制链接

扫一扫

专栏目录

你好鸭达可 CSDN认证博客专家 CSDN认证企业博客

码龄3年

36: 原创

114万+: 周排名

7万+: 总排名

2万+: 访问

: 等级

890: 积分

415: 粉丝

524: 获赞

21: 评论

383: 收藏

私信

关注

热门文章

分类专栏

三剑客~ 12篇
Java 8篇
数据库 1篇
ssm 4篇
Linux 1篇
Vue 5篇
SpringBoot 2篇
Ajax 3篇
SpringCloud

最新评论

vue-video-player视频播放器配置详解
qq_49499161: 请问下你那字幕是怎么配置上去的?
JavaScript高级Ⅰ(全面版)
你好鸭达可: 点赞关注便是我的动力！！！！！！！！
JavaScript基础Ⅱ
你好鸭达可: damn~
JavaScript基础Ⅰ
你好鸭达可: 下文的链接https://blog.csdn.net/weixin_59528719/article/details/136527076
Linux基础命令
CSDN-Ada助手: 恭喜用户写下了第19篇博客“Linux基础命令”！看来您对Linux系统有着深厚的了解和热情啊。希望您能继续坚持创作，分享更多有关Linux的知识和经验。或许下一步可以考虑写一些高级进阶的Linux命令或者实用技巧，让读者能够更深入地了解这个系统。期待您的下一篇博客！

大家在看

最新文章

目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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