day11——JavaScript简介

最新推荐文章于 2022-11-22 14:23:14 发布

ice_bear-

最新推荐文章于 2022-11-22 14:23:14 发布

阅读量135

点赞数 1

分类专栏： web前端开发

本文链接：https://blog.csdn.net/qq_42701999/article/details/97831772

版权

web前端开发专栏收录该内容

49 篇文章 1 订阅

订阅专栏

一、javascript:脚本式语言

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

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

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

二、3种引入方式

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

<script type="text/javascript"> 
alert(“welcome!”)
</script>`

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

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

<script src=”链接地址”>这里不写内容！</script>

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

三、基本知识

三大模块：基础知识，DOM：文档对象类型,BOM：浏览器对象类型
所有符号必须为英文状态
输出：
1> alert弹框输出

2> 在页面中输出：document.write()

3> 带确认取消的弹框输出：confirm(“hello”)

输入：
prompt(“请输入年龄”，“20”)//弹框输出
调用格式：prompt(“提示信息”，“初始化值”)
完整表达：初始化变量，赋值，

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

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

数字 20
字符串 “welcome” “20”
数组 [12,23,50]
对象 {name:“zhangsan”,sex:“男”,age:20}

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

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

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

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

从文本框中提取数据
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>