HTML+CSS+JavaScript基础学习笔记2---JavaScript入门篇

时间:2021-10-23 14:44:46

1.引用
(1)<script type="text/javascript>js代码</script>
(2)<script src="xxx.js"></script> 外部引入

2.document.write()输出内容
(1)输出内容用“”括起来,直接输出“”中的内容。(2)通过变量输出内容。 (3)输出多项内容,内容之间用+号连起来。 (4)输出html标签并起作用,标签用“”括起来。

3.函数:
(1)confirm(str):点击确定,返回true; 点击取消,返回false.

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

HTML+CSS+JavaScript基础学习笔记2---JavaScript入门篇

(2)prompt(str1,str2):弹出消息对话框(包含一个确定按钮,取消按钮与一个文本输入框)。str1:要显示在消息对话框中的文本,不可修改;str2:文本框中的内容,可以修改。点击确定,返回文本框中的内容,点击取消,返回null.

var myname=prompt("请输入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");  }

HTML+CSS+JavaScript基础学习笔记2---JavaScript入门篇
(3)window.open([url],[窗口名称],[参数字符串])
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2.”_top”、”_blank”、”_self”具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
HTML+CSS+JavaScript基础学习笔记2---JavaScript入门篇

例如:打开http://www.imooc.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:

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

4.DOM(Document Object Model)文档对象模型
JavaScript DOM
HTML+CSS+JavaScript基础学习笔记2---JavaScript入门篇
属性
(1)innerHTML属性用于获取或替换HTML元素的内容
object.innerHTML;(object是获取的元素对象)
(2)改变HTML元素的样式
object.style.property = new style;
基本属性表(property):
HTML+CSS+JavaScript基础学习笔记2---JavaScript入门篇

改变 <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>

(3)显示和隐藏
object.style.display=none(隐藏)/block(显示)
(4)className
设置或返回元素的class属性 object.className=className;