为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript入门篇笔记

标签:
JavaScript

认识JavaScript

JavaScript:

  • 所有主流浏览器都支持JavaScript
  • 目前,全世界大部分网页都使用JavaScript
  • 它可以让网页呈现各种动态效果
  • 做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具
  • 易学性,从基础语法到使用DOM进行简单操作

如何写入JS代码:

// 写在script标签中
<script type="text/javascript">
document.write("引用JS文件!");
</script>

// 写在外部中 -> 文件名.js 
<script src="script.js"></script>

常见语法:

<script type="text/javascript">
  // 单行注释
  /*
  *  多行注释
  */
  document.write("I");
  document.write("love");
  document.write("JavaScript");
  var a = 123;  //  变量的声明和赋值
  if(a === 123){
    console.log("a等于123");
  } else {
    console.log("a不等于123")
  }
  function sum(a, b){  //  函数的声明
    return a + b;
  }
</script>

一些api(可以理解为自带的方法):

<script type="text/javascript">
  document.write("I love JavaScript!");  // 直接打印
  
  var mynum = 30;
  alert(mynum);  //  弹出对话框
  
  var mymessage=confirm("你喜欢JavaScript吗?");  //  弹出自定义对话框
  if(mymessage==true)
  {   document.write("很好,加油!");   }
  else
  {  document.write("JS功能强大,要学习噢!");   }

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

window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')  //  打开新窗口

var mywin=window.open('http://www.imooc.com');  //  记下新窗口
mywin.close();  //  关闭新窗口
</script>

DOM(文档对象模型),三种常见的DOM节点:

  • 元素节点:<html><body><p>等都是元素节点,即标签。
  • 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本
  • 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"
document.getElementById(“id”)  //  获取ID为id的元素
// 除了getElementById通过ID获取元素,还有,
// getElementsByClassName(通过类名获得元素)
// getElementsByTagName(通过标签名获得元素)
// querySelector(通过选择器获得元素)
// querySelectorAll(通过选择器获得元素)

Object.innerHTML  // 获取Object的内容,Object是通过上述方法获得的元素

var mychar = document.getElementById("pcon");  //  改变元素样式
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";

Object.style.display = true | false(隐藏)  // 设置元素显示和隐藏

object.className = classname  //  获取设置元素的类名

更多API参考,可以查看MDN Document 接口

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消