JavaScript笔记(一)
JavaScript笔记(一)
什么是javascript？
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
脚本可同时位于 HTML 的 和 两个部分，通常的做法是把函数放入 部分，或者放在页面底部。这样就可以把它们放在同一处位置，不会干扰页面的内容
JavaScript 语法
JavaScript 有多种数据类型：数字，字符串，数组，对象……
使用 **算术运算符** 来计算值
使用**赋值运算符**给变量赋值
语句是用分号(;)分隔.
单行注释是双斜杠 **//**
多行注释/* */
对大小写是敏感的
使用 Unicode 字符集JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值
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 通过对象字面量赋值函数
引用一个函数 = 调用函数(执行函数内的语句)。
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}参考来源 https://www.runoob.com/js/js-syntax.html
对事件的反应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js</title>
</head>
<body>
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如点击按钮出现弹窗：
</p>
<button type="button" onclick="alert('谢谢点击!')">点我!</button>
</body>
</html>改变 HTML 内容
<p id="1">2.JavaScript 能改变 HTML 元素的内容。</p>
<script>
function neirong()
{
x=document.getElementById("1"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="neirong()">点击这里</button>
//document.getElementById("1")是使用 id 属性来查找 HTML 元素的 JavaScript 代码
//innerHTML = "Hello JavaScript!" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。改变 HTML 图像
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="https://www.runoob.com/images/pic_bulboff.gif";
}
else
{
element.src="https://www.runoob.com/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="https://www.runoob.com/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>改变 HTML 元素的样式
<p id="2">
4.JavaScript 能改变 HTML 元素的样式。
</p>
<script>
var x=document.getElementById('2');
var y=document.getElementById('520');
var count=0;
function yangshi(){
count++
if(count%2==1){
x.style.color='#ff0000';
}else {
x.style.color='#ffff00';
}
}
</script>
<button id="520" type="button" onclick="yangshi()">点击这里</button>
************************************************************************
<p id="2.5">
4.JavaScript 能改变 HTML 元素的样式。
</p>
<script>
var x=document.getElementById('2.5');
var count=0;
x.onclick=function() {
count++
if(count%2==1){
x.style.color='#ff0000';
}else {
x.style.color='#ffff00';
}
}
</script>
<button>点击文字变色</button>验证输入
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
else
{
alert("是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>关于 getElementById() 方法：https://www.w3school.com.cn/jsref/met_doc_getelementbyid.asp
参考来源：https://www.runoob.com/js/js-intro.html
JavaScript 输出
- 使用 window.alert() 弹出警告框 <script> window.alert(60*60*24*30); </script> //在弹窗里输出 60*60*24*30 的结果
- 使用 document.write() 方法将内容写到 HTML 文档中
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>- 使用 innerHTML 写入到 HTML 元素
<p id="1">我的第一个段落</p>
<p id="2">我的第二个段落</p>
<p id="3">我的第三个段落</p>
<script>
document.getElementById("2").innerHTML = "段落已修改。";
</script>
//'我的第二个段落' 替换成 '段落已修改。'- 使用 console.log() 写入到浏览器的控制台
<script>
a = 8;
b = 8;
c = a * b;
console.log(c);
</script>
//在控制台里(使用F12打开)，console菜单里显示c的值console不会打断在页面的操作，输出内容后，页面还可以正常操作。如果用alert弹出来内容，那么除非叉掉弹窗，否则页面不能正常操作。
<script>
b = 8;
c = a * b;
console.log(c);
</script>
//在控制台里(使用F12打开)，console菜单里显示c的值console不会打断在页面的操作，输出内容后，页面还可以正常操作。如果用alert弹出来内容，那么除非叉掉弹窗，否则页面不能正常操作。
注：笔记仅供学习交流，请勿用于违法行为，如造成后果，与笔者无关
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-07-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录