Web前端初步——Javascript(0)

最新推荐文章于 2022-10-24 23:25:29 发布

糖程

最新推荐文章于 2022-10-24 23:25:29 发布

阅读量520

点赞数

分类专栏： Web前端初步文章标签： web前端 javascript html

本文链接：https://blog.csdn.net/qq_26864077/article/details/51303511

版权

Web前端初步专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、引入js的方法

第一种方法：若要在html代码中填写javascript语句，则在<html>.........</html>内添加主体：注：看个人需要确定放置位置。一般放在网页的head或者body部分。

#预添加的 javascript语句

</script>

第二种方法：引用js外部文件

将HTML文件和JS代码分开,单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js，然后将JS代码直接写在JS文件中。

利用<script src="script.js"></script>语句将外部js文件嵌入到html文件中运行。

综合来看，两种方法实现同一结果的代码比较如下：

html引入js的方法比较
	第一种方法	第二种方法
html代码	<!DOCTYPE HTML> <html> <head> </head> <body> <script type="text/javascript" > document.write("hello"); </script> </body> </html>	<!DOCTYPE HTML> <html> <head> <script src="script.js"></script> </head> <body> </body> </html>
js文件代码	无	document.write("hello");

2、javascript语句格式

a、语句;——养成每句结束后都有英文分号“;”的习惯。

b、注释——单行注释“//”,多行注释“/* */”

c、变量声明——var 变量名

d、if.....else同其它语言使用方式相同

e、声明函数——function 函数名( ){函数代码}

eg：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数调用</title>
<script type="text/javascript">
function contxt() //定义函数
{
alert("哈哈，调用函数了!");
}
</script>
</head>
<body>
<form>
<input type="button" value="点击我" οnclick="contxt()" />
</form>
</body>
</html>

f、docunmeny.write()——直接在网页中输出内容

在此种方式下，包含以下几种输出格式：输出内容用“”括起，直接输出""号内的内容；通过变量，输出内容；输出多项内容，内容之间用+号连接；输出HTML标签，并起作用，标签使用“”括起来。

g、js输出多个空格（因为浏览器显示机制，对于手动敲入的空格，会将连续多个空格仅显示成1个空格。）

第一种方法：使用输出html标签 来解决

document.write("  "+"1"+"    "+"23");

输出结果：1 23

第二种方法：使用CSS样式——“white-space:pre;”样式属性，表示"空白会被浏览器保留"

document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>");

输出结果：1 2 3

h、“警告”消息对话框——alert(str);仅弹出消息和确定按钮

i、“确认”消息对话框——confirm(str)，弹出消息及确定和取消按钮,当用户点击"确定"按钮时，返回true。当用户点击"取消"按钮时，返回false

j、"提问"消息对话框——prompt(str1,str2),弹出包含一个消息，确定按钮、取消按钮与一个文本输入框。点击确定按钮，文本框中的内容将作为函数返回值；点击取消按钮，将返回null。

str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改

k、打开窗口——window.open([URL], [窗口名称], [参数字符串])

l、关闭窗口——window.close()或<窗口对象>.close();

m、通过ID获取元素——document.getElementById(“id”)

eg:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar=document.getElementById("con").innerHTML;
document.write("结果:"+mychar); //输出获取的P标签。
</script>
</body>
</html>

输出结果：JavaScript
结果:JavaScript

注：document.getElementById('con')获取的只是P标签，返回的是[object HTMLParagraphElement]，document.getElementById('con').innerHTML获取的才是P标签里的内容，返回的是JavaScript。

n、利用id属性改变HTML样式——Object.style.property=new style; 特别的，Object.style.display = value；value取none，表示此元素不会被显示即隐藏。取block,表示此元素将显示为块级元素，即显示。

Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

eg:

改变 <p> 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>

o、控制类名：object.className = classname

作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观