JavaScript 10.25

1.1 JavaScript 简介


JavaScript 简称 js。 是一种浏览器脚本语言，给浏览器中的网页内容添加动态特效。
JavaScript和Java一点联系都没有。硬说有联系 就是JavaScript的名字是借鉴了java。
​
JavaScript核心： ECMAScript 语言基础   BOM操作   DOM操作   ES5  ES6  ES7
H5 :  HTML5  CSS3  ESMAS6
​
可以写服务器程序 写浏览器程序  写电脑程序 写操作系统 写U3D
​

1.2 JavaScript 的两种形式

1 页内样式
在head或者body中添加一个script标签，在标签里面写 js代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
        <script type="text/javascript">
            
        </script>
    </body>
</html>
注意 ： 建议大家在body的结束标签上面写script标签。 因为代码从上往下执行， 如果我们写到上面 会出现一种情况  就是js代码执行了 但是网页上面的标签还没有渲染，就会导致js失效。所以写到 body结束标签上面 就会规避这个问题。 要写到 head中，也可以 ，但是需要添加代码 window.onload=function(){}
​
2 页外样式
A 在 当前工程的 js文件夹中 创建一个 xxx.js文件 在文件中写js代码
B 在需要使用的html中 通过 script标签 添加src 进行引入（注意 css引入使用的是 link  页内用的是 style）
​
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
    </head>
    <body>
        
        
        
        <script src="js/haha.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
    
        
        </script>
    </body>
</html>
注意 ： 如果页内页外的都使用 此时需要创建多个 script标签 ，因为 一个script标签 一旦添加 src 就不能写页内代码了
​

 

1.3 变量

A 为什么需要使用变量？ ---  没有变量的时候 有什么问题？
​
假如 班主任 需要统计大家的信息
​
小明  18   小红 18  小李 18  小王 18 .... 一万个同学 今年都是18
到明年的时候 所有人的年龄都变成了 19
此时班主任老师 需要一个一个的改成19 需要改一万次。 这就是直接使用数据的结果
此时想了一个新的办法    a = 19
小明  a   小红 a  小李 a  小王 a .... 一万个同学 今年都是a   这就是一种间接的思想
到明年的时候 所有人的年龄都变成了 20
此时我们只需要将 a 改变成 20  改一次 所有人的年龄都变成 20 了。
此时 发现 a能代表数据 并且能根据需求进行改变 所以就将a 命名为 变量。
为什么需要使用变量的概念？  因为 体现编程中的  “间接”  思想。 以后写代码的时候 会发现 各种的间接操作。
​
B 什么是变量？   编程中用来存储数据的最小存储单元 就是 变量；
​
C 变量的声明
  我们在编程中 要使用变量 首先要将其创建出来 （怎么创造变量  不一样的编程语言 代码不一样）
​
<script type="text/javascript">             
    var  a = 666;
</script>
​
格式：  var  变量名  =  初始值;
​
var    在js中 创建变量的关键字 ，也就是说 当我们写完var  浏览器执行到这句代码的时候 它就清楚明白的直到 要为你创建一个变量
​
变量名  名字是我们自己起的。所以我们程序员自己起的名字 都有约定俗成，变量在命名的时候： 英文  有意义  小驼峰
       小驼峰就是 首字母小写 如果有多个单词 从第二个单词开始首字母大写 例如：  maxAge  getElementByClassName
​
=      赋值符号。代表是 将右边的运行结果 赋值给 左边。 代码执行 从上往下 从右往左。
       var  a = 12 + 30;  
初始值  就是变量在创建之处 存储的数据是什么。 初始值有很多中情况 与js的数据类型相关。
​
D 变量的应用
​
<script type="text/javascript">
            
            var  a = 6;
            
            /*    变量可以用来赋值  代表是 将当前变量的值赋值给其他变量  */
            /*    创建了一个变量 b  并且  将a的值 赋值给了 b */
            var  b =  a;
            
            /*  为什么叫做变量 是因为值能改变 如何改变呢？ 就是给变量 重新赋值   。  变量定义了以后 可以使用多次 */
            b = a+a;
            /*  变量其实就是一个代号   */
            b = a+b;
            
            
