网站建设学习（九）——JavaScript基础语法（上）

最新推荐文章于 2024-08-24 11:15:50 发布

QJM1995

最新推荐文章于 2024-08-24 11:15:50 发布

阅读量321

点赞数

文章标签： html JavaScript 网站教程

本文链接：https://blog.csdn.net/QJM1995/article/details/86619038

版权

html作为骨架，css作为装饰，网页页面可以进行建设，但是当网站与用户交互时，就需要一种脚本语言进行沟通，既提升了用户体验，同时也减少了服务器端压力，接下来介绍的第三门语言为JavaScript，一种脚本语言，作为语言方法及操作众多，文章会分为几部分进行介绍，同时也会在文章末给出js的参考链接。在执行本篇代码前，依旧需要在html同文件夹下建立一个js基础语法.js文件。

html：

<html>
<!--  标签html：内部包含整个HTML页面，所有的设计均在当前的html标签内部进行-->
    <head>
    <!--整个文件的头部，里面包括一些属性供浏览器识别解析，对用户不可见-->

        <title>标题</title>
        <!--标签title，说明整个页面的标题，最终显示在浏览器加载页面的标签页-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!--告诉浏览器以utf-8的码表进行解码，防止中文乱码，meta标签是无标签体标签，结束在开始标签后加反斜杠，即空标签-->

        <meta name="keywords" content="html,展示"/>
        <!--展示此网页的关键词，供搜索引擎使用，以“,”分开，其中关键词个数为权重，越多权重越低，一般为3到5个-->

        <meta name="description" content="html编程学习"/>
        <!--网页描述，展示在搜索引擎的网页的索引页面-->

        <script src="js基础语言.js"></script>
        <!--引入js文件-->

    </head>


    <body>
    <!--整个文件的体，设计元素在这个部分中，最终展示给用户-->

    </body>
</html>

js基础语法.js：

//js，即javascript，前部分介绍了html与css语言，html作为总架构，css作为装饰
//JavaScript则作为与用户交互语言，在服务器端进行一些操作
//js语法体系分为EMCA基础语法（已统一），BOM与DOM编程（未完全统一）

/*
    常用函数：alert("")//提示框效果
             document.write("")//向html页面中输出内容

    js引用方式有两种，第一种使用<script type="text/javascript"></script>标签引用，
    第二种是外部调用，使用<script src="js文件路径"></script>导入js文件
*/

var a = 10;
var b = 3.14;
var c = false;
var d = 'a';
var e = "10";
var f = new Object();

document.write(a+"；类型："+typeof(a)+"<br/>");
document.write(b+"；类型："+typeof(b)+"<br/>");
document.write(c+"；类型："+typeof(c)+"<br/>");
document.write(d+"；类型："+typeof(d)+"<br/>");
document.write(e+"；类型："+typeof(e)+"<br/>");
document.write(f+"；类型："+typeof(f)+"<br/>");

/*js有四种数据类型：number boolean string object 但都用var定义 */

//类型转换函数 字符串到整数：parseInt();
//            字符串到小数：parseFloat();//表单接收的都是string类型，比较时number与string可以自动转换
//运算符与流程控制与java语法相同，这里不予以介绍
/*
swtich(){
    case 选项:
        执行;
        break;
    case 选项:
        执行;
        break;
    case 选项:
        执行;
        break;
    default:
        执行;
        break;
}//选项可以为变量或者为表达式，但是java中不支持
*/
/*
for-in语句使用
for(var i in arr){}//可以遍历数组或者对象
*/
/*
with语句可以方便函数的调用，java里没有
with(document){
    write();
    write();
}
*/
//函数定义：function 函数（形参）{语句；}
//函数调用：函数（实参）；
function add(a , b){
    var result = a+b;
    document.write(result+"<br/>");
}
add(10,20);//函数不可以重载，后定义的方法会覆盖之前的方法
//函数中的形参和实参的数量不一致也可以调用，多于NaN，少于后面实参丢弃，因为参数以arguments数组传递，从左到右依次赋值

//内置对象介绍
//Array对象
arr1 = new Array();//定义数组
arr2 = new Array(5);//定义数组个数
arr3 = new Array(1,2,3,4,5);//定义数组内容

document.write(arr1.constructor+"<br/>");//返回数组的属性名称
document.write(arr1.length+"<br/>");//返回数组长度，定义未给值的长度为0

document.write(arr3.concat(arr3)+"<br/>");//连接两个数组并返回结果
arr1[0] = 1;
arr1[1] = 2;
arr1[2] = 3;
document.write(arr1.join()+"<br/>");//将数组所有元素放入一个字符串
document.write(arr3.pop()+"<br/>");//删除并返回最后一个元素
document.write(arr3.push(6)+"<br/>");//向末尾添加元素并返回长度
document.write(arr3.reverse()+"<br/>");//颠倒整个数组
document.write(arr3.shift()+"<br/>");//删除并返回第一个元素
document.write(arr3.unshift(7)+"<br/>");//向开头添加元素并返回长度

document.write(arr3.slice(1)+"<br/>");//第一个数字为起始，第二个为结束，负数表示倒数
document.write(arr3.sort()+"<br/>");//对数组进行排列，顺序以括号内属性为准
document.write(arr3.splice(0,1,8)+"<br/>");//第一个参数删除的位置，第二个参数删除的个数，第三个表示增加的参数
document.write(arr3.toString()+"<br/>");//将数组转化为字符串返回结果
document.write(arr3.valueOf()+"<br/>");//返回数组原始值


