JavaWEB笔记06 Javascript入门

最新推荐文章于 2024-04-28 19:08:55 发布

RainOnTheMoon

最新推荐文章于 2024-04-28 19:08:55 发布

阅读量117

点赞数

分类专栏：笔记文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_46702804/article/details/119207890

版权

笔记专栏收录该内容

35 篇文章 1 订阅

订阅专栏

JavaWEB笔记06 Javascript入门

文章目录

JavaWEB笔记06 Javascript入门

一.JS的由来：

1） JavaScript:简称JS,是一门客户端（浏览器）脚本语言，可以跟HTML，CSS 制作出更加丰富的网页效果，以及可以跟后台进行数据的交互，用来提高用户的上网体验，后来由于Node.js的出现，JavaScript可以做后台服务
2）JS发展历史：西方90年代，上网刚刚兴起，那时的网速很慢，好比我们现在的2G网速。比如一个人要去论坛，发帖，看帖，他先要注册个论坛会员，当他填好用户名和密码，点击注册按钮，因为那时网速很慢，要等半天后台处理完，再响应回来，告诉你结果。等了很长时间，发现后台响应的是，你的用户名规则不正确，用户的上网体验就特别差，有人就想，那能不能对数据格式规则的校验，放在前台校验，不需要发送到后台校验，有一家公司叫做 Nombas 公司，他开发一个语言叫做 C-- 写出脚本程序，用在浏览器中，可以实现这种效果。当时有一家公司叫做网景公司，做浏览器的。他也有了这个思想，所以他们很快就写出了这个脚本语言 LiveScript。用在他们的网景浏览器中，为了更加完善这个脚本语言，他们找到SUN 公司合作继续完善LiveScript。后正式改名JavaScript ，网景浏览器大卖。微软这个时候也进军浏览器市场，推出IE浏览器，为了提供用户的上网体验，也出了一套脚本语言 JScript。这个时候，各大浏览器厂商，觉得需要一个客户端脚本语言的规范，所以他们都找到 ECMA （欧洲计算机协会）。让他制定出客户端脚本语言的规范，ECMA 他其实就照搬了 JavaScript再加入DOM BOM 制定出了这个规范，叫做ECMAScript
3）脚本语言：不需要编译，浏览器直接解析执行
4）现在网速快了，在规则校验时为了安全使用前台后台双校验，而原先的前台校验仅为了提高用户体验
5）浏览器的内核：渲染引擎，JS引擎

二.JS基本语法：

JS由浏览器内核中的JS引擎进行解析执行的，HTML/CSS是由内核中的渲染引擎进行解析渲染的，其中JS的基本语法就牵扯到JS与html的结合：
JS与HTML进行结合的方式：

1）内联方式：将JS代码写在HTML内部，不太方便不推荐
eg: <button type="button",onclick="alert('hello')">点我</button>
在点击按钮的时候会出现对应的窗口弹框
2）内部方式：比较常用，在head标签内部提供一对script标签，在script标签中书写JS代码:
eg: <script type="text/javascript">alert("hehe");</script>
这对script标签可以放到任意地方，但是不同的地方作用不同
3）外部方式：开发首选，将JS代码单独写在一个文件中，让HTML页面进行引用
eg.在js文件夹下添加文件public.js页面引用时选用: <script src="js/public.js" type="text/javascript" charset="utf-8"></script>

三.JS原生数据类型：

JS类比JAVA有基本数据类型和引用数据类型，JS中的数据类型有以下两种：原生数据类型和引用数据类（对象）

原生数据类型：5种
1）数字型（整数，小数）Number
2）（字符和字符串）String
3）（布尔类型）boolean
4）undefined
5）none

JS是一门弱类型语言，在定义变量时，数据类型全部用var
JS定义变量的语法，使用关键字var进行定义
JS中对于String类型可以定义字符和字符串，因此在定义时单引号双引号都可以
使用typeof可以对于数据类型进行查看：typeof+变量名
null使用typeof查看时会显示Object，null在JS中被认为是对象占位符，因此是object类型

四.JS语句语法：

for/if/while/switch/do…while语法同java中相同
使用循环时注意不是int i =0; 而是var i =0; JS中循环内部可以省略分号
输出到页面上：var num=100; document.write(num);
上面的语句可以将数据输出到页面上，可以输出一般的数据，即：html，js中的相关数据：
1）document.write("<hr>")会识别对应的html并会显示一条分界线
2）document.write("<font size='7' color='red>"+num+"</font>")实际上的效果与标签效果相同
3）注意外面单引里面双引或外面单引里面双引，以避免拼出串

五.案例：打印九九乘法表：

代码示例：

1）打印九九乘法表：
    <script type="text/javascript">
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i ; j++) {
                document.write(j+"*"+i+"="+(i*j)+"\t")
            }
            document.write("<br>")
        }
    </script>
2）输出到控制台：
   var num=0;
        num+=20;
        //输出数据到控制台
        console.log(num);

对应效果：
在这里插入图片描述

六.JS中的运算符：

一元运算符：+ - ++ –
1）++和–与JAVA中一样，都遵循放后面先使用后运算，放前面先运算后使用
2）JS中有自动类型转换，当运算符想要的数据类型和期望的不同就会尝试转换
3）字符串字面上是有效数字时就会转成数字，如果不是就会转NaN
算数运算符：+ - * / %
1）针对空串进行操作，空串出始转0
2）boolean型转数字存在true转1，false转0
3）两个串的字面都为数字时使用+只会将两个串进行拼接不会运算
4）NaN和undefined的各种操作结果都是NaN
比较运算符：> < >= <= != == ===
1）NaN参与比较运算结果都是false，除了!=运算
2）==会自动发生类型转换，即var=100和var="100"运算结果相同
3）===会先比较数据类型，如果数据类型不一致就直接false，如果数据类型相等再比较内容
逻辑运算符： && !! ！
1）字符串在使用！时进行转换时非空串转true，空串转false
2）数字类型转布尔：非0转true，0转false
3）NaN和undefined都会转false
4）对象转换布尔：null转成false，对象不为null转成true
三元运算符和赋值运算符不再赘述