day11——JavaScript简介

蔚落 2021-11-17 13:42 264阅读 0赞

##### 一、javascript:脚本式语言 #####

1.  第一次听到js就在想它跟java到底有什么区别，查了一些资料后发现虽然名字相似但是本质上是不同的

*  JavaScript是在网页中使用，而java可以在手机、app、软件、网页等各个领域使用
 *  从本质上讲，java是一门面向对象的语言，而js是脚本式语言，更像是一门函数式编程语言

1.  加入了javascript特效的页面不一定就是动态页面，动态页面和静态页面的区别是**是否与服务器进行数据交互**
2.  是前端的网页交互代码 ，在网页中加入特效 ，可以应用于数据交互 数据展示 调用API —程序应用集 百度地图 数据图表 等等

##### 二、3种引入方式 #####

1.  内部JavaScript  
    可以写在head或body中，一般在前者中引入，之所以称为内部，指的是把HTML代码和JavaScript代码放在同一个文件中  
    `<script> alert(“welcome!”)</script>`//这里用到的alert为警告弹框  
    完整形式为

1.  链接外部js文件  
    同样可以写在head或body中，外部引入是指把HTML代码和JavaScript代码放在不同文件中，在html文档中用script标签引入

外部引入是最理想的引入方式，在实际开发中为了维护网站性能和可维护性都采用外部引入

与css文件的区别  
a) 使用的标签不同，css中使用link链接，而js通过script标签引入  
b) css只能在头部head引入，而js既可以在头部head引入，又可以在body中引入

##### 三、基本知识 #####

1.  三大模块：基础知识，DOM：文档对象类型,BOM：浏览器对象类型
2.  所有符号必须为英文状态  
    输出：  
    1> alert弹框输出  
    ![在这里插入图片描述][20190730233715741.png]  
    2> 在页面中输出：`document.write()`  
    ![在这里插入图片描述][20190730233814411.png]  
    3> 带确认取消的弹框输出：`confirm(“hello”)`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]  
    输入：  
    `prompt(“请输入年龄”，“20”)`//弹框输出  
    调用格式：`prompt(“提示信息”，“初始化值”)`
3.  完整表达：初始化变量，赋值，

var age= prompt(“请输入年龄”，“20”);

1.  `document.write(“您输入的年龄是+age”)`//+在这里为连接符
2.  初始化变量：var x;（数字，字符串，数组，对象，函数）  
    **和其他语言不同的是js中的所有变量都是由var声明的**
3.  \+的用法：连接符或运算符
4.  注释：//单行注释；/*多行注释*/
5.  查看数据类型：`alert(typeof (变量名));`  
    字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）  
    举例：
    
    数字 20  
    字符串 “welcome” “20”  
    数组 \[12,23,50\]  
    对象 \{name:“zhangsan”,sex:“男”,age:20\}

**字符串**：可以一对单引号括起来，也可以一对双引号，也可以双引号里嵌套单引号，同理也可以单引号里嵌套双引号调用

1.  默认在文本框中输入的为字符类型，用parseInt可转换为整型；  
    **类型转换**：

<table> 
 <thead> 
  <tr> 
   <th>Number()</th> 
   <th>将任何“数字型字符串”转换为数字，数字型字符串包括“123”“13.345” 等，但不包括“hao123”,“50px”等</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>parseInt()</td> 
   <td>提取首字母为数字的任意字符串中的数字，提取整数部分</td> 
  </tr> 
  <tr> 
   <td>parseFloat()</td> 
   <td>提取首字母为数字的任意字符串中的数字，提取整数部分和小数部分</td> 
  </tr> 
 </tbody> 
</table>

对于parseInt()和parseFloat()来说如果第一个字符是+或-同样可以解析，被认为是正负号

1.  从文本框中提取数据  
    a) 通过id提取文本框中的内容  
    document.getElementById(“id名”).value  
    b) 把数值赋值 给文本框中  
    document.getElementByID(“result”).value=值；  
    eg:简易计算器.html

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>运算器</title>
    </head>
    <body>
    <p>数1：<input type="text" id="num1" value="12"/></p>
    <p>数2：<input type="text" id="num2" value="30"/></p>
    <p>
        <input type="button" value="+" onclick="sum()"/>
        <input type="button" value="-"  onclick="sub()"/>
        <input type="button" value="*" onclick="mul()"/>
        <input type="button" value="/" onclick="chu()"/>
    </p>
    <p>结果为：<input type="text" id="result"/></p>
    <script>
        function sum(){
       var num1,num2,result;
        num1=parseInt(document.getElementById("num1").value);
        num2=parseInt(document.getElementById("num2").value);
        result=num1+num2;
        document.getElementById("result").value=result;
        }
        function sub(){
            var num1,num2,result;
            num1=parseInt(document.getElementById("num1").value);
            num2=parseInt(document.getElementById("num2").value);
            result=num1-num2;
            document.getElementById("result").value=result;
        }
        function mul(){
            var num1,num2,result;
            num1=parseInt(document.getElementById("num1").value);
            num2=parseInt(document.getElementById("num2").value);
            result=num1*num2;
            document.getElementById("result").value=result;
        }
        function chu(){
            var num1,num2,result;
            num1=parseInt(document.getElementById("num1").value);
            num2=parseInt(document.getElementById("num2").value);
            result=num1/num2;
            document.getElementById("result").value=result;
        }
    </script>
    </body>
    </html>

1.  onclick:触发事件，input中的一个属性，触发后调用函数显示结果
2.  console.log();控制台程序，f12或者右键检查网页打开，可以显示数据，输入数据等，换行为shift+回车，source添加断点后可以调试
3.  浏览器解析HTML文本时从上至下解析，遇到函数时会跳过，到调用函数时才执行

[20190730233715741.png]: /images/20211116/86dce5a0ddde44dfb43b11613cb05e47.png
[20190730233814411.png]: /images/20211116/00502ace0c4b49e49b197390e35cea6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20211116/d0dae5b10ffe4dd8b5bbc0fb61ac4941.png