初探js

来源：互联网发布：淘宝app软件官方下载编辑：程序博客网时间：2024/06/05 19:09

给初学者展示几个小例子

53.JavaScript使用document.write来输出内容。
54.function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
55.JavaScript：对事件作出反应
实例
<button type="button" onclick="alert('Welcome!')">点击这里</button>
56.
Webstorm快捷键说明
ctrl+shift+N 通过文件名快速查找工程内的文件（必记）
ctrl+shift+alt+N 通过一个字符快速查找位置（必记）
ctrl+F 在文件内快速查找代码
F3 查找下一个
shift+F3 查找上一个
ctrl+R 文件内代码替换
ctrl+shift+R 指定目录内代码批量替换
ctrl+shift+F 指定目录内代码批量查找
界面操作

Webstorm快捷键说明
ctrl+shift+A 快速查找并使用编辑器所有功能（必记）
alt+[0-9] 快速拆合功能界面模块
ctrl+shift+F12 最大区域显示代码（会隐藏其他的功能界面模块）
alt+shift+F 将当前文件加入收藏夹
ctrl+alt+s 打开配置窗口
ctrl+tab 切换代码选项卡（还要进行此选择，效率差些）
alt+←/→ 切换代码选项卡
ctrl+F4 关闭当前代码选项卡
代码编辑
Webstorm快捷键说明
ctrl+D 复制当前行
ctrl+W 选中单词
ctrl+←/→
ctrl+←/→ 以单词作为边界跳光标位置
alt+insert 新建一个文件或其他
ctrl+alt+L 格式化代码
shift+tab/tab 减少/扩大缩进（可以在代码中减少行缩进）
ctrl+Y 删除一行
shift+enter 重新开始一行（无论光标在哪个位置）

Webstorm快捷键说明
esc 进入代码编辑区域
alt+F1 查找代码在其他界面模块的位置，颇为有用
ctrl+G 到指定行的代码
ctrl+]/[ 光标到代码块的前面或后面
alt+up/down 上一个/下一个方法
57.
div1.style.display='block'

.类似于的
= 赋值
58.
get 获取
Element 元素
By 用
Id 名称
getElementById 通过名称获取元素
59.
==判断（类似于数学中的等号）

上传一些代码，里面有简单的js应用

if语句的简单应用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title></title>    <style type="text/css">        #div1{            width: 100px;            height: 200px;            background: #ccc;            display: none;        }    </style>    <script>function showHide(){    var oDiv=document.getElementById('div1');    if(oDiv.style.display=='block')    {        oDiv.style.display='none';    }    else    {        oDiv.style.display='block';    }}    </script></head><body><input type="button" value="显示隐藏" onclick="showHide()"/><div id="div1"></div></body></html>

函数传参

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title></title>    <style type="text/css">        #div1{            width: 200px;            height: 200px;            background: red;        }    </style>    <script type="text/javascript">        function toGreen()        {            var oDiv=document.getElementById('div1');            oDiv.style.background='green';        }        function toYellow()        {            var oDiv=document.getElementById('div1');            oDiv.style.background='yellow';        }        function toBlack()        {            var oDiv=document.getElementById('div1');            oDiv.style.background='black';        }    </script></head><body><input type="button" value="变绿" onclick="toGreen()"/><input type="button" value="变黄" onclick="toYellow()"/><input type="button" value="变黑" onclick="toBlack()"/><div id="div1"></div></body></html>

1 0