JavaScript语法基础

本文介绍了JavaScript在HTML中的存在形式,如在head中书写、文件调用等,还提到为提高用户体验,JS代码常放body标签最下方。同时阐述了JavaScript代码书写方式、基本组成,包括变量、数据类型、数组、字典等,还涉及条件语句、循环、函数等,最后介绍了序列化、转义、定时器等应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JavaScript

独立的语言,浏览器具有javascript解释器

JavaScript在HTML中的存在形式:

1.head中

  • <script> </script>
    像css代码在head中书写一样,在head中书写
  <script>
       //javascript代码
      alert(123);
    </script>

<script type="text/javascript">
    //javascript代码
    alert(123);
</script>

上述这两段代码作用是完全相同的,都是弹窗中输出123,type=’'text/javascript"意义在于声明以下是Javascript代码,可以省略不写

  • 文件调用
    我们可以创建一个js文件,将JavaScript代码写在其中,然后通过调用此文件,调用此JavaScript代码
<head>
		.......
		<script src='js文件路径’></script>
</head>		

PS:JS代码需要放置在标签内部的最下方
因为在加载网页时,若把JavaScript代码写在head中,会优先加载JavaScript代码,耗时较长,因此为了提高用户体验,使用户能够优先浏览到网页内容,我们往往将JavaScript代码写在body标签内部的最下方

JavaScript代码书写方式
  • html文件中编写
  • 临时,浏览器的终端Console中修改
JavaScript代码基本组成
  • 变量
    在JavaScript中变量主要分为两种:
    javascript:
    name=‘alex’(全局变量)
    var name=‘elsex’(局部变量)

  • 基本数据类型
    数字
    没有 int,double等区分
    a=‘18’;

  • 字符串
    charAt():获取一段字符串中某个位置的字符
    substring(起始位置,结束位置):获取两个位置之间的字符串

    obj.trim()
    移除空白
    obj.trimLeft()
    移除左边空白
    obj.trimRight()
    移除右边空白
    obj.charAt(n)
    返回字符串中的第n个字符
    obj.concat(value,…)
    拼接
    obj.indexOf(substring,start)
    子序列位置(前往后)
    obj.lastIndexOf(substring,start)
    子序列位置 (后往前)
    obj.substring(from,to)
    根据索引获取子序列
    obj.slice(start,end)
    切片
    obj.tolowerCase()
    大写转小写
    obj.toupperCase()
    小写转大写
    obj.split(delimiter,limit)
    分割
    obj.search(regexp)
    从头开始匹配,返回配成功的第一个位置(g无效)
    obj.match(regexp)
    全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
    obj.replace(regexp,replacement)
    替换,正则中有g则替换所有,否则只替换第一个匹配项

  • 数组
    a=[1,2,34,5]
    obj.push(ele)
    尾部追加元素
    obj.pop()
    尾部获取一个元素
    obj.unshift(ele)
    头部插入元素
    obj.shift()
    头部移除元素
    obj.splice(start,deletecountf value,…)
    插入、删除或替换数组的元素
    obj.splice(n,0,val)
    指定位置插入元素 (指定位置,删除的个数,插入的值)
    obj.splice(n,1,val)
    指定位置替换元素
    obj.splice(n,1)
    指定位置删除元素

  • 字典

a={k1:'v1',k2:'v2'}
a['k1']=v1;
a['k2']=v2;
  • 布尔类型(Boolean)
    布尔类型包含真假,其首字母小写

  • == 比较值相等

  • != 值不等于

  • === 比较值和类型相等

  • !=== 值和类型不等于

  • || 或

  • && 与

  • 条件语句
    if(条件){

}else if(条件){

}else{

}

  • for循环
    1.循环时,循环的元素是索引
    数组
  a=[11,22,33,44]
        for(var item in a){
        console.log(a[item]);
        }

字典

     a={'k1':'v1','k2':'v2'}
        for(var item in a){
        console.log  (a[item])
        }
        

注:console.log()意思是获取值并在console中输出

2.第二种for循环

      a=[11,22,33,44]
         for(var i=0;i<a.length;i++){
    			.......
         }

只支持数组循环不支持字典循环

  • 函数:
    普通函数:
    function 函数名(形参){

    }
    匿名函数:
    例如以下函数:

function  func(arg){
	return arg+1;
}

用匿名函数的书写方式就可以写为:

setInterval(function(){
    console.log(123);
},5000);

自执行函数:

function  func(arg){
	console.log(arg);
} 
func();

通常我们写一个函数并要使它执行,应该需要像上面这么书写,然而自执行函数就可以如下书写:

(function(arg){
	console.log(arg);
})(1)

序列化
JSON.stringify()
将对象转换为字符串
JSON.parse()
将字符串转换为对象类型

转义
·decodeURI()
URI中将转义的字符转换成未转义的字符
·decodeURIComponent()
URI组件中将转义的字符转换成未转义的字符
·encodeURI()
转义URI中的字符
·encodeURIComponent()
转义URI组件中的字符
·escape()
对字符串转义
·unescape()
给转义字符串解码
·URIError
由URI的编码和解码方法抛出
应用:
在客户端请求服务器登录等情况,将数据保存在本地cookie中,在保存前需要将数据进行转义

  • 定时器:(每多少毫秒执行一次)
    setInterval(执行代码,毫秒)
setInterval("func()",5000);

跑马灯实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
</head>
<body>
    <div id="i1">欢迎上级莅临指导</div>

    <script>
        function run() {
            var tag=document.getElementById('i1');

            var content=tag.innerText;
            var f=content.charAt(0);
            var l=content.substring(1,content.length);
            var new_content=l+f;
            tag.innerText=new_content;
        }
        setInterval(run,300);
    </script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值