</script>
​
​
E 输出语句
​
    console.log(  b  );
            
            /* js功能代码  */
            alert(  b );
            confirm( b );
            prompt(  b );
            document.write(  b );
​
区分大小写。
​
F 错了怎么改
在浏览器控制台 看错误在哪里
​
Uncaught ReferenceError: c0nfirm is not defined             <anonymous> http://127.0.0.1:8848/day07-10.25/index.html:29
​
    

1.4 运算符

一目    ++  --
<script type="text/javascript">
            
            var  a = 8;
            
            a++;
            a--;
            
            document.write(  a );
            
</script>
​
​
二目：       +   -   *   /   % 取余    +=  -=   *=  /=     >  <  >= <=    == 等于 === 绝对等于  != 不等于  
<script type="text/javascript">     
            var  a = 8;
            var  b = 56;
            /* 代表  a 除以 b 的  余数 */
            var  c =  a%b;
            document.write(  c );           
</script>
​
<script type="text/javascript">
            
        var  a = 8;     
        a/=3;
        document.write(  a );
            
</script>
​
三目:        (条件表达式) ? (真) :(非真)
​
<script type="text/javascript">
            
            var  a = 8;
            var  b = 10;
            
            var  c =  (a<20) ?  (a<6?a+b:a-b) :  ( a*b );
            
            document.write(  c );
            
</script>
​
​

1.5 数据类型


不同的值 有着不同的数据类型
​
<script type="text/javascript">
            
            // number数字类型 
            var  a1 = 10;
            var  a2 = 20.5;
            
            // string字符串类型 
            var  b1 = "你好 世界";
            var  b2 = "你好 110";
            var  b3 = "20.5";
            var b4 = "true";
            
            // boolean布尔类型    表示逻辑判断的结果 true真  false 非真
            var c1 = true;
            var c2 = false;
            
            // object类型
            var d1 = null;
            
            // undefined 未定义类型
            var e;
            
            /* 输出变量的数据类型 */
            console.log(  typeof   a1 );
            
</script>

1.6 字符串拼接


运算符中 + 号 有两种运算形式：
​
A 数学相加运算
 如果参与运算的变量 全都是 number类型 则进行数学相加
​
B 字符串拼接运算
 如果参与运算的变量 有一个是字符串 则进行字符串拼接
​
​
    <script type="text/javascript">
            
            var  a = 10;
            var  b = "你好";
            
            var  c = a+b;
            
            console.log(  c );
            
        </script>
​
<script type="text/javascript">
        
            
            var  c = 10+10+10+"10";
            
            var  c1 = 10+"10"+10+10;
            
            var  c2 = 10+10+"10"+10;
            
            var  c3 = "10"+20+"10"+20;
            
            console.log(  c , c1 , c2, c3);
            
        </script>
​
​

1.7 字符串转数字


在  实际操作中 会出现一种情况  得到的内容是字符串类型  但是我们又希望进行数学相加。
​
所以我们需要将 字符串 转换成 数字类型  再相加。
<script type="text/javascript">
        
               /* 弹出一个框  用户进行输入   然后将用户输入的内容 赋值给  a */
               var  a = prompt("请输入一个数字");
               
               /* 弹出一个框  用户进行输入   然后将用户输入的内容 赋值给  b */
               var  b = prompt("请输入一个数字");
            
               /* parseInt() 取整转换 var  c =  parseInt(a) + parseInt( b); */
              /*   var  c =  parseFloat(a) + parseFloat( b); */
               var  c =  Number(a) + Number( b); 
               document.write(c);
            
</script>

 

posted @ 2021-10-25 19:31  吴光熠  阅读(57)  评论(0)    收藏  举报