JavaScript入门篇 _技术笔记

首页课程实战体系课手记专栏慕课教程

超级大南瓜 1天前

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body onload="saveInitialStatus()">
<h2 id="con">JavaScript课程</H2>
<div id="txt">
<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>

<input type="button" value="改变颜色" onClick="color()">
<input type="button" value="改变宽高" onClick="widthheight()">
<input type="button" value="隐藏内容" onClick="hide()">
<input type="button" value="显示内容" onClick="show()">
<input type="button" value="取消设置" onClick="cancel()">
</form>
<script type="text/javascript">
//保存初始值
var initialColor = "";
var initialBackgroundColor = "";
var initialWidth = "";
var initialHeight = "";

function saveInitialStatus(){
var con = document.getElementById("con");
var txt = document.getElementById("txt");
initialColor = con.style.color || "";
initialBackgroundColor = con.style.backgroundColor || "";
initialWidth = txt.style.width || "";
initialHeight = txt.style.height || "";
}

//定义"改变颜色"的函数
function color(){
var color=document.getElementById("con");
color.style.backgroundColor="green";
color.style.color="red";
}

//定义"改变宽高"的函数
function widthheight(){
var size=document.getElementById("txt");
size.style.width="400px";
size.style.height="600px";
}

//定义"隐藏内容"的函数
function hide(){
var hide=document.getElementById("txt");
hide.style.display="none";
}

//定义"显示内容"的函数
function show(){
var hide=document.getElementById("txt");
hide.style.display="block";
}

//定义"取消设置"的函数
function cancel(){
var con = document.getElementById("con");
var txt = document.getElementById("txt");
con.style.color = initialColor;
con.style.backgroundColor = initialBackgroundColor;
txt.style.width = initialWidth;
txt.style.height = initialHeight;
}

</script>
</body>
</html>

0赞 · 0采集
超级大南瓜 1天前

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">

// 新窗口打开时弹出确认框，是否打开

// 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/

//打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
function openWindow(){
var message=confirm("是否打开新窗口");
if (message==true){
window.open('https://www.imooc.com','_blank','width=400,height=500,menubar=no,toolbar=no')
}
else{
return 0;
}
}

</script>
</head>
<body>
<input type="button" value="新窗口打开网站" onclick="openWindow()" />
</body>
</html>

0赞 · 0采集
超级大南瓜 1天前

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>close()</title>
<script type="text/javascript">
function winop(){
window.open("http://www.imooc.com",'_blank','height=300,width=300,top=100,left=0');
}
function wincl(){
window.close();
}
</script>
</head>
<body>
<input name="button" type="button" onClick="winop()" value="打开窗口" \>
<input name="button" type="button" onClick="wincl()" value="关闭窗口" \>
</body>
</html>

0赞 · 0采集
BINOM 3天前

<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

0赞 · 0采集
BINOM 3天前

<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能强大，要学习噢!"); }
</script>

0赞 · 0采集
零下一度的雨 2025-12-24

close()关闭窗口
window.close(); 关闭本窗口
<窗口对象>.close(); 关闭指定的窗口

例如将新打开的窗口对象存储在变量中变量.close(); 来关闭

0赞 · 0采集
零下一度的雨 2025-12-23
window.open([URL], [窗口名称], [参数字符串]) 打开一个新窗口
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1. 该名称由字母、数字和下划线字符组成。
  2."_top"、"_blank"、"_self"具有特殊意义的名称。
  _blank：在新窗口显示目标网页
  _self：在当前窗口显示目标网页
  _top：框架网页中在上部窗口中显示目标网页
  3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。4.name 不能包含有空格。参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
参数表:top窗口离屏幕顶部的像素 left窗口离屏幕左边的像素 width窗口宽度像素 height窗口高度像素 menubar(yes/no)有无菜单栏 toolbar有无工具栏 status有无状态栏 scrollbar有无滚动条
0赞 · 0采集
零下一度的雨 2025-12-23

prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

prompt(str1, str2); str1为显示在消息对话框中的文本,不可修改 str2为文本输入框中的内容,可以修改

返回值: 点击确定按钮,文本框中的内容作为函数返回值点击取消将返回null

同样可根据返回值使用if...else来输出不同内容在用户点击对话框的按钮前，不能进行任何其它操作。

0赞 · 0采集
零下一度的雨 2025-12-23

confirm 消息对话框通常用于允许用户做选择的动作，弹出对话框包括一个确定按钮和一个取消按钮。
confirm(str); str为在消息对话框中显示的文本
返回值:Boolean值,当用户点击确定时返回ture;点击取消时返回false 可通过返回值判断用户点击了什么按钮从而可以通过if...else来输出不用内容
消息对话框是排它的，即用户在点击对话框按钮前，不能进行任何其它操作。

0赞 · 0采集
零下一度的雨 2025-12-23

JavaScript-警告
消息提示框 alert(字符串或变量);
alert弹出消息对话框包含一个确定按钮。在点击对话框"确定"按钮前，不能进行任何其它操作。消息对话框通常可以用于调试程序。alert输出内容，可以是字符串或变量，与document.write 相似。
可以按顺序弹出多个对话框

0赞 · 0采集
零下一度的雨 2025-12-23

