2 js的20/80关键知识

本文通过一系列JavaScript代码示例,展示了变量声明、函数定义、DOM操作及简单的主题切换功能,适合初学者学习。

1.

 

 

 

 

 

 

 

2

var a = 1;
undefined
a
1
alert(a);
undefined

  

 

 

var b = true;
var c = "Hi";
undefined
alert(b);
alert(c);
undefined

  

 

function foo(bar){
	alert(bar);
	return bar;
}
undefined
var z = foo("Hi");
undefined
z
"Hi"

  

function foo(bar)
{
	alert(bar);
	return bar;
}

  

  • shift+enter 换行

 

 

 

 

 

 

function foo(bar){
	if (bar > 3){
		alert(bar + 1);
	} else {
		alert("Not enough");
	}
}
undefined
foo(5)
undefined
foo(2);
undefined

  

 

 

 

 

3

 

 

 

var arr = []
undefined

function foo(bar){
	if (bar > 3){
		arr.push(bar);
	} else {
		alert("Not enough");
		}
}
undefined

foo(2);
undefined

foo(6);
undefined
arr;
[6]

  

 

 

var o = {
	one:1,
	two:2
}
undefined
o.one
1
o.two
2

  

 

4

 

 

 

 

 

 

 

document
#document

document.querySelector("#sidebar")
<div id=​"sidebar">​…​</div>​

var el = document.querySelector("#sidebar");
undefined

el
<div id=​"sidebar">​…​</div>​

el.setAttribute("style","display:none;")
undefined

  

 

 

 

 

 

5.

https://developer.mozilla.org/zh-CN/docs/Web/Reference/API

 

 

6

 

 

 

 

 

 

var b=document.querySelector("body")
undefined

b.setAttribute("style","background-color: black");
undefined

  

var dark = "background-color: black; color: white;";
var day = "background-color: white; color: black;";

// var theme = {
//   dark : "background-color:black; color:white; ",
//   light : "background-color:white; color:black; "
// };

var button = document.querySelector(".nav");
var web = document.querySelector("body");

function lightSwitch() {
  if (web.style.cssText == dark){
      web.style.cssText = day;
      alert("Light Day");
  } else {
      web.style.cssText = dark;
      alert("Dark Day");
  }
}

button.onclick = lightSwitch

  

 

转载于:https://www.cnblogs.com/venicid/p/8158413.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值