JavaScript基础

最新推荐文章于 2023-02-02 15:42:13 发布

隔山隔海syx

最新推荐文章于 2023-02-02 15:42:13 发布

阅读量470

点赞数

本文链接：https://blog.csdn.net/qq_45844648/article/details/103326491

版权

1.JavaScript引入方式：

嵌入式：用script标签包裹JavaScript代码，直接写到HTML文件里，示例：

<script>
	javascript 语句;
</script>

外链式：将JavaScript代码保存到一个单独的文件中，用js作为文件的拓展名。然后再用script标签的src属性引入文件。
html文件

.....
<script src="js/test.js"></script>
.....

js/test.js文件

......
alert("hellow");
......

行内式：将JavaScript代码作为HTML标签的属性值使用
例：在单击test按钮时弹出一个警告框提示hello

<a href="javascript:alert('hello');">test</a>

2.常用输出语句：

alert():
alert()用于弹出一个警告框，确保用户可以看到某些信息。常用于程序测试。
console.log()：
console.log()用于在浏览器控制台输出内容。
document.write():
document.write()用于在HTML文档中输入内容

document.write('你好！');

3.注释

单行注释：

document.write('你好！');//输出一句话

多行注释：

/*
document.write('你好！');
alert('hello');
*/

4.数据运算

比较大小：

alert(22>33);//输出结果：false
alert(22==22);//输出结果：true

字符串与数字的拼接：

alert('220+230='+220+230);//输出结果：220+230=220230
alert('220+230='+(220+230));//输出结果：220+230=250

5.使用变量保存数据

var 变量来声明关键字

var num1=22;
var num2=33;
alert(num1+num2);//输出结果55
alert(num1-num2);//输出结果-11

6.函数

<script>
  var name = prompt('请输入你的名字：');    // 弹出一个输入框，提示用户输入内容
  alert('你的名字是：' + name);             // 输出用户输入的内容
</script>

<script>
  alert('你的名字是：' + prompt('请输入你的名字：'));
</script>

<script>
  prompt('请输入你的名字：', '匿名');
</script>

<script>
  // 定义函数
  function sum(a, b) {
    c = a + b;              // 函数内部的代码
    return c;               // 函数的返回值（也可以与上一行合并为return a + b;）
  }
  // 调用函数
  alert(sum(11, 22));       // 输出结果：33
  alert(sum(22, 33));       // 输出结果：55
</script>

prompt(‘请输入你的名字’,‘匿名’);
第二个参数是弹出窗口的输入框里默认文本。

自定义函数sum() 调用函数。

7.对象

window对象

<script>
  window.console;               // 访问window对象的console属性
  window.document;              // 访问window对象的document属性
  window.alert('test');         // 调用window对象的alert()方法
  window.prompt('test');        // 调用window对象的prompt()方法
</script>

document对象：

<script>
  window.console.log('test');         // 调用console对象的log()方法
  window.document.write('test');      // 调用document对象的write()方法
</script>

String对象

<body>
  <div id="test">Hello</div>
  <script>
    var test = document.getElementById('test');    // 根据元素id创建元素对象
    alert(test.innerHTML);                         // 通过InnerHTML属性获取元素内容，输出结果：Hello
  </script>
</body>

自定义对象

//创建对象
var stu={};//创建一个空对象
//添加属性
stu.name='小明';//为stu对象添加name属性
stu.age='18';//为stu属性添加age属性
//访问属性
alert(stu,name);//访问stu对象的name属性，输出 结果小明
//添加方法
stu.introduce=function(){
return '我叫'+this.name+'.今年'.+this.age+'岁'；
};
//调用方法
alert(stu.introduce());

8.事件

<input type="button" onclick="alert('Hello');" value="test">

<body>
  <input id="btn" type="button" value="test">
  <script>
    document.getElementById('btn').onclick = function() {
      alert(this.value);    // 获取按钮的value属性，输出结果：test
    };
  </script>
</body>

通过getElementById()创建元素对象以后。为该对象设置了onclick事件

9.案例：改变网页背景颜色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>改变网页背景色</title>
    <script>
      function color(str) {
        document.body.style.backgroundColor = str;
      }
    </script>
  </head>
  <body>
    <input type="button" value="设为红色" onclick="color('red')">
    <input type="button" value="设为黄色" onclick="color('yellow')">
    <input type="button" value="设为蓝色" onclick="color('blue')">
    <input type="button" value="设为自定义颜色" onclick="color('#00ff00')">
  </body>
</html>

验证用户输入密码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>验证用户输入的密码</title>
    <script>
			var password=prompt('请输入密码：');
			if(password=='123'){
				alert('输入正确');
			}else{
				alert('输入错误');
			}
		</script>
  </head>
  <body></body>
</html>

隔山隔海syx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础

1.JavaScript引入方式：嵌入式：用script标签包裹JavaScript代码，直接写到HTML文件里，示例：<script> javascript 语句;</script>外链式：将JavaScript代码保存到一个单独的文件中，用js作为文件的拓展名。然后再用script标签的src属性引入文件。html文件.....<script...
复制链接

扫一扫