javascript简介

javascript根据菜鸟教程学习加上部分自己的理解和知识点的补充：https://www.runoob.com/js/js-tutorial.html

为什么学习 JavaScript?【摘自菜鸟教程】

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

学习javascript前需要具备 HTML、CSS的基础

一、JavaScript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

1、JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

*脚本语言与编程语言的区别：

编程语言是把程序员定义的代码翻译成计算机所识别的二进制代码的工具，需要编译器，是一种静态语言，一旦编译完成且运行就不能更改代码，除非将程序停止下来。如：java、c、c++等

脚本语言是解释执行的，不需要编译所以不需要编译器，需要解释器，javascript、html的解释器是浏览器。脚本语言是一种动态语言，可以实时改变代码而不需要将程序停止下来。如：javascript、shell、python等

编译器和解释器最大的不同就是，编译器是面向计算机，解释器是面向某个特定的软件或者计算机的某一部分

2、JavaScript 可以用来做什么呢？

1）JavaScript：直接写入 HTML 输出流

<html>
  <head></head>
  <body></body>
  <script>
    document.write("<h1>这是一个标题</h1>")
    document.write("<p>这是一个段落</p>")
  </script>
</html>

运行：【下面是运行的截图，不是文章内的文字】

2）JavaScript：对事件的反应

<button type="button" onclick="alert('干得好！')">快点老子！</button>

完整代码：

<html>
  <head></head>
  <body>
    <button type="button" onclick="alert('干得好！')">快点老子！</button>
  </body>
  <script></script>
</html>

运行：

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

3）JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

n = document.getElementById('name')
n.innerHTML='骗你的，我是小狼'

完整代码

<html>
  <head></head>
  <body>
    <div id="name">我叫小敏</div>
  </body>
  <script>
    n = document.getElementById('name')
    n.innerHTML='骗你的，我是小狼'
  </script>
</html>

运行：

document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

4）JavaScript：改变 HTML 图像

动态地改变 HTML <image> 的来源（src）：

<html>

<body>

<!--

点击图片更换图片

style和height都是样式，为了方便观察固定了一个高度并且让图片浮动到右边；

name是图像的名称，添加这个是为了后面判断当前是哪个图片从而切换图片，跟菜鸟教程里的element.src.match("bulbon")最终作用是一样；

菜鸟教程里的element.src.match("bulbon")意思是 Src路径里有bulbon匹配则为true，否则为false，更加方便一点，不用再另外更改name的值

这里之所以不用这方法是因为图片是网上找的，路径名一串乱七八糟的名字不方便搞这种查找匹配，如果是自己可以修改图片名的话就可以用。

-->

function changeImage(){

console.log('点击了')

element = document.getElementById('huacheng')

console.log(element.name)

if(element.name == 1)

{

element.src = 'https://gd-hbimg.huaban.com/b1ba91326a9441ef7435048ea14f9ce65011fa02ab4f7-iSaHjo_fw658'//两张图的路径是不一样的，这个是谢怜

element.name = 0

}

else{

element.src = 'https://gd-hbimg.huaban.com/6033e55bf265b542c6cdc1a2538c6b276c076944d069b-n9DrOj_fw658'//这是花城

element.name = 1

}

</script>

</body>

</html>

对比菜鸟：

运行：

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

5）JavaScript：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

demoDom = document.getElementById('demo')//获取元素

demoDom.style.backgroundColor='blue'//更改样式

完整代码：

<html>
  <head></head>
  <body>
   <div style="background-color: red;width:200px;height: 200px;color:white" id='demo'>原本是红色的</div>
    <script>
      demoDom = document.getElementById('demo')//获取元素
      demoDom.style.backgroundColor='blue'//更改样式
    </script>
  </body>
</html>

运行：

6）JavaScript：验证输入

JavaScript 常用于验证用户的输入。

完整代码

<html>

<body>

输入：<input type="text" id='inp'> <button onclick="check()">验证</button>

function check(){

var val = document.getElementById('inp').value

if(isNaN(val)){

alert('不是数字')

}else{

alert('是数字')

}

</script>

</body>

</html>

运行：

以上实例只是普通的验证，如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断

<html>

<body>

输入：<input type="text" id='inp'> <button onclick="check()">验证</button>

function check(){

var val = document.getElementById('inp').value

if(isNaN(val)||val.replace(/(^\s*)|(\s*$)/g,"")==""){

alert('不是数字')

}else{

alert('是数字')

}

</script>

</body>

</html>

运行：

java 和 javascript 虽然名字看起来像，但它们其实毫无关系，无论是在概念还是设计上，都是两种完全不一样的语言。

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。es5及以后的版本统称es6

posted on 2022-08-01 11:58 会喷火的大魔王阅读(161) 评论(0) 收藏举报