//Boolean对象
var a = new Boolean(true);

document.write(a.toString()+"<br/>");//返回对象字符串
document.write(a.valueOf()+"<br/>");//返回对象原始值


//Date对象
var myDate = new Date();
document.write(myDate+"<br/>");//返回日期
document.write(myDate.getDate()+"<br/>");//返回日
document.write(myDate.getDay()+"<br/>");//返回星期
//还可以返回小时，分钟，毫秒等等，文末会给出方法参考链接

document.write(Date.parse(myDate)+"<br/>");//返回1970.1.1午夜至今的毫秒数

document.write(myDate.setDate(2)+"<br/>");//设置时间的某一天，以毫秒显示
//对应get方法有相应的set方法，用以设置时间，文末会有参考链接

document.write(myDate.toString()+"<br/>");//将date转化为字符串
document.write(myDate.toDateString()+"<br/>");//根据date类型将日期部分转化为字符串
document.write(myDate.toTimeString()+"<br/>");//根据date类型将时间部分转化为字符串
document.write(myDate.toUTCString()+"<br/>");//根据世界时间转化为字符串
document.write(myDate.toLocaleString()+"<br/>");//根据本地时间格式转化为字符串
//还有其他转化字符串的形式方法，文末会给出参考链接


//Math对象
document.write(Math.PI+"<br/>");//返回π
document.write(Math.E+"<br/>");//返回e
document.write(Math.LN2+"<br/>");//返回2的自然对数
document.write(Math.LN10+"<br/>");//返回10的自然对数
document.write(Math.LOG2E+"<br/>");//返回以e为底的对数
document.write(Math.LOG10E+"<br/>");//返回以e为底的对数
document.write(Math.SQRT1_2+"<br/>");//返回根号二的倒数
document.write(Math.SQRT2+"<br/>");//返回根号二

var number = 10;
document.write(Math.abs(number)+"<br/>");//返回绝对值
document.write(Math.acos(number-9)+"<br/>");//返回反余弦值
document.write(Math.sin(number)+"<br/>");//返回正弦值
document.write(Math.sqrt(number)+"<br/>");//返回平方值
document.write(Math.exp(number)+"<br/>");//返回e的指数
document.write(Math.log(number)+"<br/>");//返回自然对数

var a = 3;
var b = 6;
document.write(Math.max(a,b)+"<br/>");//返回最大值
document.write(Math.pow(a,b)+"<br/>");//返回a的b次幂
document.write(Math.random(10)+"<br/>");//返回随机数
//其余Math方法会在文末链接给出


//Number对象
document.write(Number.MAX_VALUE+"<br/>");//可表示的最大值
document.write(Number.MIN_VALUE+"<br/>");//可表示的最小值
document.write(Number.NaN+"<br/>");//表示非数字值
document.write(Number.NEGATIVE_INFINITY+"<br/>");//表示负无穷大
document.write(Number.POSITIVE_INFINITY+"<br/>");//表示正无穷大

var a = new Number(1234.567);
document.write(a.toString()+"<br/>");//转化为字符串
document.write(a.toLocaleString()+"<br/>");//转化为本地字符串
document.write(a.toFixed(2)+"<br/>");//转化为小数点后指定位数的字符串
document.write(a.toExponential()+"<br/>");//转化为指数计数法
document.write(a.toPrecision(4)+"<br/>");//转化为指定长度


//String对象
var str = "abcdef";

document.write(str.big()+"<br/>");//大字体显示
document.write(str.blink()+"<br/>");//闪烁显示
document.write(str.bold()+"<br/>");//粗体显示
document.write(str.fixed()+"<br/>");//打字机文体显示
document.write(str.fontcolor("#f00000")+"<br/>");//指定颜色显示
document.write(str.italics()+"<br/>");//斜体显示
document.write(str.link("https://www.baidu.com")+"<br/>");//链接
document.write(str.small()+"<br/>");//小字体显示
document.write(str.sup()+"<br/>");//上标显示
document.write(str.strike()+"<br/>");//删除线显示

document.write(str.charAt(2)+"<br/>");//返回指定字符
document.write(str.charCodeAt(2)+"<br/>");//返回指定字符编码
document.write(str.split('c')+"<br/>");//以指定字符分割
document.write(str.toUpperCase()+"<br/>");//以大写返回

document.write(str.match('c')+"<br/>");//返回正则匹配
document.write(str.replace('c','C')+"<br/>");//替换正则匹配
document.write(str.search('C')+"<br/>");//判断是否匹配成功

JavaScript参考手册链接：JavaScript参考手册

这其中有不合适或者不正确的地方欢迎指正，我的QQ号码：2867221444（乔金明），谢谢，也可以相互交流下，备注信息随意，只要能看得出是开发者或者学习者即可。

QJM1995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网站建设学习（九）——JavaScript基础语法（上）

html作为骨架，css作为装饰，网页页面可以进行建设，但是当网站与用户交互时，就需要一种脚本语言进行沟通，既提升了用户体验，同时也减少了服务器端压力，接下来介绍的第三门语言为JavaScript，一种脚本语言，作为语言方法及操作众多，文章会分为几部分进行介绍，同时也会在文章末给出js的参考链接。在执行本篇代码前，依旧需要在html同文件夹下建立一个js基础语法.js文件。...
复制链接

扫一扫