JavaScript基础实例学习（一）

最新推荐文章于 2024-07-10 14:03:37 发布

Gary jie

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量163

点赞数

分类专栏： # 前端 JavaScript 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_44174346/article/details/125886608

版权

前端 JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简介

改变 HTML 样式

<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>

验证输入

<body>
	
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>	
</body>

JavaScript用法

外部的javascript

<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>	
</body>

JavaScript 输出⭐

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

<script>
window.alert(5 + 6);
</script>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

<script>
document.write(Date());
</script>

<script>
a=5;b=6;c=a+b;console.log(c);
<scrpt>

JavaScript变量

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值


<body>
<p>点击这里来创建变量，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var carname="Volvo";
	document.getElementById("demo").innerHTML=carname;
}
</script>
</body>

JavaScript 语句

换行编写：

<script>
document.write("你好 \
世界!");
</script>

JavaScript 数据类型⭐

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

创建数组：

<script>
var i;
var arr2 = ['a', 'b', 'c' ]; 
var arr3 = new Array( );   var arr4 = [ ];

for (i=0;i<cars.length;i++)
{
document.write(arr2[i] + "<br>");
}
</script>

对象创建：

var people = {name : "原", age : 21 , eat : function(){  }    }

document.write(typeof people);   //object

JavaScript 函数⭐

<p>带参函数调用</p>
<button onclick="myFunction('yuan','engeer')">click</button>
<script>
function myFunction (name,job){
alert("Welcome"+name+",the"+job);
}
<script>

<body>
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

JavaScript 作用域

<p>全局变量在任何脚本和函数内均可访问。</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction() 
{
    document.getElementById("demo").innerHTML =
		"我可以显示 " + carName;
}
</script>

JavaScript 事件

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<button onclick="displayDate()">现在的时间是?</button>

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
等等 …

JavaScript 字符串⭐

显示字符串：

<p id="demo"></p>
<script>
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
document.getElementById("demo").innerHTML = x + "<br>" + y; 
</script>

字符串长度：

<script>
var txt = "Hello World!";
document.write("<p>" + txt.length + "</p>");             --12
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write("<p>" + txt.length + "</p>");              --26
</script>

字符串方法：

var x = "JohnJohn";              // x 是字符串
y = x.charAt(2); // h
y = x.charCodeAt(2); // 104
y = x.concat(y, y); // JohnJohn104104, x+y+y
y = x.indexOf('h'); // 2, 索引从0开始
y = x.lastIndexOf('h'); // 6
y = x.slice();
y = x.split('o'); //J,hnJ,hn
y = x.substr(2); // hnJohn
y = x.substring(2,4) // hn，[2,3]
y = x.toLocaleLowerCase(); // johnjohn,小写
y = x.toLocaleUpperCase(); // JOHNJOHN,大写
y = x.toString(); // 转成Stirng
y = x.toUpperCase(); // JOHNJOHN,大写
y = x.trim(); // JohnJohn,去除两端的空格
y = x.valueOf(); // 返回某个字符串对象的原始值

在script中条件判断前端输入的年龄是否大于等于18：

<p>点击按钮检测年龄。</p>
年龄:<input id="age" value="18" />
<p>是否达到投票年龄?</p>
<button onclick="myFunction()">点击按钮</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var age,voteable;
	age=document.getElementById("age").value;
	voteable=(age<18)?"年龄太小":"年龄已达到";
	document.getElementById("demo").innerHTML=voteable;
}
</script>

JavaScript条件⭐

if else if else条件

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="";
	var time=new Date().getHours();
	if (time<10){
		x="Good morning";
    }
    else if(time>=10 && time<20){
    x="<b>今天好</b>";
    }
    else{x="Good Evening" }
	document.getElementById("demo").innerHTML=x;
}
</script>

switch分支语句

<p>点击下面的按钮，会显示出基于今日日期的消息：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x;
	var d=new Date().getDay();
	switch (d)
    {
  		case 6:x="今天是星期六";
    	break;
  		case 0:x="今天是星期日";
    	break;
  		default:
    	x="期待周末";
  	}
	document.getElementById("demo").innerHTML=x;
}
</script>

for循环

for/in

<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0,l=cars.length; i<l; i++){
	document.write(cars[i] + "<br>");
}
</script>


<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var txt="";
	var person={fname:"Bill",lname:"Gates",age:56}; 
	for (x in person){
		txt=txt + person[x];
	}
	document.getElementById("demo").innerHTML=txt;
}
</script>

while 循环

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	while (i<5){
		x=x + "该数字为 " + i + "<br>";
		i++;
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

数据类型

<p> typeof 操作符返回变量、对象、函数、表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
   typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object
</script>

将数字转换为字符串

<p> String() 方法可以将数字转换为字符串。</p>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
    String(x) + "<br>" +
    String(123) + "<br>" +
    String(100 + 23);
 
 x.toString()
(123).toString()
(100 + 23).toString()
</script>

日期⭐

<script>
var d = new Date();
var d = new Date(milliseconds); // 参数为毫秒
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
</script>

正则表达式

正则表达式参数可用在以上方法中 (替代字符串参数)。
正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

<p>搜索字符串 "runoob", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "Visit Runoob!";
    //search() 
    var n = str.search(/Runoob/i);
//同    var n = str.search("Runoob"); 
document.getElementById("demo").innerHTML = n;
}
//replace()
var txt = str.replace("Microsoft","Runoob");
//test()
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
//exec()
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
</script>
//

判断输入是否为数字、字母、下划线组成

js检测规格规格书写要求：

function isValid(str) { return /^ \w +$/.test(str); }
str = "1234abd__"
document.write(isValid(str));        //ture
document.write("<br>");
// 判断字符串是否全部为字母
var isletter = /^[a-zA-Z]+$/.test(val);
//判断字符串是否全部为数字
var isnum = /^ \d +$/.test(val);

js异常处理

catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

<script>
var txt="";
function message(){
	try {
		adddlert("Welcome guest!");  //错误
	}
	catch(err) {
		txt="本页有一个错误。\n\n";
		txt+="错误描述：" + err.message + "\n\n";
		txt+="点击确定继续。\n\n";
		alert(txt);
	}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />

</body>

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

<p>不管输入是否正确，输入框都会再输入后清空。</p>
<p>请输入 5 ~ 10 之间的数字：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">点我</button>

<p id="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：⭐

<body>

<p>请输出一个 5 到 10 之间的数字:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="message"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}
</script>

</body>