JavaScript基础语法(一)

时间:2026-06-05 15:24:59 来源:幸福记忆 作者:远方 阅读:86

一、javascript是什么?

javascript是一种直译式脚本语言,它的解析器由javascript引擎解析,
属于浏览器一部分,并且javascript还是一门弱类型语言

二、javascript能做什么?

可以操作html文档中的元素、属性、内容。
可以在页面中做出动画效果
可以和后台进行数据交互
可以操作客户端cookie
可以验证用户提交的数据
可以对用户操作事件作出响应

js通过node.js可以运行于服务端

三、javascript的组成

在js中一切皆为对象

(1)ECMAScript,描述了该语言的语法和基本对象(需要掌握基础)
      变量,数据类型(整数,字符串...),流程控制,运算符,函数

(2)document object model(dom文档对象模型),
   处理网页内容的方法和接口(主要学习内容)
     处理html文档中的标签元素,属性,内容

(3)browser object model(bom浏览器对象模型),与浏览器进行交互的方法和接口

四、如何编写javascript

js代码可以写到网页的任何位置,遵从浏览器解析顺序。

1、可以写到标签元素上

<span onclick="alert('hello world');">按钮</span>

2、可以写到script标签内

<script type="text/javascript">
 //js代码
 alert(111);
</script>
说明:
 - script标签可以写到任何位置
 - type属性可以不写(默认的脚本类型就是js)

3、引入外部的js脚本

  #首先在外部创建以.js结尾的脚本文件
 #然后在html中使用script标签的src属性引入
 #注意:在具有src属性的script标签内不能编写任何内容,如需编写,
 另起一行新增script标签
 <script src="js文件路径"></script>

4、浏览器的同源策略  

通过浏览器,在当前域下不能请求其他域上面的资源,即不能跨域请求。
解决跨域请求:
 - 服务器端设置
 - jsonp

五、代码注释

html中的注释

<!--html代码注释-->

css注释

/*
css注释
*/

js注释

/*
多行注释
*/
//单行注释

注释,是为了提醒开发及维护人员代码的含义,通常注释不宜过多和复杂,简明扼要。

六、js中的输出方式

    1、window.document 文档对象
   document.write(内容); //将内容打印到页面上(不常用)

   2、弹窗
   alert(内容); //弹窗输出内容
   confirm(内容);  //选择型
   prompt(内容); //输入型,返回用户输入信息

   3、控制台
   console.log(内容); //控制台输出

   主要用于错误调试,排错

七、js中的变量

变量也是一种数据容器,由于js是弱类型语言,因此对变量类型没有强制要求。  

定义变量的方式

1、使用var关键字定义
var num = 10;
2、使用let定义,解决了变量提升问题。
let num = 5;
3、定义常量(初始化后不能修改)
const NUM = 50;

八、数据类型

1、字符串

var a = 'abc'
var b = "efg"
#注意:
 在js中使用单引号和双引号都表示字符串。在字符串嵌套中(外单内双,外双内单)
 var str = "今天是星期'四'";

2、数值

#整数
var a = 10;
#浮点数(小数)
var b = 12.36;

3、布尔类型

true(真),false(假)

4、数组

#定义数组对象
let arr = new Array();
#赋初始值
arr[0] = "zs";  
arr[1] = "qq";

#直接定义
let arr1 = ['as',123,'fff']

5、对象

- 方式一
let obj1 = {
name:'张三',
age:16,
run:function(){
 alert('running');
}
}

- 方式二 json对象:*****
let obj2 = {
"name":"张三",
"age":16
}

- 方式三 Object对象:
let obj3 = new Object();
obj3.name = "李四";

- 方式四 function构建对象原型

6、undifine(未定义)   7、null(空)

九、js的内置对象

1、字符串(String)

#返回指定索引位置处的字符
strObj.charAt(index)

#字符串拼接
string1.concat([string2[, string3[, . . . [, stringN]]]])

#查找子串出现的位置,不存在返回-1。否则返回子串第一个字符下标
strObj.indexOf(subString[, startIndex])

#子字符串最后出现的位置
strObj.lastIndexOf(substring[, startindex])

#包含查找的结果作为数组返回。
stringObj.match(rgExp)

#查找替换第一次出现的字符串
stringObj.replace(rgExp, replaceText)

#通过正则查找,返回第一个匹配的下标,与indexOf类似
stringObj.search(rgExp)

#字符串截取(end不包含在内,可以设置负值 -1 倒数第一个字符截止)
stringObj.slice(start, [end])

#根据separator进行拆分,并返回数组
stringObj.split([separator[, limit]])

#实现字符串截取
stringvar.substr(start [, length ])
strVariable.substring(start, end)

#大小写转换
strVariable.toLowerCase( )  //小写
strVariable.toUpperCase( )  //大写

2、数组

#多个元素组合为新数组
array1.concat([item1[, item2[, . . . [, itemN]]]])

#拼接数组返回字符串
arrayObj.join(separator)

#移除数组的最后一个元素并返回
arrayObj.pop( )  

#元素添加到数组并返回长度
arrayObj.push([item1 [item2 [. . . [itemN ]]]])  

#返回一个被翻转后的数组
arrayObj.reverse( )

#移除数组的第一个元素并返回
arrayObj.shift( )

#在数组前面添加元素
arrayObj.unshift([item1[, item2 [, . . . [, itemN]]]])

#数组排序
arrayobj.sort(sortfunction)  

3、Math数学对象

Math.PI     圆周率3.1415926 相当于180弧度
Math.ceil(number)  向上取整: 3.02 = 4
Math.floor(number)  向下取整: 3.9 = 3
Math.max([number1[, number2[. . . [,numberN]]]]) 最大值
Math.min([number1[, number2[. . . [,numberN]]]]) 最小值
Math.random( ) 返回0~1之间伪随机数不包含1
Math.round(number)  四舍五入的整数值

4、Global对象

//将文本字符串编码为一个有效的统一资源标识符 (URI)。
encodeURI(URIString)  

//检查 JScript 代码并执行.
eval(codeString)  

//返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字)。
isNaN(numValue)  

//返回由字符串转换得到的浮点数。
parseFloat(numString)  

//返回由字符串转换得到的整数
parseInt(numString, [radix])  

//返回一个已编码的统一资源标识符 (URI) 的非编码形式
decodeURI(URIstring)

5、日期(Date)

dateObj.getFullYear()
dateObj.getMonth()
dateObj.getDate()
dateObj.getHours()
dateObj.getMinutes()
dateObj.getSeconds()
Date.parse(dateVal) 返回毫秒级时间戳