当前位置：首页 > news >正文

【无标题】JavaScript入门

news 2025/7/6 12:23:59

JS

1.JS引入方式

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title><!-- 内部脚本 --><!-- 运行时界面弹出警告框 hello JS --><script>alert('hello JS');</script><!-- 外部脚本 --><script src="../js/demo.js"></script></head><body><script>alert('hello JS');</script></body></html><script>alert('hello JS');</script>

2.JS基本语法

书写语法

区分大小写：与java一样，变量名,函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：

单行注释：//

多行注释：/* */

大括号代表代码块

 if(count==3){alert("111");}

输出语句

使用window.alert()写入警告框

使用docment.write()写入HTML输出

使用console.log()写入浏览器控制器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基本语法</title></head><body></body><script>// alert("js");/* alertalert*/window.alert("JS");document.write("js");console.log("js01");</script></html>

变量

使用var关键字来声明变量
JS是一门弱类型语言，变量可以存放不同类型的值

 var a=10;a="zhangsan";

变量名需要遵守规则：

组成字符可以是任何字母，数字，下划线（_）或美元符号（$）

数字不能开头

建议使用骆峰命名

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量</title></head><body></body><script>var a=10;a="zhangsan";alert(a);// 特点1：作用域比较大 全局变量// 特点2：可以重复定义 覆盖前一个{var x=1;var x="A";}alert(x);// let:局部变量 不能重复定义{let y=1;alert(y);}alert(y);// const:常量 不能改变const p=3.14;p=3.15;alert(p);</script></html>

数据类型

JavaScript中分为：原始类型和引用类型

原始类型：

number：数字
string：字符串，单双引号都可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量为初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据类型</title></head><body></body><script>// numberalert(typeof 3);alert(typeof 3.14);// stringalert(typeof "A");alert(typeof 'hello');// booleanalert(typeof true);alert(typeof false);// objectalert(typeof null);// undefinedvar a;alert(typeof a);</script></html>

运算符

算术运算符：+，-，*，/，%，++,--
赋值运算符：=，+=，-=，*=，/=，%=
比较运算符：>,<,>=,<=,!=,==,===
逻辑运算符：&&，||，！
三元运算符：条件表达式？true_value:false_value

==会进行类型转换，===不会进行类型转换

 var age=20;var _age="20";alert(age==_age);//truealert(age===_age);//false

3.函数

介绍：函数（方法）是被设计为执行特定任务的代码块。

定义：JavaScript函数通过function关键字进行定义，语法为：

 function functionName(参数a,b){//要执行的代码}

注意：

形式参数不需要类型，因为Javascript是弱类型语言。

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

调用：函数名称（实际参数列表）

定义方式二：

  var functionName=function(参数1，2...){return a+b;}

使用：

4.对象

JS对象：Array String JSON BOM DOM

Array

JavaScript中Array对象用于定义数组。

定义：

var 变量名=new Array(元素列表);//方式一    var arr= new Array(1,2,3,4);
var 变量名 = [元素列表];//方式二   var arr=[1,2,3,4];

访问：

arr[索引]=值;//   arr[10]="hello";

属性：

length:设置或返回数组中元素的数量

方法：

forEach():遍历数组中每个有值的元素，并调用异常传入的函数

push():将新元素添加到数组的末尾，并返回新的长度

splice():从数组中删除元素

 arr.forEach(function(e){console.log(e);})// ES6 箭头函数：(...) => {...}  简化函数定义arr.forEach((e)=>{console.log(e);})// push:添加元素到数组末尾arr.push(7,8,9);console.log(arr);// splice:删除元素arr.splice(2,2);console.log(arr);

String

String字符串创建方法有两种：

 var 变量名=new Stirng("...");var 变量名="...";

属性：

length:字符串的长度

方法：

charAt():返回在指定位置大的字符

indexOf():检索字符串

trim():去除字符串两边的空格

substring():提取字符串中两个指定的索引号之间的字符

var str=new String("hello");
var str="hello";
// length
console.log(str.length);
// charAt
console.log(str.charAt(1));
// indexOf
console.log(str.indexOf("lo"));
// trim
var s=str.trim();
console.log(s);// substring(start,end)   开始索引，结束索引（含头不含尾）
console.log(s.substring(0,4));

JSON

自定义对象：

定义格式：

var 对象名{属性名1：属性值1,属性名2：属性值2,函数名称：function(形参列表){}
}

调用格式：

对象名.属性名; //consle.log(user.name);
对象名.函数名(); //user.eat();

var user={name:"Tom",age:10,gender:"male",eat:function(){alert("吃饭~");}}alert(user.name);user.eat();

JSON——基础语法：

定义：

 var 变量名='{"key1":value,"key2":value2}';var jsonstr='{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';

JSON字符串转为JS对象：

 var jsObject=JSON.parse(userStr);

JS对象转为JSON字符串：

 var jsonstr=JSON.stringify(jsObject);var jsonstr= '{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';alert(jsonstr.name);//undefined// 将JSON字符串转为JS对象var obj=JSON.parse(jsonstr);alert(obj.name);// 将JS对象转换为JSON字符串alert(JSON.stringify(obj));

BOM

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

组成：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

window
介绍：浏览器窗口对象
获取：直接使用window，其中window.可以省略。
 window.alert("Hello Window");alert("Hello Window");
属性

history:对history对象的只读引用。

location：对于窗口或框架的Location对象。

navigator：对Navigator对象的只读引用。

方法：

alert()：显示带一段消息和一个确认按钮的警告框

confirm()：显示带一段消息以及确认按钮和取消按钮的对话框

setInterval()：按钮指定的周期（以毫秒记）来调用函数或计算表达式

setTimeout()：在指定的毫秒数后调用函数或计算表达式