document.write( )用于直接向HTML输出内容
第一种:输出内容用""括起，直接输出""号内的内容
第二种:通过变量，输出内容
第三种:输出多项内容，内容之间用+号连接比如变量+"文字内容"
第四种:输出HTML标签，并起作用，标签使用""括起来比如 "<br>"输出一个换行符
如果想要实现输出空格，可以使用特殊字符“ ”实现

0赞 · 0采集
零下一度的雨 2025-12-23

定义函数:
function 函数名()
{
函数代码;
}
函数定义好后，是不能自动执行的，所以需调用它,只需直接在需要的位置写函数就ok了
<input type="button" value="点击我" onclick="contxt()" /> //contxt()为之前定义好的函数

0赞 · 0采集
零下一度的雨 2025-12-23

判断语句 if...else
if(条件)
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

0赞 · 0采集
零下一度的雨 2025-12-23

变量要先声明再赋值可以重复复制
var mychar;
mychar="javascript";
mychar="hello";
var mynum = 6;
在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。

0赞 · 0采集
零下一度的雨 2025-12-23

单行注释，在注释内容前加符号 “//”
多行注释以 /* 开始，以 */ 结束

0赞 · 0采集
零下一度的雨 2025-12-23

javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。

0赞 · 0采集
零下一度的雨 2025-12-23

在JS文件中，不需要<script>标签,直接编写JavaScript代码就可以了。

在HTML中添加<script src="script.js"></script>代码将JS文件嵌入HTML文件中

0赞 · 0采集
零下一度的雨 2025-12-23

<script>标签要成对出现，并把JavaScript代码写在<script></script>之间

<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

0赞 · 0采集
未知_jmrwLW 2025-11-17

函数的组成：
1. function定义函数的关键字。
2. "函数名"你为函数取的名字。
3. "函数代码"替换为完成特定功能的代码。

0赞 · 0采集
未知_jmrwLW 2025-11-17

变量命名规则：
1.变量必须使用字母、下划线(_)或者美元符($)开始。
2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3.不能使用JavaScript关键词与JavaScript保留字。

0赞 · 0采集
Galen_aNOW07 2025-08-28
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>js入门编程挑战2</title>
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;
}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript课程</H2>
<div id="txt">
<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>

<input type="button" value="改变颜色" onclick="change_color()">
<input type="button" value="改变宽高" onclick="change_wight()">
<input type="button" value="隐藏内容" onclick="display_off()">
<input type="button" value="显示内容" onclick="display_on()">
<input type="button" value="取消设置" onclick="cancle_op()">
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
var comment=document.getElementById("txt")

// 保存原始样式
var originalStyles = {
color: comment.style.color,
backgroundColor: comment.style.backgroundColor,
width: comment.style.width,
height: comment.style.height,
display: comment.style.display
};

function change_color() {
comment.style.color="red";
comment.style.backgroundColor ="blue";
}

//定义"改变宽高"的函数
function change_wight() {
comment.style.width="300px";
comment.style.height="200px";
}

//定义"隐藏内容"的函数
function display_off() {
comment.style.display="none";
}

//定义"显示内容"的函数
function display_on() {
comment.style.display="block";
}

//定义"取消设置"的函数
function cancle_op() {
var is_cancel=confirm("是否取消设置？");
if(is_cancel)
{
comment.style.color=originalStyles.color;
comment.style.backgroundColor =originalStyles.backgroundColor;
comment.style.width=originalStyles.width;
comment.style.height=originalStyles.height;
comment.style.display=originalStyles.display;
}
}
</script>
</body>
</html>
0赞 · 0采集
OiO_nvDEG0 2025-08-09

在 JavaScript 中，可以使用 var、let 和 const 关键字来声明变量。
var：ES5 引入的变量声明方式，具有函数作用域。
let：ES6 引入的变量声明方式，具有块级作用域。
const：ES6 引入的常量声明方式，具有块级作用域，且值不可变。

0赞 · 0采集
journey_cfxW57 2025-05-16

Object.style.property=new style;
Object.style.display="none"/"block";
Object.className="new name";
例如：con.style.backgroundColor="red";
backgroundColor
height
width
color
font
fontFamily
fontSize

0赞 · 0采集
journey_cfxW57 2025-05-16

Object.innerHTML 用于获取或替换HTML元素的内容

0赞 · 0采集
journey_cfxW57 2025-05-14

window.open('href','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
mywin.close();关掉窗口

0赞 · 0采集
journey_cfxW57 2025-05-14

alert()弹出消息提示框
confirm()弹出消息对话框，包括一个确定按钮，一个取消按钮

0赞 · 0采集
journey_cfxW57 2025-05-14

document.write(mystr+mychar+"sssss"+"<br>"+"&nbsp"+"ssss");
变量不用加“”，输出固定值加“”

0赞 · 0采集
journey_cfxW57 2025-05-14

if(判断条件){
}
else if{
}
else{
}

0赞 · 0采集
journey_cfxW57 2025-05-14

<script src="script.js"></script>引用外部JS文件

0赞 · 0采集
journey_cfxW57 2025-05-14

document.geiElementById("id").style.color="blue"; 表示设置某个id颜色为蓝色

0赞 · 0采集

数据加载中...